Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Making a DIV a fixed width

    Hey, I have a div that I am using as a header bar for my content
    I have 2 columns, (main content & side bar) the main content div stays the correct size I specified but the side bar next to it does not stay the width I want it to be, but instead just wraps itself round the text I've entered. I am relatively new to CSS & divs so if somebody could tell me the answer and explain why that'd be very helpful thanks.

    Here is the css code for my side bar

    .contentheader2{
    width:278 px;
    height:30 px;
    font-size:10px;
    font-weight:bold;
    padding-top: 10px;
    padding-right: 10px;
    background-image: url(images/contentheaderbg_15.gif);
    background-color: rgb(210,209,202);
    background-repeat: repeat-x;
    color: #333;
    text-align: right;
    }

    and here is the html

    <div class="content">
    <div class="leftcolumn">
    <div class="contentheader1"> Home &raquo; </div></div>
    <div class="rightcolumn">
    <div class="contentheader2">Recent Press Coverage</div></div>
    <div class="clear"></div>
    </div>

    Content is my holder div, left column is my main content & right column is the side bar. the content header is the one I am having the problem with.

    this is the css for the left & right columns & content holder

    .content{
    width:852px;
    }
    .leftcolumn{
    float:left;
    width:517px;
    padding-top:20px;
    padding-bottom:20px;
    }
    .rightcolumn{
    width:278 px;
    padding-top:20px;
    padding-bottom:20px;
    float:right;
    }

    Sorry if I haven't explained my problem very well

    here is also a screen shot of my site
    http://i1081.photobucket.com/albums/...e2/website.png

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello DaleCee,
    It looks like a space is causing your problem - width:278 px; is not really a width. width:278px; is.

    The validator finds that and other errors in your CSS. See the links in my signature line about validation.

    You might also like to have a look at a very simple 2 column layout here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    DaleCee (04-04-2011)

  • #3
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks a lot! I feel silly now =}


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •