user3429355 user3429355 - 9 months ago 39
CSS Question

Div elements won't align next to each other

Here is what I want to get:


and here is what I have:


Here is CSS code that I am using:

#pagewrap {
padding: 5px;
width: 100%;
margin: 20px auto;
}
#board{
//middle box
background:#CCC;
border:#999 1px solid;
width: 560px;
float: left;
padding: 5px 15px;
margin: 0px 5px;
padding-left: 20%;
padding-right: 20%;
}

#menu {
//Left box
width: 15%;
background-color: grey;
float: left;
padding: 5px 15px;

}
#leaderboard {
//right box
width: 15%;
float: right;
background-color: grey;
padding: 5px 15px;
}


EDIT1: Added jsfiddle

jsfiddle.net/Xn3u6/

Answer Source

There are many ways to achieve the desire result and using display:table and display:table-cell is one of the easiest way.

CHECK The DEMO First.

#pagewrap {
padding: 5px;
width: 100%;
margin: 20px auto;
display:table;
}
#board{
padding: 5px;
background-color:#cccccc;
display:table-cell;
}
#menu {
padding: 5px;
background-color: red;
display:table-cell;
}
#leaderboard {
padding: 5px;
display:table-cell;
background-color: green;
}

Using flex also can achieve the same effect but its not widely supported by IE8 and IE9.

Check the DEMO using Flex Method.

#pagewrap
{display:flex;
display: -webkit-flex;
display: -moz-flex;
width:100%;
}
#board{
padding: 5px;
background-color:#cccccc;
width:25%;
}
#menu {
padding: 5px;
background-color: red;
width:50%;
}
#leaderboard {
padding: 5px;
background-color: green;
width:25%;
}