May 15, 2013

How CSS float works? Why height of the container element doesn't increase if it contains floated elements

Boy Pasmo’s Question:

I would like to ask on how height and float works. I have this outside Div and an inner Div that has content in it. It’s height my vary depends on the content of the Inner Div but It seems that my inner div will overflow with it’s outside Div. What would be the proper way to do it? Any help would be much appreciated. Thanks!

<div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange">
    <div style="width:500px; height:200px; background-color:black; float:right">

The floated elements do not add to the height in the container element, and hence if you don’t clear them, container height won’t increase…

I’ll show you a pictorial way

enter image description here

enter image description here

enter image description here

More Explanation:

  <div style="float: left;"></div>
  <div style="width: 15px;"></div> <!-- This will shift 
                                        beside the top div, why? because the top div 
                                        is floated to left, and hence making the 
                                        rest of the space blank -->

  <div style="clear: both;"></div> 
  <!-- Now in order to prevent the next div to float besides the top ones 
       we use `clear: both;`, this is like a wall, so now none of the div's 
       will be floated after here and also the container will now count the 
       height of these floated divs -->

My other answer here will explain you why we clear, though I’ve explained it here too

You can also add overflow: hidden; on container elements, but I would suggest you to use clear: both; instead.

Also if you might like to self clear an element you can use

.self_clear:after {
  content: "";
  clear: both;
  display: table;

Its because of the float of the div. Add overflow: hidden on the outside element.

<div style="overflow:hidden; margin:0 auto;width: 960px; min-height: 100px; background-color:orange;">
    <div style="width:500px; height:200px; background-color:black; float:right">


November 4, 2012

100% height of content – px

Question by Vladimir

I have a page with height 100%:

<div id="wrapper">
    <header id="header" class="clearfix">

    <div class="main-container clearfix">
        <aside id="sideLeft">

        </aside><!-- #sideLeft -->
        <div id="content">
            <div id="map_canvas"></div>
    </div> <!-- #main-container -->
</div><!-- #wrapper -->


* {
    margin: 0;
    padding: 0;
html, body {
    height: 100%;
    min-height: 100%;
#wrapper {
    width: 100%;
    height: 100%;
#header {
    width: 100%;
height: 45px;
.main-container {
    width: 100%;
    height: 100%;
    min-height: 100%;

#content {
    height: 100%;
margin-left: 20%;

#map_canvas {
    height: 100%;
    width: 100%;
#sideLeft {
    height: 100%;
    width: 20%;
    float: left;

But I want to make content 100% – height of header (in px), to don’t show scrolling on the page.

I try to add position: absolute; to #header and .main-container but it’s not helping (scroll still showing).

Live example:

Answer by Starx

CSS cannot perform calculations and manipulation on page, it is just a stylesheet. You have to use JS for this.

jQuery snippet to do what you want is

$("#header").height($("#header").height()); //This automatically converts % to px

Check it out

May 5, 2012

How to set height of element to match height of another element?

Question by Jordan

I currently have two columns, with another column in-between them. What I want is to have the left and right columns extend in height as the centre column has more content added to it.

Something to note is that I cannot set an exact height for the parent div and then have the left and right columns set to “height: 100%”. This is because there could be only a small amount of content in the centre column, or a lot.

EDIT: I’ve solved this problem by just using tables. Thanks for the replies.

Answer by Chords

Jordan – welcome to Stack Overflow!

It looks like you’re going to have to implement a Javascript approach. The way I would go about it would be to grab the height of .legs then apply it to .flight_no and .price.

The only other option I can think of would be to “fake it” by giving .flight a background image that would include however your left and right columns are stylistically different, then repeat-y in your CSS. If you do that, the sidebars wouldn’t actually have to span the same height.


Something like this, using jQuery, will dynamically set your sidebars to the height of the middle column.

$(document).ready(function() {
  $(".flight_no, .price").css("height", $(".legs").height());

Answer by Starx

Extending div to correct height, or lets say 100% height of the container, You have to chain height:100% up to the container with fixed height or to the body with another height: 100%;. On the long run, you will probably require this solution.

Since there is no fixed height, I used height: 100% and chained up to the body an html.

body, html { height: 100%; }
    float: right;
    border: 1px solid green;
    height: 100%;


TO give exact height of container to the sidebars, you either have to use fixed height or use javascript.

April 24, 2012

JavaScript not resizing height of UL element sometimes when inserting LI elements using Jquery

Question by Fire Emblem

I have an Html/JavaScript application that contains N columns that need to be large enough contain all of the possible LI elements from all of the columns.

The simple solution seems to count the heights of all of the items in each column, compensate for padding, and then set the height to that total for each of the columns.

This works great when the LI elements contain plain text. Unfortunately, when the LI elements contain images instead, various browsers have problems. For example, when I first load the page in FireFox, it looks like the screenshot below, but upon another refresh, it works fine. It doesn’t work as expected in Chrome either.

Screenshot Showing the height of the UL element is not in sync with the LI elements

My application does not pre-populate the LI elements when the page loads – it uses JavaScript, as follows:

function populateUnsetAnswers(unsetCategoryAnswers) {
    for (i in unsetCategoryAnswers) {
        if (unsetCategoryAnswers.hasOwnProperty(i.toString())) {
            $('#categoryQuestionArea #possibleAnswers').append(

function categoryAnswerLiTag(unsetCategoryAnswer) {
    var html = '<li id="' + + '">';

    if (unsetCategoryAnswer.image) {
        html += '<img class="categoryAnswerImage" title="';
        html += unsetCategoryAnswer.text;
        html += '" src="/trainingdividend/rest/streaming/';
        html += unsetCategoryAnswer.image.fileName;
        html += '" style="height: ';
        html += unsetCategoryAnswer.image.height;
        html += ';';
        html += '" />';
    } else {
        html += unsetCategoryAnswer.text

    html += '</li>';

    return html;

When the page is done loading, an ajax request fetches all of the objects to be put into LI elements, and then calls the first function above.

After all of the LI elements are created, I call this function right after it:

function resize() {
    var currentHeight, totalHeight;
    totalHeight = 0;

    $("#categoryQuestionArea ul").children().each(function() {
        currentHeight = $(this).height();

        totalHeight += currentHeight + 13;

    $("#categoryQuestionArea ul").height(totalHeight);
    $("#categoryQuestionArea div#separator").css("padding-top", (totalHeight / 2) + "px");

Is there any way to tell jQuery, “Don’t call resize() until all of the LI’s are fully loaded and the images have rendered” ?

I think what’s happening is that on the initial page load, the height of these LI elements is 0 or a small value because it doesn’t contain the image, so my resize function is calculating the wrong result (I tested this with some alert statements). As long as the LIs are populated and the images have loaded, the total height is calculated just fine.

Any help? Thanks

Answer by Starx

This is rather a CSS problem, most probably due a fixed height, with items either floated or absolutely positioned.

There are number of ways to fix this.

  1. Give a min-height instead of fixing a height.

    #container { min-height: 100px; }
  2. Clear the float and do not set any heights

    #container { overflow: hidden; }
  3. Use Scripts to add up to the height, once every element is added. Like the jQuery snippet below

April 11, 2012

Height:100% in IE7

Question by steventnorris


Margin for html and body needed to be 0 to fill page completely.


I have fixed using the below suggestion of adding the height property to the html and body tags. Now there is a slight scroll down required to view the entire page. Ideas on why this is happening?


I am using CSS to make a div fill the screen as needed. I’ve got width and height set to 100%, but the div doesn’t fill the height of the screen. Is this a known issue with IE7 or am I possibly just missing something? Code below.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" >
    <title>Untitled Page</title>
    <link rel="Stylesheet" href="test.css" />
<div id="divy"></div>



Answer by rlemon

The issues is the container must have height of 100% for it’s child element to assume 100%…

In this case the container is <html> -> <body> so a quick fix would be

html, body {
    margin: 0;
    padding: 0;
html, body, #divy {

Answer by Starx

Whenever you are defining a 100% height, it’s ancestors or all subsequest ancestor, must have 100% as their height as well.

So, give 100% height, to the body, as well as html.

html, body { height: 100%; }
April 6, 2012

jquery animate height bouncing

Question by g0dl3ss

i made a script that dynamically loads content into a div and whenever the content makes the div’s height bigger or smaller it animates the height to the actual height.

The problem is that it doesn’t only slide up/down it always slides a bit up and then down to the desired height.

I’d like to make it slide directly at the desired height without the “bouncing”.

Here’s part of the script:

main_content.css("height", "auto");
var newContentHeight = main_content.height();
main_content.fadeIn("fast", function() {
        "height": newContentHeight
        }, 300);

The script works, the only problem is that the animation doesn’t slide the div up or down to the desired height, it always slides it a bit up and then down to the desired height.

Is it some kind of wanted animation when using animate height or is there something wrong?

edit: console logging newContentHeight(the final height of the div) it looks like it gathers 2 heights, then the animate first goes to one of them and then to the other one that’s why it looks like bouncing. Working on it.

edit2: yes the problem is definitely there, i cleaned up all the code and everything works except that i get 2 attributes from newContentHeight using console.log it looks like the content div that is hidden has 2 heights and those 2 heights are passed to the .animate that’s why it first goes up and then down…
Kinda strange

Answer by g0dl3ss

Couldn’t solve the problem, i modified the script below and now everything works like it should.
It has the exact animation i was looking for(except for a couple of steps easily implementable).

Answer by Starx

I think the problem is not the script, but the system running the script. Replace the time to a bit slower

"height": newContentHeight
}, 3000);
March 24, 2012

how to scroll the content inside of a fixed-height container?

Question by bobighorus

I was wondering how I can realize with jQuery the simple example in the following image.

Basically it’s a fixed-heigt container div and I wish to make the content inside of it (a list of paragraph) scrollable up/down by arrows.

I need arrows commands and no scrollbars and I wish to not use any plugin (if it’s possible), like this old dhtml example.

Consider that I don’t know the exactly height of the entire content, because it’s ajax loaded and so it can be variable.

Any help will be strongly appreciated.

Thanks in advance.

enter image description here

Answer by Starx

You are probably looking for scrollTo Plugin. But, If you want to bring native HTML scroll bars, then defining a overflow property, does the job for you.

div { overflow-y: scroll }


I made a very simple demo of how the scroller can be create with just simple jQuery.

Another demo, with the scroll limits. Perfect to be called a plugin on the making.

Update 2

What you are looking for is click and hold event, which is not available but, we can use mousedown event to build a workaround.

Check a udpated demo

Basically, the idea is to start a interval on mousedown and clear on mouseup

July 28, 2010

Simple CSS Layout

Question by Louis

I need to find a cross browser way of having two divs contained in a parent div where the first child has a fixed height and the second flows down to be contained in the parent.

<div id="parent"><div id="header"></div><div id="body"></div></div>

     height: 500px
|  _________________  |
| |  height: 20px   | |
| |_________________| |
|  _________________  |
| |                 | |
| |                 | |
| |  height: 100%   | |
| |                 | |
| |                 | |
| |_________________| |

So the parent has a fixed height of 500px, the header div has a fixed height of 20px but the body div’s height must flow down to fit inside the parent. Giving it a height of 100% overflows it’s height by 20px because height:100% uses the parents height not taking into account the children. I saw a solution using position absolute but this does not work on IE7 or 6. Is there a cross browser solution for this as it is a relatively simple layout?

Edit: Forgot to mention that the parent will be resizable so will not always be 500px. Using jquery resizable, the parent dimensions could be anything and will change often.

Edit 2: I wish I could credit multiple people for this solution as I took advice from everyone. Basically I gave #body a height of 480px and used the alsoResize option in resizable to resize the parent and the body.

Answer by loxxy

.parent  { height : auto; }
.child1  { height : 20px;  }
.child2  { height : 480px;  }

Instead of setting the size of the parent dynamically, control child2’s height.

Hope that is what your asking for.

Edit: Edited as per your update!

Answer by Starx

If you already know the height of outer container, and the one of height of the divisions inside, you can know the height of the remaining div I think.

try something like this height: 480px;. Keep it simple and easy


Please fill the form - I will response as fast as I can!