SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    Netherlands
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS Floats Weird behaviour

    why becomes:
    HTML Code:
    <div style="width:400px">
        <div style="float:right;clear:right;height:90px;width:1px;background-color:blue;"/></div>
        <div style="float:right;clear:right;width:115px;height:143px;background-color:blue;"/></div>
        <div style="float:left;clear:left;height:210px;width:1px;background-color:red;"/></div>
        <div style="width:198px;float:left;clear:left;height:105px;background-color:red;"/></div>
    </div>
    this:
    css-outcome.gif
    instead of:
    css-wantto.gif

    It does that in all major recent browsers.
    How can I get the behaviour of the last image?

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

    It's not actually weird behaviour as a float will only float as high as the previous float in the html. You should really be doing that structure in 2 separate floated columns rather than individual items.

    You can get the effect you want if you change the order of your divs bt will only work for that small demo and not for multiple items of varying height.

    Code:
    <div style="width:400px">
        <div style="float:right;clear:right;height:90px;width:1px;background-color:blue;"></div>
        <div style="float:left;clear:left;height:210px;width:1px;background-color:red;"></div>
        <div style="float:right;clear:right;width:115px;height:143px;background-color:blue;"></div>
        <div style="width:198px;float:left;clear:left;height:105px;background-color:red;"></div>
    </div>
    Note that divs are not self closing so remove the trailing slash.

  3. #3
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    Netherlands
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah, well that closing slash was because of a copy paste from firebug.

    The idea is that the main div contains text, and the floats push it inwards to make space for other elements absolute positioned on top. These spaces are calculated on the fly and then applied to the div, does changin the order solve the problem when the height of the divs change as well, or maybe the right side has more floated items.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Sergeant View Post
    ah, well that closing slash was because of a copy paste from firebug.

    The idea is that the main div contains text, and the floats push it inwards to make space for other elements absolute positioned on top. These spaces are calculated on the fly and then applied to the div, does changin the order solve the problem when the height of the divs change as well, or maybe the right side has more floated items.
    It is unlikely to work with multiple items as you will get gaps again:

    e.g.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    </head>
    
    <body>
    <div style="width:400px">
    		<div style="float:right;clear:right;height:90px;width:1px;background-color:blue;"></div>
    		<div style="float:left;clear:left;height:210px;width:1px;background-color:red;"></div>
    		<div style="float:right;clear:right;width:115px;height:143px;background-color:blue;"></div>
    		<div style="width:198px;float:left;clear:left;height:105px;background-color:red;"></div>
    		<div style="float:right;clear:right;height:90px;width:1px;background-color:blue;"></div>
    		<div style="float:left;clear:left;height:210px;width:1px;background-color:red;"></div>
    		<div style="float:right;clear:right;width:115px;height:143px;background-color:blue;"></div>
    		<div style="width:198px;float:left;clear:left;height:105px;background-color:red;"></div>
    		<div style="float:right;clear:right;height:90px;width:1px;background-color:blue;"></div>
    		<div style="float:left;clear:left;height:210px;width:1px;background-color:red;"></div>
    		<div style="float:right;clear:right;width:115px;height:143px;background-color:blue;"></div>
    		<div style="width:198px;float:left;clear:left;height:105px;background-color:red;"></div>
    </div>
    </div>
    </div>
    </body>
    </html>
    You will probably have to script the 1px "sandbag" height to get the exact heights to make it all work together as you want.

    Is it that important to be exact?


Tags for this Thread

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
  •