CODEWITHSUNDEEP
cssxhtmlhtml
Cobra_Fast
Cobra_Fast

Reputation: 16061

How to min-height a floated DIV?

I am trying to set a min-height to a floated DIV in a XHTML or HTML document. The fix of putting a fixed-height DIV into the DIV and clearing it with :after doesn't work at all. Directly assigning a min-height won't work either.

My code as it's now is like (which only works on Firefox in quirks mode but I want it to be something real):

<div style="float:left">
 <div style="float:left; height:200px"><!-- min-height hackfix --></div>
 CONTENT GOES HERE
 <div style="clear:both;"></div>
</div>

Upvotes: 1

Views: 2926

Answers (2)

Khoa Nguyen
Khoa Nguyen

Reputation: 1317

I didn't really get what you want, but here is the fix for min-height issue:

selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}

So, your code can be like this

<div style="float:left;min-height:200px;height:auto !important;height:200px;">
     CONTENT GOES HERE
</div>

http://jsfiddle.net/ynhat/pcpsS/1/

Upvotes: 2

sandeep
sandeep

Reputation: 92803

@Cobra; first close your clear div & instead of clear:both you can just write overflow:hidden in your parent div 

<div style="float:left; overflow:hidden">
 <div style="float:left; height:200px"><!-- min-height hackfix --></div>
 CONTENT GOES HERE
</div>

Edit:

give width:100% to your child div.

Upvotes: 0

Related Questions