How to float divs without using tables [closed] - css

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Hi how do i have divs layout like this using CSS float and other methods. i am trying to avoid using tables and learn how to float divs properly.
Thanks

Answer 1

first id use a main div with display:block;
then inside that main div for your example create 4 sub divs with display:inline-block;

Answer 2

Maybe take a look at solutions like Singularity or Susy. Both capable grid frameworks giving you a helping hand accomplishing exactly what you intend to do and keep the necessity of math out of your head. ;)

Answer 3

Sigh those were a lot of boxes ;D. I couldn't exactly see the dimensions of each box but I did my best to replicate what you showed (no absolute or relative positioning used!).
Here's the jsFiddle: link The formatting is odd, jsFiddle's tidyUp is not working for me
Here's the codepen: link Use this one instead
The trick is to use float: left when you want things to stack horizontally. When you want them to stack vertically, just wrap those elements in a container and make sure each has display: block. You use these two things to accomplish this sort of thing.
HTML:
<div id="container">
<div id="left0">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="left1"></div>
<div id="left2"></div>
<div id="row1">
<div></div>
<div></div>
</div>
<div id="row2"></div>
<div id="row3">
<div></div>
<div></div>
</div>
</div>
CSS:
*{ /*includes the border in height&width*/
box-sizing: border-box;
}
div{ /*gives us some general spacing*/
margin: 5px;
background: lightblue;
}
#container{
width: 1200px;
margin: 1em auto;
background: lightgray;
}
/*gives a float-left property to first-level children*/
#container > div{
float: left;
}
#container > div > div{
border: 1px solid red;
}
#left0{
width: 50px;
}
#left0 > div{ /*styles for little boxes*/
height: 40px;
margin: 5px;
}
#left1{
width: 230px;
height: 230px;
}
#left2{
width: 150px;
height: 230px;
}
#row1{
width: 600px;
height: 50px;
}
#row1 div:nth-child(1){
float: left;
width: 350px;
height: 40px;
}
#row1 div:nth-child(2){
float: left;
width: 230px;
height: 40px;
}
#row2{
width: 600px;
height: 70px;
}
#row3{
width: 600px;
height:90px;
}
#row3 div:nth-child(1){
width: 200px;
height: 40px;
float: left;
}
#row3 div:nth-child(2){
width: 100px;
height: 80px;
float: right;
}
I'll comment explaining some of the css3 selectors I used in case you're not familiar with them.