SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist ashattuc's Avatar
    Join Date
    Aug 2002
    Location
    Boise, Idaho
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Float is breaking layout

    Hello All,

    I've jumped on the CSS bandwagon almost entirely, but there is one thing that I can't get to work.

    I'm using a 3-column layout where you're using floats to create the left and right column. The problem is that if there is is a non-flexible item in the center column, like a particularly large image, the right column float will push the large item in the center column down and create a chunk of space above it.

    Now, with table layout, you wouldn't be able to reduce the browser size anymore, and a horizonal scrollbar would show up. For the price of horizontal scrolling, you no longer have a huge chunk of unused space right in the center of your page.

    Is there any way to get around this problem? For instance, can you set a float to stop pushing in the content of the containing div at some point. If not, does anyone have a compelling reason to use a complete CSS layout in this case?

    Thank you,
    Chris S.
    Chris S.

    Free Web Scripts - Form generators, AJAX tools and more!
    Micro CMS - A totally free AJAX-based, SEO-ed CMS!

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

    You could probably set a min-width for mozilla browsers to stop the page at a set width but it doesn't work for ie unfortunately.

    Alternatively you could also float the centre column first so that the outer column breaks downwards and leaves the centre column visible.

    Something like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #left, #right {
    width:30%;
    background:red;
    }
    #right {float:right;width:20%;}
    #centre {
    float:right;
    width:68%;
    background:#ffffcc;
    }
    #wrapper {
    width:79%;
    float:left;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div id="centre">Centre : content :Centre content : Centre : content :Centre 
    	content : Centre : content :Centre content : Centre : content :Centre content 
    	: Centre : content :Centre content : Centre : content :Centre content : Centre 
    	: content :Centre content : Centre : content :Centre content : Centre : content 
    	:Centre content : Centre : <img src="pic.jpg" width="400" height="202" alt="test image" />content 
    	:Centre content : Centre : content :Centre content : Centre : content :Centre 
    	content : Centre : content :Centre content : Centre : content :Centre content 
    	: Centre : content :Centre content : Centre : content :Centre content : Centre 
    	: content :Centre content : Centre : content :Centre content : Centre : content 
    	:Centre content : Centre : content :Centre content : Centre : content :Centre 
    	content : Centre : content :Centre content : Centre : content :Centre content 
    	: Centre : content :Centre content : Centre : content :Centre content : Centre 
    	: content :Centre content : </div>
    <div id="left">Left Content : Left content : Left Content : Left content : Left 
    	Content : Left content : Left Content : Left content : Left Content : Left 
    	content : Left Content : Left content : Left Content : Left content : Left 
    	Content : Left content : Left Content : Left content : Left Content : Left 
    	content : Left Content : Left content : Left Content : Left content : Left 
    	Content : Left content : Left Content : Left content : Left Content : Left 
    	content : Left Content : Left content : Left Content : Left content : </div>
    </div>
    <div id="right">Rig<img src="pic3.jpg" width="120" height="42" />ht 
    Content : right content : Right Content : right content :Right Content : right 
    content :Right Content : right content :Right Content : right content :Right 
    Content : right content :Right Content : right content :Right Content : right 
    content :Right Content : right content :Right Content : right content :Right 
    Content : right content :Right Content : right content :</div>
    </body>
    </html>
    I suppose the other alternative is to absolutely place the left and right columns and set a left and right margin for the centre content to clear the outer columns. In this way the columns will just slide over the top when the fixed element reaches the edges of its container.

    If ie supported min-width then there would be no problem

    I suppose it boils down to how important this is to you and how bad the effect is. If a table is the only way to do it then use it.

    Without seeing your page it 's hard to offer any solid solutions but the effect you speak of is supposed to be more of a feature than a problem. However I do understand that this can be annoying in certain circumstances.

    Paul

  3. #3
    SitePoint Evangelist ashattuc's Avatar
    Join Date
    Aug 2002
    Location
    Boise, Idaho
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thank you for the response, and for being so active in this community!

    Say, I started a thread in the Web Design forum: http://www.sitepoint.com/forums/showthread.php?t=157009
    about how to set up a table to achieve a two column layout where the middle row butts up against the top (header) row. Let me know if you have any ideas on that, too.

    I can see that the way the floats bump things down is good for accessibility, thus being a feature, but it just puts a cramp on usability in this particular case.

    I will try to apply your solution and see what happens. Thanks again!

    Chris S.
    Chris S.

    Free Web Scripts - Form generators, AJAX tools and more!
    Micro CMS - A totally free AJAX-based, SEO-ed CMS!


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
  •