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?
What have you done so far? Do you have any code to work with?
<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;
}
Are you using a framework? Got a doctype?
Just set the parent to display:table, unfloat the columns and give them display:table-cell instead.
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]This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.