EDIT: This happens only in IE8, it works fine in IE7, Firefox, Opera etc
First of all, here is a picture I have made in photoshop to demonstrate my problem: http://richardknop.com/pict.jpg
Now you should have idea about my issue. Here is a simplified version of markup I'm using (I left out most irrelevant content):
<div class="left">
<div class="box">
// box content
</div>
<div class="box">
// box content
</div>
<div class="box">
// box content
</div>
</div>
<div class="right">
<div class="box">
// box content
</div>
<div class="box">
// box content
</div>
<div class="box">
// box content
</div>
</div>
<div class="clear"></div>
<div class="box">
//
// NOW THIS BOX HAS NO TOP MARGIN
//
</div>
<div class="box">
// box content
</div>
And CSS styles go like this:
.clear {
clear: both;
}
.left {
float: left;
}
.right {
float: right;
}
.box {
overflow: auto;
margin-top: 10px;
}
Obviously I have left out all irreevant styles like borders, background colors and images, font sizes etc. I have kept only important stuff.
Any idea where could be the problem?
See if padding-top: 10px works. It might be that the margin is trying to go from the top of the page.
I think this is an IE8 bug. Relates to a sibling element of a floated left and right div. With or without a clearing div, the final unfloated element loses its top margin in IE8.
We've tested this, and only IE8 gets it wrong:
http://www.inventpartners.com/content/ie8_margin_top_bug
We also came up with 3 solutions.
Try closing your clear div.
<div class="clear"></div>
I don't quite get this approach. You could wrap the <div>s with class right and left in another <div> and apply overflow: hidden, width: 100% to it so that the elements below floated elements will get displayed correctly.
enter code hereTry using a container with a width with overflow:hidden around the floated divs, and remove the cleared div.
<div id="container">
<div class="left">
<div class="box"> // box content </div>
<div class="box"> // box content </div>
<div class="box"> // box content </div>
</div>
<div class="right">
<div class="box"> // box content right </div>
<div class="box"> // box content </div>
<div class="box"> // box content </div>
</div>
</div>
<div class="box"> // // NOW THIS BOX HAS NO TOP MARGIN //</div>
<div class="box"> // box content</div>
And the CSS
#container { width: 100%; overflow: hidden; }
(sorry, I left IE7 on my work machine for testing so I can't verify)
I have similar problems, and the solutions provided by Matt Bradley did not work for me (but thanks for posting it anyway!). I wanted to have margin-top:10px on a h1 element.
The solution I came up with was by adding position:relative , top:10px and margin-top:0px to the h1 element.
I don't have IE8 with me... but did you try adding clear: both to the bottom div and adding a bottom margin to one of the top floats? I'm pretty sure that would achieve the same effect without any extra divs.
Related
This question already has answers here:
What is the use of style="clear:both"?
(3 answers)
Closed 8 years ago.
I was noticing that <div style="clear:both;"></div> had been frequently used in a website between div areas. Given the fact that no other rules such as width and height has been specified for this, what is the effect of this type of usage? an example of the site code follows below
<div id="content">
<div id="middle-cont"></div>
<div id="bot-r">
<div style="clear:both;"></div>
<div class="hwd-module latest-audio"></div>
<div style="clear:both;"></div>
</div>
</div>
<style>
#middle-cont {
padding: 18px 0px;
margin-top: 20px;
margin-right: -40px;
margin-left: -40px;
}
#bot-r, #bot-c, #bot-l {
width: 32%;
height: auto;
float: right;
padding: 5px;
}
</style>
Clear:both
is used to clear any (or for that matter, all preceding) floats.
It basically means "No floating elements allowed on either the left or the right side".
Let us try to understand this with a demonstration :
You can see a couple of examples below:
No clear -> http://jsfiddle.net/0xthns3k/
The html and css are as follows :
HTML :
<div class="left">
</div>
<div class="right">
</div>
<!-- No clear -->
<div class="Green"></div>
CSS :
div {
display:inline-block;
width: 150px;
height:150px;
}
.left {
background-color:Orange;
float:left;
}
.right {
background-color:Red;
float:right;
}
.Green {
background-color:Green;
}
.yellow {
background-color:yellow;
width:30px;
}
This is the image of the generated HTML.
If you see here, the green colored box is placed somewhat in the center of the two floated elements. Well, actually since there are floated elements the new "non-floated" element is actually placed adjacent to the leftmost floated element. Hence, you see the green colored element just adjacent to the leftmost floated element.
Now, if you were to have another element(s) floated left, this would automatically fit between the Orange and the Green elements.
See this below :
http://jsfiddle.net/0xthns3k/1/
Also, the position of this 'new' left floated element wouldn't be that important too with respect to the said HTML.
Placed below green element
<div class="left">
</div>
<div class="right">
</div>
<!-- No clear -->
<div class="Green"></div>
<div class="left yellow">
</div>
Placed after right floated element.
<div class="left">
</div>
<div class="right">
</div>
<div class="left yellow">
</div>
<!-- No clear -->
<div class="Green"></div>
Placed after left floated element
<div class="left">
</div>
<div class="left yellow">
</div>
<div class="right">
</div>
<!-- No clear -->
<div class="Green"></div>
All the above HTML code would generated the same HTML as shown in the image above.
With clear -> http://jsfiddle.net/bk3p160d/
The HTML is only slightly modified here :
HTML
<div class="left">
</div>
<div class="right">
</div>
<div class="clearAll"></div>
<div class="Green"></div>
and one additional CSS class :
CSS
.clearAll {
clear:both;
}
If you see here, the green colored element is positioned below the line containing the aforementioned floats. This is because "clear: both" tells the HTML rendering engine
"No floating elements allowed on either the left or the right side". Hence, it cannot place this element on the same line as it would violate the defination. This causes the engine to place it on a new line. On the line the preceding float properties are essentially nullified. Hence, clear:both is used to effectively clear any preceding floats.
See here for further information : http://www.w3schools.com/cssref/pr_class_clear.asp
Hope this helps!!!
I have the following split among 3 main div to be side by side. The very left div I want it to take up 60% of the screen and the rest 2 (description and resource) to take each 20%. When I run this all 3 are overlapping on the left portion. Below is my codes.
<div id="left" style="position:absolute;top:0px;left:0px;width:60%;height:100%;background:#e6e6e6;">
<div id="map" style="position:absolute;top:0px;left:0px;width:60%;height:400px">Map goes here.</div>
<div id="details" style="position:absolute;top:400px;left:0px;width:60%;height:400px">Details</div>
</div>
<div id="description" style="position:absolute;top:0px;width:20%;height:100%;background:#ffffff;">
</div>
<div id="resource" style="position:absolute;top:0px;width:20%;height:100%;background:#ffffff;">
</div>
They are overlapping because you've given them all absolute position and left 0. Absolute position removes the element from the normal flow of the page and puts it exactly where you indicate using the top/left/right/bottom properties. They will overlap as long as they have the same parent and same position properties.
Absolute position and left being 0 is making them overlap.
Please use css
see solution : http://jsfiddle.net/thecbuilder/vZ77e/
html
<div id="left">
<div id="map">Map goes here.</div>
<div id="details">Details</div>
</div>
<div id="description">description</div>
<div id="resource">resource</div>
css
#left, #description, #resource{
display:inline;
float:left;
height:100%;
}
#left{
width:60%;
background:#e6e6e6;
}
#description, #resource{
width:20%;
}
They are overlapping because you are using position absolute. instead place the divs at the top of the html page and do this instead:
<div id="left" style="float:left;width:60%;height:100%;background:#e6e6e6;">
<div id="map" style="float:left;width:60%;height:400px">Map goes here.</div>
<div id="details" style="float:left;left:0px;width:60%;height:400px">Details</div>
</div>
<div id="description" style="float:left;width:20%;height:100%;background:#ffffff;">
</div>
<div id="resource" style="float:left;width:20%;height:100%;background:#ffffff;">
</div>
This will place the divs beside each other
I have a problem in my website
I have a big <div> with brown background and it has no height and have 3 <div> elements inside it, and that big <div> should not have absolute position.
I tried to fix that using float, but when I use float left/right that brown background is no longer visible!
Below is a simple code for understanding my problem :
<div id="bigDiv" style="background-color:brown">
<div id="right"></div>
<div id="midle"></div>
<div id="left"></div>
</div>
You do not need to float the elements, all you need to do is use display:inline-block;
As the float object basically means your box model loses it's height value as it no longer is relative to its parent. If you want to go the float method make sure you put a <br class="clr-b"> where .clr-b { clear:both; }
This might be causes of floating. You could resolve your problem by just applying overflow:hidden; styles to your big div.
Else, you could use clearfix method (clear: both;).
<div id="bigDiv" style="background-color:brown; overflow:hidden;">
<div id="right"></div>
<div id="midle"></div>
<div id="left"></div>
</div>
You can use floats:
http://jsfiddle.net/bKVuc/
#bigDiv {
width: 100%;
overflow: hidden;
}
#right, #midle, #left {
float: left;
width: 33.333%;
height: 100px;
}
Try this:
<div id="bigDiv" style="background-color:brown">
<div id="right"></div>
<div id="midle"></div>
<div id="left"></div>
<div style="clear:both;"></div>
</div>
You can top float by using style:
<div style="clear:both;"></div>
In case the big div is floated with height:auto, the element should be floated in order to stuff the big div. Or the big div acts as if there is nothing in it(height=0), so the background disappears.
I'm new at this so bear with me. I have an absolute positioned box inside a relative container and inside that box I've two other divs, one for posts and one for sprites. The sprites completely disappear in IE7 along with the top (and only the top) border on the "posts." This is basically what it looks like.
<div id="wrapper">
<div id="content">
<div id="left"></div>
<div id="right">
<div id="icon">
</div><!--icon-->
<div id="posts">
<div class="posts_border"></div>
<!--a bunch of other stuff-->
<div class="posts_border"></div>
</div>
</div><!--right-->
</div><!--content-->
</div>
#wrapper{width:900px;margin-top:111px;margin-left:-450px;position:relative;left:50%;}
#content{background-color:#F6EFC9; position:relative; width:900px;height:965px;}
#left{padding-right:10px;width:550px;}
#right{position:absolute;top:0;right:20px;width:300px;}
#icon{margin:10px 0 0 -8px;top:0;right:20px;}
#icon .icon{margin-left:40px;width:50px;height:50px;float:left;}
#email{background:url("../images/icon-sprite.png")left 0 top -110px;}
#twitter{background:url("../images/icon-sprite.png") left 0 top -55px;}
#rss{background:url("../images/icon-sprite.png") left 0 top 3px;}
#posts{background:#E3C66E; margin-top:10px;position:absolute;top:66px;}
#right .posts_border{height:20px;background-color:#442503;}
http://jsfiddle.net/isherwood/aJwKJ/
This seems to work in every browser aside from IE7.
I had to do this in IE10 by changing my Browser/Document mode to IE7/IE7 on a local document. I had problems with jsfiddle loading in that browser/doc mode. I only changed the following sections
#email {
background-image: url("http://placehold.it/32x32");
background-position: 0 -110px;
}
#twitter {
background:url("http://placehold.it/32x32");
background-position:0,-55px;
}
#rss {
background:url("http://placehold.it/32x32");
background-position:0,3px;
}
When I use the following code, the last div overlaps the floated content:
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
<div style="background:red;">test</div>
The common fix is to do this:
<div style="overflow:hidden;">
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
</div>
<div style="background:red;">test</div>
However, in my case, I cannot add in an extra element. Is there another workaround for this?
Edit:
clear:both; fixed the overlapping issue, but there's a margin on the last div, so it's something like this:
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
<div style="background:red;clear:both;margin-top:50px;">test</div>
And now the new problem is that the margin isn't showing up.
You could simply clear the floats...
<div style="background:red;clear: both;">test</div>
Try the following:
<div style="width:50%;float:left;">test</div>
<div style="width:50%;float:left;">test</div>
<div style="background:red;clear:left;">test</div>
EDIT. To get the margin-top, add margin bottom to the floated elements
<div style="width:50%;float:left;margin-bottom:50px;">test</div>
<div style="width:50%;float:left;margin-bottom:50px;">test</div>
<div style="background:red;clear:both;">test</div>
Set the clear property on your last <div> to left or both:
<div style="background: red; clear: left;">test</div>
Edit: As for the margin, you can do some relative positioning:
<div style="background: red; clear: left; margin-bottom: 50px; position: relative; top: 50px;">test</div>
There's no need to use floats here. Make the first two elements inline-block elements, and the third element a block-level element.
HTML:
<div class="inline-block">
Test
</div><div class="inline-block">
Test
</div>
<div class="block">Test</div>
Note that </div><div class="inline-block"> are touching. Because these two element are inline-block elements, any space in the markup will produce space in the presentation.
CSS:
.inline-block {
width: 50%;
display: inline-block; }
.block { margin: 50px 0 0; }
Preview: http://jsfiddle.net/Wexcode/eGPWt/