float clear not working

Question

Im trying to clear floats on my left-container and right-container using a div but its not clearing the floats..

Both the left and right container are populated using Jquery once the document is loaded..

How can I fix this issue?

CSS

#container{
   height:75%;
   background-color:white
}
#left-container{
   height:100px;
   width:23%;
   float:left;
   border-right:1px #254117;
}
#right-container{
   height:100px;
   width:76%;
   float:left;

}

HTML

<div id="container">
   <div id="left-container">
    {% include "leftcontainer.html" %}
   </div>
   <div id="right-container">
        {% block right-container %}
        {% endblock %}
   </div>
   <div id="float-container" style="clear: both;overflow:hidden"></div>
</div>

enter image description here

three things 1) there is typo in your inline-style semicolon is missing 2) i guess u neeed to place that div with clear:both; btw the left and right to get effect 3) You need to read this http://stackoverflow.com/questions/12871710/why-clear-both-css — M.chaudhry, Jul 06 '14 at 23:28
@M.chaudhry, you don't have to use semicolon on the last line in a CSS block. Anyway, the code looks okay to me. Check out: http://jsfiddle.net/Tb3Js/1/ — Narxx, Jul 06 '14 at 23:32
i'm betting you are seeing overflow from right or left and it looks like float isn't clearing. Try adding `overflow:hidden` to both right and left. They have fixed heights — charlietfl, Jul 06 '14 at 23:35
I added it and its not yet clearing....The clearing divs is adding to the left container but not below thr right container... — user1050619, Jul 06 '14 at 23:50
@user1050619 please create demo in jsfiddle that replicates it — charlietfl, Jul 06 '14 at 23:54
I have added the picture(with css details)..Im unable to create the jsfiddle because the data is coming from the database and loaded via ajax — user1050619, Jul 06 '14 at 23:56
I want the container to be header - 25% , container - 75% and footer - 25%..I removed it but still same problem — user1050619, Jul 07 '14 at 00:02

Marc Audet · Accepted Answer · 2014-07-07T00:23:56.257

0

In this example, you have set the height of the floated elements to height: 100px, which means that most of your content on the right container is actually triggering an overflow condition.

Two things can happen.

In the first case, since your #container has a height of 75%, which may be tall enough to contain your overflowing content, your floated content will not need any clearing since the following inflow content will start right after the bottom edge of #container.

In the second case, #container is too short to contain the overflowing content, so the inflow content still starts at the bottom edge of the parent container but the overflowing content from the right floated child overlaps.

See demo: http://jsfiddle.net/audetwebdesign/uddt9/

This situation can be improved but the fix depends on how you want the layout to work. (The 100px height is confusing the issue a bit, so some clarification is needed.)

edited Jul 07 '14 at 00:23

answered Jul 07 '14 at 00:17

Marc Audet

46,011
11
63
83

I think I have the second condition..Where the height 75% evaluates to less than 100px..I removed the 100px from the left and right container but still have the same issue – user1050619 Jul 07 '14 at 00:22
I increased the container from 100% to 150% and removed the 100px in the left and right container and now I fit into the Case 1...It fixed my issue..Thanks for the information....But I have one question...How can I give 150%..I always thought the page is 100% and split the header, container and footer within it (In my example - 25%, 75% and 25%)..Im a novice, apologize if its a basic question – user1050619 Jul 07 '14 at 00:27
More importantly..I have added the below code in all my pages - html,body{ height:100%; width:100%; margin:2; } – user1050619 Jul 07 '14 at 00:29
If you specify a height of 150%, it simply creates a height value 1.5 times that of the parent. – Marc Audet Jul 07 '14 at 00:29

float clear not working

1 Answers1