What is the best way to put four containers in a row side-by-side?

HTML & CSS
1

What is the best way to put four containers in a row side-by-side on a web page?
Can you give me a code example, please?

2

What have you done so far? Do you have any code to work with?

3 
 <div class="col-A1">

 <div class="row">
 <div class="col-a2">
 ....
 </div>

 <div class="col-a3">
 ....
</div>

<div class="col-a4">
....
</div>
</div>

<div class="col-a5">
....
</div>
</div>



.col-A1{
width: 550px;
height:125px;
font-size:1em;
margin: 100px 0px 0px 100px;
padding: 0px;
border: 1px solid #000000;
}

.col-a2{
float: right;
width: 130px;
height:auto;
font-size:1em;
margin: 0px;
padding: 0px;
}

.col-a3{
float: right;
width: 130px;
height:auto;
font-size:1em;
margin: 0px;
padding: 0px;
}

.col-a4{
float: right;
width: 130px;
height:auto;
font-size:1em;
margin: 0px;
padding: 0px;
}

.col-a5{
float: right;
width: 130px;
height:auto;
font-size:1em;
margin: 0px;
padding: 0px;
}
4

Are you using a framework? Got a doctype?

5

Just set the parent to display:table, unfloat the columns and give them display:table-cell instead.

6

Hi there ChrisjChrisj,

here is one possible solution…

[code]

untitled document html,body { padding:0; margin:0; } .box { float:left; width:21%; padding:1%; margin:1%; outline:1px solid #999; }
[/code]
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.