Home/ Questions/Q 9023373
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T05:44:44+00:00

Why is the blue div not adjacent to green div? This is the html.

  • 0

Why is the blue div not adjacent to green div?

This is the html. Nothing but containers with borders.

<div id="wrapper960"  style="min-height:350px; border:1px red solid">
<div class="content-sidebar-l" style="min-height:250px; border:1px yellow solid">&nbsp;</div>
<div class="content" style="min-height:250px; border:1px green solid"></div>
<div class="content-sidebar-r"style="min-height:250px; border:1px blue solid"></div>

</div>

This is the CSS with centered div on the middle.

#wrapper960 {margin:0 auto; padding:0; width:960px;}

.content-sidebar-l {
  float: left; 
  width:170px; 
  margin:0; 
  padding:0;}
.content {
  margin:0 auto; 
  padding:1em 0 0 0; 
  width:610px; 
  background-color:#fff;}
.content-sidebar-r {
  float: right;
  width:160px; 
  margin:0; 
  padding:0;}

blue div floating right issue
(source: imagesup.net)

Here it is in a JSFiddle

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Re-order your HTML to:

    <div id="wrapper960"  style="min-height:350px; border:1px red solid">
<div class="content-sidebar-r"style="min-height:250px; border:1px black solid"></div>
<div class="content-sidebar-l" style="min-height:250px; border:1px yellow solid">&nbsp;</div>
<div class="content" style="min-height:250px; border:1px green solid"></div>
</div>​

    jsFiddle example

    You need to float your sidebar to the right first, otherwise by placing it last it can’t float up above an element before it that is also floated.

    • 0