2Column CSS Layout

Question

I have the following:

<div id="aboutus">
<div id="header"></div>
<div id="headerbar"><p>ABOUT US</p></div>
<div id="contentarea">
<p>CONTENT ABOUT US</div>
<div id="clear"></div></div>

<div id="contact">
<div id="header"></div>
<div id="headerbar"><p>CONTACT US</p></div></div>
<div id="contentarea">CONTENT CONTACT US</div>
<div id="clear"></div>
</div>

and:

#aboutus {
    float:left;
    width:100%;
    height:100%;
}
#contact{
    float:left;
    width:100%;
    height:100%;
}
#headerbar {
    float:left;
    width:25%;
    height:100px;
    text-align:right;
    padding-right:5px;
}
#contentarea{
    float:left;
    width:70%;
    height:100px;
}
#clear{
    clear: both;
}
#header{
    background:url(bg.png) no-repeat center center;
    background-size:contain;
    width:100%;
    height:200px;
}

I'm totally new to this so I'm sure I'm doing something silly. Basically its two 2 collumn layouts on top of one another, the aboutus div is fine however the contact div displays within the about us div. Any suggestions on what I'm doing wrong?

Answer 1

If you would like to specify two divs on top of another, can specify display:block; with the width:100%; like below

.div{
    display: block;
    width: 100%;
}

You don't have to use floats. Of course, there's a plenty of ways you can achieve, this is one of the way to do that. You can play around about this here http://jsfiddle.net/qiqiabaziz/mrrQU/

Answer 2

Your code should be:

<div id="aboutus">
<div class="header"><div class="headerbar"><p>ABOUT US</p></div></div>
<div class="contentarea">
<p>CONTENT ABOUT US</div>
</div>
<div id="clear"></div>
<div id="contact">
<div class="header"><div class="headerbar"><p>CONTACT US</p></div></div>
<div class="contentarea">CONTENT CONTACT US</div></div>
<div id="clear"></div>
</div>

And:

#aboutus {
    float:left;
    width:100%;
    height:100%;
}
#contact{
    float:left;
    width:100%;
    height:100%;
}
#headerbar {
    float:left;
    text-align:right;
    padding-right:5px;
}
.contentarea{
    float:left;
    width:70%;
    height:100px;
}
#clear{
    clear: both;
}
.header{
    width:25%;
    height:100px;    
    background:url(bg.png) no-repeat center center;
    background-size:contain;
    float: left;
}
div {border:1px black solid;
}

I added borders so you can see where your divs are. Floats are aways tricky to deal with, and more complicated when you use it 100% of your screen.

Tip: use ID for unique objects on your code, and CLASS for elements that repeat on the same page (#id is for single elements, .class is for when you want to apply the same style to more than one element on your page).

Play here: http://jsfiddle.net/VPzyy/

Good luck!

Answer 3

If you run your html through a validator (it's a good practice), you'll see that you have an extra </div> tag in there. If I'm understanding what you're trying to do correctly, it's one of the two after your second headerbar div. That extra </div> tag is closing your contact div when you don't want it to close yet.

I personally always leave a comment when I'm closing a div so that I can see exactly what </div> is closing what. Like this:

<div id = "outerdiv">
     <div class = "innerdiv">
          <p>text</p>
          <div class = "innerdiv2">
               <p>more text</p>
          </div><!-- .innerdiv2 -->
     </div><!-- .innerdiv -->
</div><!-- #outerdiv-->

This way, even if I mess up the indentation, it's still easy to see exactly what's going on.