CODEWITHSUNDEEP
htmlcss-float
bassneck
bassneck

Reputation: 4043

Two column of several divs

I'm making a 2-column layout with divs. It should be something like this: http://dl.dropbox.com/u/4976861/html-demo.html

But there is a problem. If content stretches the side blocks vertically, the left blocks shift downwards: http://dl.dropbox.com/u/4976861/html-demo-2.html

If I put the sidebar into a wrapper div, it works fine, but it will make the code quiet messy because of the paddings and some background issues which I removed to simplify the demo, so I would like to leave this option for now.

Upvotes: 0

Views: 137

Answers (2)

Tr1stan
Tr1stan

Reputation: 2775

I don't think that you're going to be able to produce the results that you would like without changing the underlying HTML. You're trying to allow elements to flow (both vertically and horizontally) within the page, but the order in which you have the elements is not going to allow this.

I might be teaching you to suck eggs, but my preference for the HTML output would be something like this:

<div class="wrap">
        <div class="column1">
            <div>left 1</div>
            <div>left 2</div>
            <div>left 3</div>
        </div>
        <div class="column2">
            <div>right 1</div>
            <div>right 2</div>
        </div>
 </div>

Upvotes: 1

user443346
user443346

Reputation:

Put this under the 2 divs:

<div style="clear:both;"></div>

Upvotes: 0

Related Questions