CODEWITHSUNDEEP
css
ceptno
ceptno

Reputation: 687

Setting up a 2 column layout css with one of the columns having two sections

here is a quick sketch of what I'm trying to accomplish. Nvm, I am not skilled enough to make this work in this box.
I have written some, I will make a jsfiddle with it, here it is I want the 3rd div to sit at the same height as the 1st one. Tried many things, including margin -percentages. Is there something I missed? I got it to sit at the height of the 2nd div pretty easily.

css: 

#col11{
margin: 0;
float: top;
width: 50%;
height: 100;
border: 1px red solid;
}

#col12{
margin: 0;
float: left;
width: 50%;
height: 400;
border: 1px blue solid;
}

#col21{
    margin: 0px;
float: right;
clear: none;
width: 49%;
height: 500;
border: 1px pink solid;
}

Upvotes: 1

Views: 77

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157334

Just change the order of the div and you are good to go

Demo

HTML

<div id="col11"></div>
<div id="col21"></div>
<div id="col12"></div>

And don't use float: top;, top is not a valid value, use left instead

CSS

#col11{
    margin: 0;
    width: 50%;
    height: 200px;
    border: 1px red solid;
    float: left;
}

#col12{
    margin: 0;
    float: left;
    width: 50%;
    height: 300px;
    border: 1px blue solid;
}

#col21{
    margin: 0px;
    float: right;
    clear: none;
    width: 49%;
    height: 500px;
    border: 1px pink solid;
}

Upvotes: 2

Related Questions