I am beyond frustrated. I have been researching an answer to this for hours and to no avail.
Yes, I know there is already a discussion about this here: IE7 float right causes parent element to take up full width
but it doesn't seem to solve my issue. :(
I have 2 floats (a left and right) within a right floated element. Of course in every browser it works except IE7. The parent right floated element stretches to full width instead of wrapping around the 2 floats within.
I have tried zoom:1 on the parent element.
I have tried display: inline-block on the parent element.
I have tried min-width: 1px on the parent element.
NONE of which work! I have tried them altogether as well as separately and still no change in IE7. What am I doing wrong???
<div class="parentfloat">
<div class="leftblock">
LEFT FLOAT
</div>
<div class="rightblock">
RIGHT FLOAT
</div>
</div>
.parentfloat {
float: right;
display: inline-block;
zoom: 1;
min-width: 1px;}
.leftblock {
float: left;
text-align: left;
margin-right: 60px;
padding: 0;}
.rightblock {
float: right;
text-align: right;
padding: 0;}
By not setting an explicit width for the .parentfloat containing element, it is by default (in IE7) expanding to take up 100% of the width. The fix for this is defining an explicit width for your .parentfloat class.
See this jsfiddle for an example (I added background-colors for clarity).
EDIT:
Considering this is an IE7 specific bug, I would recommend only apply the fixed width to IE7 either through the use of a conditional stylesheet, a css hack, or a conditional class.
Related
It seems that in Microsoft's edge and google chrome the floating doesn't rearrange the divs properly, if you have three divs floated left and the page is scaled in a width between 444 and 436 px the third div goes to the second div's position instead of going below it. This "bug" does not occur in firefox.
I made a JSFiddle to be tested http://jsfiddle.net/e47jckrh/
HTML
<div id="d1">
<p>1</p>
</div>
<div id="d2">
<p>2</p>
</div>
<div id="d3">
<p>3</p>
</div>
CSS
div{
float: left;
}
Down below there is a visual representation of how it should behave
Full page Layout
Correct div floating when page width is more than 444px
Wrong div floating order when page width is between 444 and 436px
Correct div floating when page width is less than 444px
It may be just me thinking there is something wrong, but i assume the firefox behavior to be the correct one.
I've edited your fiddle here: http://jsfiddle.net/e47jckrh/5/
You didn't float all your elements as you'd suggested in the question. So I added float: left; to the div numbered 3 and set all 3 to display: inline-block;. And using display: table; and display: table-cell; with vertical-align: center; is a really old way to get something to align vertically.
These 3 lines work for most things:
position: relative;
top: 50%;
transform: translateY(-50%);
Okay. So #d3 shouldn't be on the right side at all because it isn't floated, but you used display:table. This gives it the effect of being floated with the other two divs for some reason.
Since it uses display: table #d3's margins are off the page but don't count as "not fitting" and don't force it to the next line.
#d2 is floated though so its margins DO affect it. So in the small range you're experiencing this #d1 + #d2 won't fit because of their margins contributing to an overall larger size width but #d1 + #d3 will because #d3 is not being affected by its margin on the right side giving the combo an overall smaller size width.
Simple solution is to float #d3 as well:
#d3 {
background-color: #ede4ad;
border: 3px dotted #6e5b3c;
clear: right;
float: left;
}
The behavior is caused by margin-right.
When div 2 reaches its containers right limit it overflows. In this case you control his limit by margin-right. BUT margin-right is only effective if there is succeeding element ( its calculated base on a succeeding element ). In this case div 3.
After it overflows in new line the div 3 takes its spot. But in this case margin-right has no effect since its the last element in this flow.
EDIT : I just realized you haven't floated all element , I don't know if that was your initial idea. If it was I won't delete this answer.
I have two divs next to each other - one fixed, and one fluid. However, whenever I apply a margin-top to a paragraph within the fluid div, it doesn't fill the whole height of the div and also pushes the fixed div next to it down with it. Unfortunately, I cannot use overflow:auto to fix this because I require the fluid div to have overflow: visible for a very specific need. Weird, I know, but I'm sure there must be a solution to this. However I've been trying for hours with no luck.
Here's a demo of the problem I'm having. I've included an explanation within the divs also: http://jsfiddle.net/LejbU/
<div class="left">
<p>This div has a fixed width of 300px.<p>
</div>
<div class="right">
<p class="withMargin">Test</p>
</div>
-
.left {
background-color: yellow;
width: 300px;
height: 100%;
float: left;
}
.right {
background-color: pink;
height: 100%;
margin-left: 320px;
overflow: visible;
}
p {
margin: 0;
padding: 10px;
color: black;
}
p.withMargin {
margin-top: 100px;
margin-bottom: 100px;
}
That's because of the collapsing margins of CSS Box model definition:
CSS 2.1 8.3.1 Collapsing margins
In CSS, the adjoining margins of two or more boxes (which might or
might not be siblings) can combine to form a single margin. Margins
that combine this way are said to collapse, and the resulting combined
margin is called a collapsed margin.
From the definition:
Margins of inline-block boxes do not collapse (not even with their
in-flow children).
So change the display of p.withMargin to inline-block to avoid this behavior.
Demo: http://jsfiddle.net/LejbU/2/
You've fallen victim to collapsing margins (MDN).
Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing.
In your case:
Parent and first/last child
If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
There are a couple ways to get around this, I just use padding instead to change the layout as I require without changing other properties I consider more dangerous. In this scenario: http://jsfiddle.net/rgthree/LejbU/1/
p.withMargin {
padding-top: 100px;
padding-bottom: 100px;
}
add this display:inline-block; to p.withMargin
Another solution I found. Create a new div WITHIN the right div and apply the following css to the new div:
.correctblock {
display: inline-block;
width: 100%;
zoom: 1;
}
Example: http://jsfiddle.net/62ueY/
I have two divs:
<div id="headercontainer" data-type="background" data-speed="5">
<div id="headersubcontainer">
<h1>Simple and Cost Effective Web Solutions</h1>
</div>
</div>
<div id="teamcontainer" data-type="background" data-speed="5">
<div id="teamsubcontainer">
<h1>Developed by a dedicated team</h1>
</div>
</div>
both have 100% widths and heights of 800px. The first heading I have set a top-margin: of 160px. Instead of moving the header lower into its parent div, it moves the parent div down with it as you can see in this picture:
Here is my relevant css:
h1{
font-size: 48px;
font-family: $header-font-stack;
font-weight: 100;
width: 400px;
}
#headercontainer{
width: 100%;
height: 800px;
background-image: image-url("background.jpg");
background-position: center top;
background-repeat: no-repeat;
}
#headercontainer h1{
text-align: center;
margin: 0px auto;
margin-top: 160px;
color: #610B21;
}
Using a padding works obviously, but I would like to be more proper and use a margin. How can set a top margin and move the heading lower into the container without moving the container with it?
This is due to margin collapsing:
Top and bottom margins of blocks are sometimes combined (collapsed)
into a single margin whose size is the largest of the margins combined
into it, a behavior known as margin collapsing.
This is resulting in the parent element reverse-inheriting the child element top margin.
You can prevent this by adding before the child element
Demo Fiddle
....or applying any of the below to the parent:
float: left / right
position: absolute
display: inline-block
Adding display:inline-block; to the parent likely being the preference if it is set to have a width to 100%
Demo Fiddle
just use box-sizing: border-box; on the parent and set the padding there instead of margin-top. It will help you keep consistent spacing on all sides anyways
JSFIDDLE
Just add some top-padding to the parent element. even 1px and it will fix it.
I would actually argue that this answer is better:
https://stackoverflow.com/a/49075574/2387316
Yes, I know it's my own answer, but I think it's important that we don't add random bits of padding, change box-sizing for no reason, add spurious elements to the DOM, or change display/padding simply to fix a display issue. Those solutions all cause problems on their own: SEO is worse, unpredictable box-sizing behavior when trying to do something else, annoyance caused by positioning and display changes, etc. This solution is good for SEO, is scalable, and has no other tangible effect when trying to do other things with your elements.
i have two divs, that float correctly in chrome, ff and safari but not iexplorer, the right div appears below the left div floated to the right- the two divs are wrapped by an outer div with a width of 800px;
<div class="b_left">
</div>
<div class="b_right">
</div>
.b_left{
width:350px;
margin-left:80px;
float:left;
display: block;
}
.b_right{
float:right;
width:350px;
height:280px;
background-color:#c8c8c8;
display: block;
}
when using divs for columns, which I assume is what you are intending for this, it is better to only float one of the divs.
Say i have a div called content which is 600px wide and inside it two 300px divs inside, leftblock and rightblock. Instead of floating leftblock left and rightblock right I instead float the leftblock left and put a 300px margin-left on the rightblock. This pushes the rightblock to the right and ensures room for the leftblock to fit in beside it while preventing IE from displaying weirdly.
Hope this helps
it is a bug of ie, it doubles the margins. you must add display inline to the .b_left.
display: inline
I created a quick jsFiddle here: http://jsfiddle.net/6JWq9/
And it shows up just fine. I suspect you have other code that adds padding or a margin.
Review my example, let me know what is different from yours and I can update my answer.
Just put margin: 0; padding: 0; on all three divs and go from there to check. Also reset styles are a MUST for IE, I use Eric Meyer's. (easy to Google).
Also, display: inline; on the one with margin will fix it for IE6 I suspect.
I'm trying to put some (vertically-stacked) display:block elements within a display:inline-block element. According to the CSS specification, the inline-block element should be a containing block, so it can have display:block elements within it and those should not affect the rest of the layout.
However, the display:block elements inside the display:inline-block elements disrupt the rest of the page; so does having nothing at all within the inline-block, or even a basic element like a paragraph; only simple text avoids disruption of the rest of the page (by disruption I mean shifting other divs down, e.g. in this case the left red block moves down a line and has a blank white space above it). I'm using Firefox 3.0.6.
<html><head><style type="text/css">
#left {
display: inline-block;
background: red;
width: 20%;
height: 100%;
}
#right {
display: inline-block;
background: green;
width: 80%;
height: 100%;
}
</style></head><body>
<div id="left">Left</div><div id="right">Right</div>
</body></html>
The above shows as two panes, left red, right green, as expected. If I change "Right" to
<p>Right</p>
or remove it entirely, or (as I want to do) replace it with a couple of divs, I get the bad formatting.
Is this a Firefox bug, or am I doing something wrong, or are my expectations incorrect? (FWIW, IE 7 mangles them all equally, as if it doesn't understand inline-block; doesn't matter, this is an internal app. and I'm only using Firefox). I may be able to get the layout I want using float/margin, but I'd prefer not to have to do that.
Well display: inline-block can be a bit tricky to get cross-browser. It will require at minimum, a few hacks and, for Firefox 2, potentially an extra element.
CSS
.inlineBlock { display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; }
display: -moz-inline-stack is for Firefox 2. All the immediate children will need to have display: block or otherwise be block level elements. Note if you need your inline-block element to shrink wrap I think you can use display: -moz-inline-box instead.
zoom: 1 gives hasLayout to the element (for IE 7 and below). Part 1 of the hack needed for IE7 and below compatibilty.
**display: inline* is a hack second part of the hack needed for IE7 and below compatibility.
I occasionally need to add overflow: hidden for IE compatibility as well.
For your specific situation i think what you need is:
<html><head><style type="text/css">
#left {
display: inline-block;
background: red;
width: 20%;
height: 100%;
vertical-align: top;
}
#right {
display: inline-block;
background: green;
width: 80%;
height: 100%;
vertical-align: top;
}
</style></head><body>
<div id="left">Left</div><div id="right"><p>Right</p><p>Right 2</p></div>
</body></html>
I get the bad formatting.
You are being bitten by margin collapsing, a CSS ‘cleverness’ which is a pain as often as it is a boon. The margin of the <p> collapses outwards to become a top margin on the inline-block; this then behaves as a margin would on an ‘inline’ element would, pushing the vertical-alignment of the text line out.
You can stop it happening by removing the margins from ‘p’ elements and using padding instead. Alternatively place a non-empty element with no top margin at the top of the block and one with no bottom margin at the bottom.
Is this a Firefox bug
I think possibly yes, according to the spec's:
Margins of inline-block elements do not collapse (not even with their in-flow children).
inline-block
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
visual rendering model