CODEWITHSUNDEEP
css
user3335482
user3335482

Reputation: 3

CSS layout not as expected

I am trying to create a layout as follows

Image

Here's the CSS I used 

#leftcol { width:15%; position:fixed; float:left;background-color:aliceblue;}
#main { width:50%; height:400px; float:right;background-color:black;}
#comments { display:block; width:50%; float:right; height: 500px; }

This is how my Div's are laid out

<div id="leftcol"></div>
<div id="main"></div>
<div id="comments"></div>

Looks like I am missing something. Any help? The height of each div should be flexible to accomodate it's content

Upvotes: 0

Views: 50

Answers (3)

Sarath
Sarath

Reputation: 608

try the following styles 

<style>
    #leftcol { width:15%; height:100%; float:left;background:blue;}
    #main { width:50%; height:400px; float:left;background:black;}
    #comments { display:block; width:50%; float:left; height: 500px; background:red;}
 </style>

<div id="leftcol">&nbsp;</div>
<div id="main">&nbsp;</div>
<div id="comments">&nbsp;</div>

Upvotes: 0

Sergio Wizenfeld
Sergio Wizenfeld

Reputation: 492

Here you go: Remove the height from all the divs if you want it to be flexible as you add content, you could also add a min-height:200px; so no matter how much content you have its going to be at least 200px high.

http://jsfiddle.net/5tQt2/

Upvotes: 0

Paul Way
Paul Way

Reputation: 1951

I think you want to add a clear to your comments

clear: right;

http://jsfiddle.net/x9rZj/1/

Upvotes: 2

Related Questions