CODEWITHSUNDEEP
csshtmlcss-float
Anicho
Anicho

Reputation: 2667

2 x 2 div grid using float with min-height

I have 4 divs set to float:left; each with a width: 400px; within a div with width:800px;. This currently creates a 2 x 2 grid of nicely aligned divs I set a property of min-height: 150px; because I need to allow divs to expand as new content is added or removed.

If new content is added a div is expanded this messes up the nicely aligned 2 x 2 grid div I currently have because the heights are uneven is there anyway around this?

<div class="boxContainer">
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
</div>

.boxContainer{
    width: 800px;
    height: auto;
}

.box{
    float: left;
    min-height: 150px;
    width: 400px;
}

Upvotes: 1

Views: 2575

Answers (2)

Val
Val

Reputation: 17542

just use display as block, because you are floating left, that way you would have to assign , the width so they don't move out of position, once the text is added, the height will,grow automatically, min-height, does not work on older browsers and will be treated as height, which is terrible :) http://www.webtoolkit.info/css-clearfix.html you have a beautiful css solution to your float left problem, it's used on containers to keep the div natural –

yes, check if you have

or or other elements, that have predefined padding, and margin, :) they can be a bit of pain in the ass :)

I recommend using clearfix, because it works well with, inspect element on web developer tools such as firebug, and google web dev tools :)

so you have full control here is the code :) 

<div class="boxContainer clearfix">
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
</div>

.boxContainer{
    width: 800px;
    height: auto;
}

.box{
    float: left;
    min-height: 150px;
    width: 400px;
    display: block;
}
/* I would put this at the top of the page, and minimise the newlines :) if you want to remove the "." (dot) then use this  content: "\00A0"; which puts a whitespace,  */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

Upvotes: 2

alex
alex

Reputation: 1297

that actually does not work for me: http://jsfiddle.net/MMDqX/ ;D

if browser compatibility (at least ie6 or older if i remember correctly) is not a concern, maybe using a tabled layout would work, i.e. divs with display:table

e.g. http://jsfiddle.net/MMDqX/1/

Upvotes: 0

Related Questions