CODEWITHSUNDEEP
htmlcsscss-float
MEM
MEM

Reputation: 31337

CSS - Contain float issue - Why?

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. MEM

Upvotes: 0

Views: 278

Answers (1)

user520023
user520023

Reputation:

Look at that: http://www.jsfiddle.net/pereskokov/XptKx/2/ Cause is that width of cartContainer is lower that sidebar, so sidebar can't be placed 'inside' cartContainer. In the other words, cartContainer can't 'flow round' sidebar.

The second variant works because of width of p is default set to 100%.

Also, may be I misunderstood you, so check another decision if you want to fixed width conainers placed horizontaly, uno tras otro: http://www.jsfiddle.net/pereskokov/wKKsZ/1/

Upvotes: 2

Related Questions