Rafa Rafa - 4 months ago 8
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>
</div>


Schema

Answer

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

Comments