CODEWITHSUNDEEP
htmlcsscss-float
Jon
Jon

Reputation: 3184

Floating div blocks. One div 100% height next to two stacked divs of 50% height

I'm trying to create a grid of modules like this:

enter image description here

I have a style for a single module, and I have classes for all the different sized boxes which I add to the div classes for each box depending on the size I want: (100%/50%/33%/25% width & height).

I'm trying to stack the boxes that you see in the upper left of the image above. I figure that I'll have to create another class or two to override the floats of the surrounding boxes, but I'm not sure what to do. Here's my code:

HERE'S A SIMPLE FIDDLE

HERE'S IT IS WITH THE CURRENT CODE

HTML:

<div class="box width_25 container_150">
    <div class="header">Half Size Title</div>
    <div class="content">
        Top box
    </div>
</div>
<div class="box width_25 container_150">
    <div class="header">Half Size Title 2</div>
    <div class="content">
        Box right below
    </div>
</div>

<div class="box width_50 container_300">
    <div class="header">Total Mentions</div>
    <div class="content">
        Center div
    </div>
</div>

<div class="box width_25 container_300">
    <div class="header">Title</div>
    <div class="content">
        Right div
    </div>
</div>

CSS:

/* Variable Widths */

.box {
    display:block;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    box-sizing: border-box; 
    margin: 1%;

    background: #FFF;
    color: #333;
    border:1px solid #DDD;
    box-shadow:0px 0px 5px 1px #DDD;
}

.width_100 {
    display: inline-block;
    float: left;
    width: 98%;
}

.width_50 {
    display: inline-block;
    float: left;
    width: 48%;
}

.width_33 {
    display: inline-block;
    float: left;
    width: 31.33%;
}

.width_25 {
    display: inline-block;
    float: left;
    width: 23%;
}

.container_150 {
    height:130px; // not 150px to compensate for margins
}
.container_200 {
    height:200px;
}
.container_250 {
    height:250px;
}
.container_300 {
    height:300px;
}
.container_400 {
    height:400px;
}

Upvotes: 1

Views: 2012

Answers (1)

Bassam Mehanni
Bassam Mehanni

Reputation: 14944

You need to wrap the stacked divs in a div to achieve that 

<div style="width:30%;float:left">
    <div style="width:100%; background:blue; height:100px"></div>
    <div style="width:100%;  background:yellow; height:100px"></div>
</div>
<div style="width:70%; float:right;background:red; height:200px"></div>

Check out this fiddle

Upvotes: 4

Related Questions