Containing floats - Understanding - For the last time

HTML & CSS
1

Hello all,

Please correct any issues on my interpretation:

The css:

 .gs960 {
            width: 960px;
            margin: 0 auto;
            background-color: blue;
        }

        #miniContainer {
            width: 960px;
            overflow:hidden;
            background-color: red;
        }

        #sidebar {
           width: 208px;
           float: left;
           background-color: yellow;
        }

        #cartContainer {
            width: 100px;
            background-color: green;
        }

The html:

<body>
    
    	<div id="main">
    
    		<div class="gs960">
    
    
                            <div id="miniContainer">
    
    
    
                                <div id="sidebar">
                                    <p>Side bar here</p>
                                </div>
    
                                <div id="cartContainer">
                                    <p>I need to be on the right side of Side bar</p>
                                </div>
    
    
                            </div><!-- fecha miniContainer -->
    
                </div> <!-- fecha gs660 -->
    
    	</div> <!-- fecha main -->
    
    
    </body>

If I apply a float left to #cartContainer is stays on it’s side. But do I need it?

W/out it:
1)Why the #cartContainer doesn’t stay on the right side of #sidebar ?

It seems that the reason is because the element is floated and as a display block, hence, all elements will stay after it, on a “vertical line”.

However, if we do:

<div id="main">
    
    <div class="gs960">
    
    <div id="miniContainer">
    
     <div id="sidebar">
          <p>Side bar here</p>
     </div>
    
        <p>I need to be on theasdsa dasd asda
             I need to be on theasdsa dasd asdas ad asd asd as das das right side of Side bar
             I need to be on theasdsa dasd asdas ad asd asd as das das right side of Side bar
             I need to be on theasdsa dasd asdas ad asd asd as das das right side of Side bar
             I need to be on theasdsa dasd asdas ad asd asd as das das right side of Side bar
             I need to be on theasdsa dasd asdas ad asd asd as das das right side of Side bar
             s ad asd asd as das das right side of Side bar</p>
     </div><!-- fecha miniContainer -->
    </div> <!-- fecha gs660 -->
    </div> <!-- fecha main -->

2)The <p> (that is also block by default right? Doesn’t start after the #sidebar, but at is side. Why?

Thanks.
Márcio

2

What are the properties of #main?

3

Hello,

Main as no properties defined.

Thanks,
Márcio

4

If I apply a float left to #cartContainer is stays on it’s side. But do I need it?
Hi,

You would get the 3px jog bug in IE6 if you do not float the #cartContainer, if you do float it you should set a width on it in this case since it would shrinkwrap with minimal content.

W/out it:
1)Why the #cartContainer doesn’t stay on the right side of #sidebar ?
It would have if you had not given it a width of 100px, it was actually sliding under the float, just the text was pushed below the float. But if you had of floated it left with a width it would have worked.

It would also appear to be on the right if you did not set a width at all, but it would have been sliding under the float without it. Only the text would be wrapping around the float. A left margin or overflow:hidden would keep the text from wrapping under the float.

2)The <p> (that is also block by default right? Doesn’t start after the #sidebar, but at is side. Why?
It’s sliding under the float since it is a block, just the text wraps around the float. It’s because you did not set a width on it as mentioned above (normally you would not be setting a width on a <p> tag anyways).

Here is an example using overflow:hidden on #cartcontainer without a width.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font: 100%/1.3 arial,helvetica,sans-serif;
}
.gs960 {
            width: 960px;
            margin: 0 auto;
            background: blue;
        }
 
        #miniContainer {
            width: 960px;
            overflow:hidden;
            background: red;
        }
 
        #sidebar {
           width: 208px;
           float: left;
           background: yellow;
        }
 
        #cartContainer {
            [COLOR=Blue]overflow:hidden;
            background: green;[/COLOR]
        }
</style>

</head>
<body>


<div class="gs960">
    <div id="miniContainer">
        <div id="sidebar">
            <p>Side bar here</p>
        </div>
        <div id="cartContainer">
            <p>I need to be on theasdsa dasd asda
            I need to be on theasdsa dasd asdas ad asd asd as das das right side of Side bar
            I need to be on theasdsa dasd asdas ad asd asd as das das right side of Side bar
            I need to be on theasdsa dasd asdas ad asd asd as das das right side of Side bar
            I need to be on theasdsa dasd asdas ad asd asd as das das right side of Side bar
            I need to be on theasdsa dasd asdas ad asd asd as das das right side of Side bar
            s ad asd asd as das das right side of Side bar</p>
        </div>
    </div><!-- fecha miniContainer -->
</div> <!-- fecha gs660 -->


</body>
</html>