Home/ Questions/Q 176699
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T13:55:26+00:00

I’ve got a website which has a layout sorta like this: <html xml:lang=en xmlns=http://www.w3.org/1999/xhtml

  • 0

I’ve got a website which has a layout sorta like this:

<html xml:lang='en' xmlns='http://www.w3.org/1999/xhtml' lang='en'>   <body style='margin:0px'>     <div style='border-left: 5px solid black;'>       <div><!-- x -->         <div>           <div>             <div style='margin-top: 100px'>               fish             </div>           </div>         </div>       </div>     </div>   </body> </html>

I want the entire page to have a border down the left side. However, it seems the deeply-nested div’s 100px top margin is causing its ancestor’s border-left to get pushed down.

For some reason, if i uncomment the ‘x’, everything looks great.

What is going on?!?!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Margins collapse, even with contained elements, so your inner div‘s margin is pushing the outer div down. Fortunately, the solution is simple: add ‘overflow: auto‘ to your outer div‘s styles (the one with the border).

    <html xml:lang='en' xmlns='http://www.w3.org/1999/xhtml' lang='en'>   <body style='margin:0px'>     <div style='border-left: 5px solid black; overflow: auto;'>       <div><div><div>         <div style='margin-top: 100px'>fish</div>       </div></div></div>     </div>   </body> </html>
    • 0