BLOG

Making Side-by-Side CSS Columns with one Higher than the Other

You're probably asking yourself - CSS Columns that don't line up!?! What are you talking about?

Creating 2 or more columns using CSS is a common enough achievement that most web designer should handle without little difficulty.

div.content-left {
float: left;
left: 0px;
width: 440px;
}
div.content-right {
float: left;
left: 520px;
width: 330px;
}

Above is an example of left and right columns with one 440 pixels wide and the other, slightly smaller at 330 pixels wide. Both columns line up horizontally and there is a large gap in between them creating a newspaper style spread.

Consider this, what if you want the right column to be higher than the left? To achieve this trick add a negative margin to the right column like so...

margin-top: -55px;

This will start the right column 55 pixels above the left. Try it out!

by: Creative

«Back»