Margin of one element affecting the element at its side

StackOverflow https://stackoverflow.com/questions/14031243

  •  12-12-2021
  •  | 
  •  

Question

I'm trying to make a simple, fluid, responsive two column layout (just for the sake of learning CSS), consisting of a sidebar and a main section.

I was able to create the sidebar with 100% height, position the main content at its side, but when I put a H1 inside my main section... tada! Its margin created a margin for the sidebar as well.

Here's a minimum code that presents the problem:

<!DOCTYPE html>
<html>
  <head>
    <style>
      html,body {
        margin:0;
        padding:0;
        width:100%;
        height:100%;
      }

      #sidebar {
        display:block;
        position:absolute;
        width:25%;
        min-height:100%;
        border-right:1px solid #222;
        background-color: #E0E0E0;
      }

      #main {
        margin-left:25%;
        display:block;
      }

      h1 {
        padding:2%;
        /* margin:0; */
        /* defining the margin as zero aligns 
         * everything at the top */
      }
    </style>
  </head>

  <body>
    <header id="sidebar">
      Let's reach for the stars!
    </header>

    <section id="main">
      <h1>Nope!</h1>
    </section>

  </body>
</html>

I've tested it in Chrome and Firefox, happened in both.

I've created this JSFiddle, and thanks to a comment from cimmanon, the behavior is the same.

Well, I'm lost. Am I missing something really simple?

Is this approach a good way to make a two column layout? I inspired myself reading the CSS from the Svbtle blogs.

If it isn't, please indoctrinate me in some right way to do it. I am in need of good CSS indoctrination :)

Thanks!

Was it helpful?

Solution

Generally speaking, absolute positioning should be avoided unless you really do want the element removed from the document's flow. If you have a page where #main ends up having shorter content than #sidebar and the user's display isn't tall enough to display all of #sidebar's contents, you're going to have your content clipped off.

My favored way of achieving equal height columns is to use the display: table CSS properties.

http://jsfiddle.net/PmkCQ/3/

html,body {
        margin:0;
        padding:0;
        width:100%;
        height:100%;
      }

body { display: table }

      #sidebar {
        width:25%;
        border-right:1px solid #222;
        background-color: #E0E0E0;
      }

      #sidebar, #main {
        display:table-cell;
        vertical-align: top; /* optional */
      }

      h1 {
        padding:2%;
        margin-top: 0;
        /* margin:0; */
        /* defining the margin as zero aligns 
         * everything at the top */
      }

There's other ways, of course, but this one is less brittle than floats or absolute positioning. The only down side is that IE7 doesn't support these properties, so they'll continue using the element's previously defined (or default) display setting (for div, it will be block).

OTHER TIPS

Add display: inline-block to the h1 and it won't influence the side bar. Then you can set any margin you want.

The reason it seemed fine in JSFiddle is probably the styles applied from their styles (inspect the h1 and you'll see it has margin:0).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top