CODEWITHSUNDEEP
htmlcss
user1050619
user1050619

Reputation: 20916

Grouping elements in css and displaying one below other

I need the id3 displayed below id2 instead of being displayed on the side?

How can I accomplish it in using CSS?

html

<div class="main" ></div>
<div id="id1">Im in div1</div>
<div id="id2">Im in div2</div>
<div id="id3">Im in div3</div>
<div></div>

css

#id1{
    background-color:green;
    width:30%;  
    height:200px;
    border:100px;   
    float:left;
}

#id2{
    background-color:red;
    width:20%;  
    height:100px;
    border:100px;   
    float:left;
}

#id3{
    background-color:yellow;
    width:10%;  
    height:300px;
    border:100px;   
    float:left;
}

http://jsfiddle.net/w9xPP/

Upvotes: 1

Views: 900

Answers (3)

Matthew R.
Matthew R.

Reputation: 4350

It sounds like you might be trying to do columns. @Diodeus is right about the ULs and LIs. You will probably want to refactor that code. However, if you are trying to have two columns of elements you could wrap your elements in a div and float them instead of the items they contain. Your child elements would then be placed within the floated columns. You might also want to check out a grid system like the 960 Grid or Twitter Bootstrap.

Upvotes: 0

Ty Underwood
Ty Underwood

Reputation: 897

the best way to do it is to not use floats. The only reason to use them is to make things horizontal to other things. If you want things to fit together like a puzzle, look at masonry.js

Upvotes: 1

Nick
Nick

Reputation: 15539

Set clear: left; on #id3 like

#id3{
clear: left;
background-color:red;
width:20%;  
height:100px;
border:100px;   
float:left;
}

When you use float it tells subsequent elements to attempt to display next to them rather than below. Using clear clears the floats and gets rid of that behavior.

http://jsfiddle.net/w9xPP/1/

Upvotes: 0

Related Questions