CODEWITHSUNDEEP
htmlcsscss-float
Dónal
Dónal

Reputation: 187419

simple 2-column layout

At the bottom of this page, there are two columns. The right-hand column contains a twitter feed and the left-hand column shows a YouTube video and a comments section. The columns are created by the following HTML & CSS

.leftCol {
    margin-right: 365px;
}

.rightCol {
    float: right;
    margin-bottom: 10px;
    width: 355px;
}

<div class="rightCol">
<div>

<div class="leftCol">
<div>

But for reasons I don't understand, the left-hand column doesn't slide up into the vacant space to the left of the the right-hand column.

Upvotes: 0

Views: 106

Answers (2)

Chris
Chris

Reputation: 26918

Just remove clear: both; from your inline styling of <h2 class="banner bgImage video">.

Upvotes: 6

Roddy of the Frozen Peas
Roddy of the Frozen Peas

Reputation: 15219

Change your .leftCol styling to:

.leftCol {
    float: left;
    width: 365px;
}

The margin is creating an illusion of space to the right of the left column.

Upvotes: 0

Related Questions