Home/ Questions/Q 8424683
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T04:04:03+00:00

How come when I float #main div to the right, the right border doesn’t

  • 0

How come when I float #main div to the right, the right border doesn’t line up with the right border of the header div? 

* {
     margin: 0;
     padding: 0;
}

html, body {
     height: 100%;
}

#wrapper {
     width: 960px;
     height: 100%;
     margin: 0 auto;
}

#header {
     width: 960px;
     height: 70px;
     border: 1px solid black;         
     margin-bottom: 20px;
     margin-top: 20px;
}

#leftcol {
     width: 250px;
     height: 500px;
     border: 1px solid black; 
     float: left;
     margin-right: 20px;          
 }

 #main {  
    width: 686px;
    height: 500px;
    border: 1px solid black;
    float:right;
 }

HTML

<html>
  <body>
    <div id="wrapper">
      <div id="header">
      </div>
      <div id="leftcol">
      </div>  
      <div id="main">
      </div>
    </div><!--end wrapper-->
  </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You forgot to consider the border width of the header.
    In total, your header’s width is 960px + 2px from the border = 962px, while the main content plus the sidebar have a width of 960px.

    If you set the header’s width to 958px, both divs align.

    Here’s a reference to the CSS box model to help you do the math: CSS box model

    • 0