Author: tabcom

Posted on

Padding and margin in nested divs (containers)

Go here and paste HTML code into the HTML pane and CSS code into the CSS pane to test and inspect the result.

HTML:

<div id="outer">
  <p>Some text</p>
  <div id="inner1">
    <p>Some text</p>
  </div>
  <div id="inner2">
    <p>Some text</p>
  </div>
  <div id="inner3">
    <p>Some text</p>
    <div id="inner3_inner">
      <p>Some text</p>
    </div>
  </div>
</div>

We can inspect the layout using borders.

CSS:

#outer {border: 5px solid red;}
#inner1 {border: 5px solid darkgreen;}
#inner2 {border: 5px solid blue;}
#inner3 {border: 5px solid orange;}
#inner3_inner {border: 5px solid purple;}

Continue reading “Padding and margin in nested divs (containers)”

Posted on

CSS Equal height colums

Most multi-column layouts use multiple float:left divs inside a container div.

Lets have a look at a simple main column and sidebar column layout:

HTML:

<div class="main">
    <div class="container clearfix">
        <div class="content">
            <section>
                <h1>This is the Main Content</h1>
                <hr>
                <h2>A sub heading</h2>
                <p>Lorem ipsum dolor sit amet, consectetur...</p>
                <p>Lorem ipsum dolor sit amet, consectetur...</p>
                <p>Lorem ipsum dolor sit amet, consectetur...</p>
                <p>Lorem ipsum dolor sit amet, consectetur...</p>
                <p>Lorem ipsum dolor sit amet, consectetur...</p>
                <p>Lorem ipsum dolor sit amet, consectetur...</p>
            </section>
        </div>
        <div class="sidebar">
            <aside>
                <h2>This is a sidebar</h2>
                Sign up to the newsletter!
            </aside>
        </div>
    </div><!-- /.container -->
</div><!-- /.main -->

Go here and paste the above code into the HTML pane.

Continue reading “CSS Equal height colums”