Rafa Rafa - 4 years ago 109
CSS Question

How could the following div align with the following scheme with CSS

I have a container (boxContainer), and within this, I have six other divs, I'm trying to make them look as follows editing the CSS styles, but I just do not find a way to make it look like pretend ...

<div id="boxContainer">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>


Answer Source

only way to do it is following please add following style

#boxContainer #box1, #boxContainer #box5, #boxContainer #box6 {
    border: 1px dashed;
    display: inline-block;
    width: 100%;
#boxContainer #box2 {
    border: 1px dashed;
    float: left;
    height: 100px;
    width: 15%;
#boxContainer #box3, #boxContainer #box4 {
    border: 1px dashed;
    float: right;
    height: 50px;
    width: 85%;

Hope this will help, additional box height can be changed i didn't follow exact width/heights

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download