Question

I am aiming for a setup similar to this:

Unfortunately I end up with this:

Here are my specs:

I’m trying to get divs with an image to be set up without borders, and divs with text to have a 1 px border.

Here are the divs I set up:

<section id="row2">

    <div id="textBox1" class="column left">
        <p> TEXT BOX 1 </p> 
    </div> <!--#textBox1 .column.left-->

    <div class="column right">
                <img src="assets/top-right-image.png"/>
            </div>

</section> <!--#row2-->

<section id="row3">

    <div class="column left"><img src="assets/bottom-left-image.png"/></div>

    <div id="textBox2" class="column right">
        <p> TEXT BOX 2 </p>
    </div>

</section> <!--#row3-->

As you can see, I set up the text divs with an id “textBox1” and “textBox2”. Unfortunately, this blows them up and makes the div.column.left in #row3 to align to the right.

here is the CSS:

.column {
     float: left;
     position: relative;
     margin: 20px 11px;
}

.left {
     width: 408px;
}

.right {
     width: 449px;
}

#bannerPic {
     padding: 0px 15px;
}

#row2 div {
     height: 352px;
}

#row3 div {
     height: 598px;
}

#textBox1 {
    border: 1px solid #BCBCBC;
    margin-bottom: 20px;
}

#textBox2 {
    border: 1px solid #BCBCBC;
}

Where am I going wrong?

Answer 1

Chances are the top two items are not the exact same height, so the 3rd item, the taller photo, is “hanging” on the first. This happens because of the way float behavior works. Make sure the parts of each row (the divs) are rendered to the exact same height, including all borders, margin, padding, etc.

The other option is to “clear” the section tags. Since part of your content is text, this may be a lot easier. It’s probably easier anyway. 🙂

section { clear: both }