What is the best way to set the minimum height for a floated DIV element

Question

What is the best way to set the minimum height for a floated DIV element

Struggling to apply a min-height to a floated DIV in an XHTML or HTML document. The workaround of nesting a fixed-height DIV and clearing it with :after is ineffective. Directly setting a min-height does not produce the desired result.

The current code, while functional on Firefox in quirks mode, needs improvement for broader compatibility:

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

css xhtml html

Answer 1

Answer №1

I'm not quite sure what you're looking for, but here's a solution for the min-height problem:

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

So, your updated code could look something like this:

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

Check out the live example on jsFiddle

Answer 2

I'm not quite sure what you're looking for, but here's a solution for the min-height problem:

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

So, your updated code could look something like this:

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

Check out the live example on jsFiddle

Answer 3

Answer №2

@Viper; begin by closing your clear div and instead of using clear:both, you can simply include overflow:hidden in your parent div

<div style="float:left; overflow:hidden">
 <div style="float:left; height:200px"><!-- min-height workaround --></div>
 CONTENT WILL BE PLACED HERE
</div>

Ammendment:

add width:100% to your child div.

Answer 4

@Viper; begin by closing your clear div and instead of using clear:both, you can simply include overflow:hidden in your parent div

<div style="float:left; overflow:hidden">
 <div style="float:left; height:200px"><!-- min-height workaround --></div>
 CONTENT WILL BE PLACED HERE
</div>

Ammendment:

add width:100% to your child div.

What is the best way to set the minimum height for a floated DIV element

Answer №1

Answer №2

Similar questions

Is there a way for me to choose multiple checkboxes simultaneously?

Alter the size of an element's width dynamically while maintaining a predetermined width

Utilization of Bootstrap's .container class in various scenarios

What is the best way to transfer files (html, js, css, and resources) while utilizing socket.io?

Using rtl direction in Firefox does not function properly

Invisible Dropdown Feature in Google Places Autocomplete

Issue with CSS Reset code causing disruption for one hyperlink

What steps do I need to follow in order to perform a particle design simulation on my laptop

Creating Interactive Graphs with HTML and JavaScript: A Guide to Dynamic Graph Drawing

ASP TextChanged event is not triggering unless the user presses the Enter key or tabs out

Entry Points for Logging In

Transferring Live Information Between Two Controllers

The single answer input field is not displaying as a readonly text input

Using JQuery to dynamically set dropdown option values from a JSON object

What is the most effective way to programmatically select checkboxes based on array values in

Aligning a title and a subheading in a horizontal manner

Displaying dropdown options based on the previous selection made by the user

JavaScript's forEach function is utilized for handling button events

Guide for configuring Quirks mode for Documents in asp.net

Populate a table cell with a div element in HTML