I know about the double margin bug, but this is different.. the scenario is having an element with a bottom margin, then directly below it an element that contains floating elements (which are cleared at the end), the container element could have say a bottom border that should sit just under the floating elements it contains.. however ie IE7 and 6, the bottom border is spaced away from its contents, by the exact same amount of the bottom margin of the element above it..
It's not really inheritance, more that a margin is applied twice and in a wrong position.. here's some repo code:
<h1 style="margin: 0 0 50px 0;">Menu</h1>
<div style="border-bottom: solid 1px #000;">
<div style="float: left;">Hello world?</div>
<div style="clear: left;"></div>
</div>
Stick that in a complaint page (I used xhtml transitional), you'll notice the border doesn't appear under the text, but 50px away from it... the same distance that 'Menu' is spaced away from the text..
Test this against say.. IE8, and the border is correctly sat just under the text.
This is something I've noticed previously and managed to ignore and work around, but I'm wondering if this bug is named, and if there is a good way to get around it..
(the way I would usually get around this is to space H1 with padding instead, but this isn't always reasonable).
You need to invoke hasLayout on the outer div to have IE display properly. You can do that by adding width or height to your div or zoom:1.
Those will also clear your float in IE so you can remove <div style="clear: left;"></div>. To clear the float in other browsers use overflow:hidden;
<h1 style="margin: 0 0 50px 0;">Menu</h1>
<div style="border-bottom: solid 1px #000;overflow:hidden;zoom:1;">
<div style="float: left;">Hello world?</div>
</div>
Related
Internet Explorer 11 adds space in a way I do not understand. In the element below it adds white space on left border.
Link to a page that illustrates the problem showing how element is displayed in different browsers
This is the code:
<div style="position:absolute;width:330px;left:30px;top:120px;visibility:visible;border:1px solid black">
<div style="position:relative;height:14px;background-color:#B02C2A;padding:6px 0 6px 8px;color:white;"><span>hejsan</span>
</div>
</div>
Removing positioning absolute or the border attribute makes the problem disappear, but I need these features. Is there anything I'm missing or is it a bug?
<div style="position:absolute;width:330px;left:30px;top:120px;visibility:visible;border:1px solid black">
<div style="position:relative;height:14px;background-color:#B02C2A;padding:6px 0 6px 8px;color:white;"><span>hejsan</span>
</div>
</div>
apply background-color:#B02C2A; to the first div, that way it won't show the white spacing of the div
I have this sample code:
<html>
<head>
</head>
<body>
<div style="float:left;" id="1">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div style="border:1px solid black;" id="2">
bbbbbbbbbbbbbbbbbbbbbbbbbbb
</div>
</body>
</html>
The contents of div 2 is placed left of the contents of div 1 (fine), but the border of div 2 contains div 1. This happen in all tested browsers (Firefox 26.0 and IE8).
Demo
Can you please explain what is going on?
Because you aren't floating another div - Demo
And since it's not floated, it will take entire horizontal space, also it won't shift down as you aren't clearing your floats.
So what happens is the floated div just sits to the left, making your non floated div wrap around it..
If you move the order of your div in the markup, you will understand what I meant - Demo So, as you see, the top div takes all the horizontal space available, whereas the other div sits on the left, won't take entire horizontal space as it's floated to the left, so since you have the floated div first and next is non floated div it will take up 100% space, but will wrap around the floating div since you haven't cleared it, so you should float the next div as well.
The same effect can be achieved using display: inline-block; as well.
For more information on how floats work, refer my answer here
<div style="float:left;" id="1">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div style="border:1px solid black; float: left;" id="2">
bbbbbbbbbbbbbbbbbbbbbbbbbbb
</div>
I have a div floating left and a div floating right, and I would like to have a background-color changed. It changes the background, but it stops right before the floating divs. When I take them off, it continues having the correct background color that I desire.
<div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative;'>
<div style='width:1091px;margin:0 auto;margin-top:70px;'>
<div style='float:left;width:200px;border:thin solid black;margin-bottom:50px;position:relative;'>
float LEFT
</div>
<div style='float:right;border:thin solid black; width:800px;border:thin solid black;margin-bottom:50px;position:relative;'>
float RIGHT
</div>
</div>
</div>
thank you!
You must clear the floats so the parent can surround them.
<div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative;'>
<div style='width:1091px;margin:0 auto;margin-top:70px;'>
<div style='float:left;width:200px;border:thin solid black;margin-bottom:50px;position:relative;'>
float LEFT
</div>
<div style='float:right;border:thin solid black; width:800px;border:thin solid black;margin-bottom:50px;position:relative;'>
float RIGHT
</div>
<!--HERE IS THE CLEARING DIV: -->
<div style="clear: left;"></div>
</div>
</div>
You can also, make the parent itself float, and then you won't need the additional markup (clearing div). If you do this, then your parent will need a width specified.
EXPLANATION:
When an element is floating, the parent is not aware of its height (unless it is a floating element itself). You need a clear below the floats so that the parent div recognises the full height of all its children.
You don't need to force-clear the floats - you need only to define the overflow for any position:relative div. Overflow:hidden and overflow:auto close the div without any further intervention, on everything from IE6 up.
Change the first line to:
<div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative; overflow:hidden;'>
and it'll accomplish the same thing as forcing the div closed.
I have the arrangement below. My question is, why won't the first div tag align to the top of the cell, instead it moves down to the top of the image (both ie and firefox etc.)? Absolute positioning will not work as it appears that the div will not recognize the td cell as its parent and instead moves to the top of the document. Is there a way around this?
<td style="width:33%;height:100%; border:solid 1px black; position:relative;">
<div style="vertical-align:top;">test</div>
<div style="text-align:center; vertical-align:middle;padding-bottom:120px; padding-top:30px;">
<img src="<%=LastThumb%>" style="vertical-align:middle; border:solid 1px black;" alt="" />
</div>
</td>
You are correct that position:absolute; will cause the element to be COMPLETELY REMOVED from the regular flow of the other elements and make the div (and its children) then relative to the document window itself instead of its parent.
You are also using <div> elements, which are block-level elements. Thus, the browser will always place only one per line separated by line-breaks. You can get around this by adding display:inline-block; to both of the divs' CSS styles. This will then cause both divs to be treated as inline elements, allowing you to place one "on top" of the other.
So I have a small div for the border, and three divs inside (see image at end). Green is full size (minus padding etc); Blue should float left and have specific width; Red should float right and also have a specific width. However I'm messing something up. Both of the blue and red divs float outside the main div. What am I doing wrong here?
Here's my current code:
<div style="border: 2px solid black; width: 630px;">
<div style="width:auto;">Lorem ipsum</div>
<div style="width:150px; float:left;">This is the blue box</div>
<div style="width:150px; float:right;">This is the red box</div>
</div>
Ideal Float http://www.mfrl.org/images/howtofloat.png
Positioning of floats is funny. Basically, the main div is not taking into account the height of the floated elements when figuring out its own height. The easiest way to resolve this is to add a clearing element after the floated elements.
This fiddle should explain itself clearly: http://jsfiddle.net/QQxb3/2/
I think that the folks who commented on your post saying that it does work must have misunderstood what you mean by "main div", because specification, which Chrome does follow and IE follows in this particular instance, would place the floated elements outside of its parent div.