SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Float question for CSS experts

    Hello,

    consider the following code of three floated columns:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #sidebar, #sidebar2, #sidebar3 {
    	float: left;
    	width: 185px;
    	height: 400px;
    	background: green;
    }
    #sidebar2 {
    	height: 300px;
    	background: yellow;
    }
    #sidebar3 {
    	background: blue;
    }
    </style>
    </head>
    <body>
    	<div id="sidebar">
    		sidebar1
    	</div>
    	<div id="sidebar2">
    		siderbar2
    	</div>
    	<div id="sidebar3">
    		siderbar3
    	</div>
    </body>
    </html>
    What I want is that when the browser resizes to the degree that not all 3 columns can fit side by side, then the 3rd column will collapse under the 1st column, without leaving a gab between them. This should happen regardless of the heights of any of the 3 columns.

    As it is now, if the 2nd column is shorter than the 1st (as in the example above) then the 3rd column collapses under the 2nd and not the 1st column. if the 2nd column is longer, then the 3rd column collapses under the 1st, but it leaves a gab between them.

    Obviously this is the standard behavior of floats, but I need some sort of hack that will get me the results I want, at least with modern browsers (I6 and better).

    Thanks

  2. #2
    SitePoint Addict
    Join Date
    Apr 2007
    Location
    Phoenix, AZ
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just some quick thoughts. I'm sure you'll get some more detailed responses soon.

    If you really want to use fixed heights then why not just make the second column the same as the first or longer if you need it to be?

    As far as the gap, maybe try top or bottom margin to 0. Don't know if that would work but easy to try.

    Another option would be to make all columns a &#37; width so they always remain on the same 'line'.
    Joe

  3. #3
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but the columns would be dynamically filled by a CMS so they can not have fixed heights. I used fixed heights above just to give an example, but as I said I am looking for a solution that will work regardless of heights.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Just wrap the first two floats in a float.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #sidebar, #sidebar2, #sidebar3 {
        float: left;
        width: 185px;
        height: 400px;
        background: green;
    }
    #sidebar2 {
        height: 300px;
        background: yellow;
    }
    #sidebar3 {
        background: blue;
    }
    #wrap{float:left;}
    </style>
    </head>
    <body>
    <div id="wrap">
        <div id="sidebar"> sidebar1 </div>
        <div id="sidebar2"> siderbar2 </div>
    </div>
    <div id="sidebar3"> siderbar3 </div>
    </body>
    </html>
    If I understand you correctly then that should do what you want

  5. #5
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul.

    Your solution would solve the problem in the first case where the 2nd column is shorter than the 1st. However the second problem remains. If the 2nd column is longer than the 1st then when the 3rd column collapses under the 1st there is a gab between them.

    Any solution for that part of the problem?

    Thanks.

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Will this meet your requirements?

    I've only tested this in IE6 & FF, but it should work (assuming you can use an absolutely positioned div in your layout).

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    
    #sidebar, #sidebar2, #sidebar3 {
    	float: left;
    	width: 185px;
    	height: 400px;
    	background: green;
    }
    #sidebar2 {
    	height: 600px;
    	background: yellow;
    }
    #sidebar3 {
    	background: blue;
    }
    
    /* My CSS additions */
    body {margin:0; padding:0;}
    #wrapper {width:370px; float:left; }
    #sidebar2 {
    	position:absolute;
    	left:185px;
    	top:0;
    }
    
    </style>
    </head>
    <body>
    <div id="wrapper"> <!-- add the wrapper around sidebar1 and sidebar2 -->
    	<div id="sidebar">
    		sidebar1
    	</div>
    	<div id="sidebar2">
    		siderbar2
    	</div>
    </div> <!-- end wrapper -->
    
    	<div id="sidebar3">
    		siderbar3
    	</div>
    
    </body>
    </html>

  7. #7
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks rainmakr. Your solution meets the requirements I gave.

    However I would like to maintain the way the 3 columns behaved when the window is reduced even further, so in that case all 3 columns to be stacked in a single column.

    Also the columns should be able to "push down" what comes after them which can be a problem when they are absolutely positioned.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Other than the above 2 demos I don't think you will be able to achieve exactly what you want as there seems to be no way for the float to wrap and then travel upwards. You can use a negative top margin of course but then it wouldn't be automatic.

  9. #9
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with Paul. There doesn't seem to be a way to meet all the requirements automatically with CSS2.x alone.

    You could set it up to place a class on body to switch between the layout variants.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  10. #10
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its OK. Making sure that the first column is at least as high as the second is a small compromise.

    Thank you all for your help


Bookmarks

Posting Permissions

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