Home/ Questions/Q 3437202
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T08:02:10+00:00

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

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0