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 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    34
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Really simple CSS problem

    Hi, I've got a really simple CSS problem that I hope any of you can help me with!

    Here is what I have right now:

    http://www.firstmerch.com/index.html

    I'm trying to make 3 columns for a website; left column, middle column, and right column. I used "float: left" on all 3 columns with fixed widths for each column and they nicely go across the page.

    But here is the problem, I do not want the middle column to be a fixed width - I want it to fill across the page so I changed it to 100% for the middle column, but then the right column goes onto the next line/row below, rather then sating on the right. However, the left column stays where it was.

    Can anybody tell me why it's doing this?

    Here is the code of the CSS:

    Code:
    #leftcolumn 
    {
    background: #666666;
    width: 157px;
    float: left;
    }
    
    #middlecolumn
    {
    background: #dddddd;
    width: 100%:
    float: left;
    }
    
    #rightcolumn
    {
    background: #999999;
    width: 157px;
    float: left;
    }

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    well you are telling #middlecolumn to fill up 100% of the space, and as floating takes the element out of the document flow, you end up with this problem.

    simple fix is to remove the width + float from #middlecolumn, and float #rightcolumn "right" instead of left.

    add a margin to #middlecolumn if you desire some spacing.

    and change the markup ~

    Code:
    <div id="leftcolumn">Left Section</div>
    <div id="rightcolumn">Right Section</div>
    <div id="middlecolumn">Middle Section</div>
    also you have used a ":" instead of ";" to close width:100%;
    Last edited by met; 08-12-2010 at 02:48 PM.

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Then you won't want to float the middle column. This may help.

    http://bonrouge.com/3c-hf-fluid.php
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    New Coder
    Join Date
    Aug 2010
    Posts
    34
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thank you very much Met and Aerospace_Eng_.

    Met - I did what you said, but now having filled up the middle section a little bit, this happens:

    http://www.firstmerch.com/index.html

    The middle column is now spreading underneath both left and right columns. How do I prevent this?

    Aerospace_Eng_ - Is this the problem you said might happen in your previous post?

    Thanks, James

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Yes but as stated you need to add a left and right margin that is greater than the width of your columns. The link I gave you is exactly what you need. Learn from it, use it.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    New Coder
    Join Date
    Aug 2010
    Posts
    34
    Thanks
    4
    Thanked 0 Times in 0 Posts
    thanks aerosmith, i'm taking it all in 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
    •