I've run into a strange problem in IE9, spent a lot of time tracking and reproducing it.
So we have the following markup:
<div class="container">
<div class="movable">
<div class="stuff">Stuff</div>
<div class="stuff special">Stuff Special</div>
<div class="stuff">Stuff</div>
<div class="stuff">Stuff</div>
</div>
</div>
This results in something like this:
We would like to move the yellow box up (out of the container) and make the .stuff elements clearing. We would like to float at least one .stuff element, let's choose .special, so we do this:
.movable { margin-top: -70px; }
.stuff { clear: both; }
.special { float: left; }
On the left, the results we get in Chrome and Firefox, on the right IE9:
As you can see, IE9 is somehow stuck applying the negative margin-top, and it will always get stuck at the element which has right or left float and clear: both; applied on it at the same time. The combination of these two properties is needed, only one of them will not trigger this behavior.
A jsFiddle that demonstrates the problem and can be played with
This problem has come up in a quite large application, for certain reasons I cannot use top instead of margin-top, positioning would break other stuff.
Anybody has any idea how to help IE9 correctly display this?
Clear the .movable element. I don't know how you're normally doing it, adding a clearfix class etc. If not, just add overflow:hidden to it for example. Floating it also fixes it, but that might not work for your real page.
.movable { margin-top: -70px; overflow:hidden; }
jsFiddle
Related
I'm trying to create a "pattern" of divs that looks like this:
However, currently it looks more like this:
resulting in my page looking something like this:
In that final snip, everything is also pushed to the right. Ideally, I need the assembly to be centred. The Get Conditions button should also reside underneath the Print Runs textbox, as they both reside in the same div, and be centred beneath the two upper divs. The dropdown lists and radiobutton list are both where they should be.
I toyed with floating the bottom div, but the various things I tried mostly resulted in the lower div taking up more space between the two upper divs.
I have pasted the HTML and CSS in a JSFiddle, please bear in mind that it doesn't recognise ASP tools so doesn't give an accurate preview of what I'm trying to achieve.
https://jsfiddle.net/h4tr31gt/1/
This doesn't directly address your question of floats, but you can achieve the same result by using flexbox.
https://jsfiddle.net/gnw634gv/
.container {
background-color: lightblue;
height: 400px;
width: 100%;
display: flex;
flex-flow: row wrap;
}
.block-top {
width: 50%;
background-color: yellow;
height: 50%;
border: 1px solid black;
box-sizing: border-box;
}
<div class="container">
<div class="block-top">A</div>
<div class="block-top">B</div>
<div class="block-bottom">C</div>
</div>
As DaniP has suggested clearing floats would solve your issue. What float property does is removing your element from the actual page flow and aligning it according to your float value either right/left. So, when you try to add other element after the floated elements, it will occupy the page as if the floated elements doesn't exist. That is why you see that it is moved up. Also, floating the next element without clearing the previous elements floats will have the same result as without float. Hence, you need to clear the float using clear:both/right/left so that the surrounding of floated elements are cleared and you can align elements. You can check more on floats/clearfixes as some new things keep on arising every now and then. You might find it more clear.
add a class of clearfix to the parent div, like so:
<div class="clearfix"> </div>
then add the following style to your css:
.clearfix {
clear: both;
}
You can then reuse this anywhere else you are using floats.
https://jsfiddle.net/c3rLqce7/
So, I guess I'm just having trouble really fundamentally understanding what's happening here and I would like an in-depth explanation so I can finally grasp what seems to be mysterious behavior.
I have 3 block elements, all with fixed widths and heights, and I'd like one to be aligned to the left side of the screen, one directly in the center, and one on the right side of the screen. In my head, I feel as though I should be able to do something like this:
CSS
div {
width: 30px;
height: 30px;
background: black;
clear: none;
}
#a {
float: left;
}
#b {
margin: 0 auto;
}
#c {
float: right;
}
HTML
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
But it unfortunately doesn't work. In the above configuration, the third element "c" is on the right side of the page but it's been cleared to the next line. Would really just like to understand why.
Here's a fiddle: Fiddle
b is taking all the available margin on the right, then there's no space available for c.
<div id="a"></div>
<div id="c"></div>
<div id="b"></div>
Just does the expected behavior, so in short, first define your floats (left, right) then the middle part.
Another solution is to make div's act like table cells, (display:table-cell) then you will need a parent div with display:table:
Example: JSFiddle
Note: This will make a layout of 3 filled columns, I don't know if this is what you want or you really want these boxes separate.
I'm currently creating a website and I came across a strange thing: I have a content div that's 950 width and centered on the page. Inside that I have a header div, a menu div and some other content div. I would like the menu div and that other content div to be right next to each other so I thought about using float:left on both divs. However, when I use this float:left on the menu div, it's getting pushed to the right and I can't figure out why. I think some other element is pushing it to the right.
I'm using a custom Drupal theme, a subtheme of Zen to create the page by the way.
Here's the HTML I'm using to create the page (without the header):
<div id="root">
<div class="content">
<div class="left-menu">
<ul>
<li><p>Camera</p></li>
<li><p>Audio</p></li>
<li><p>Licht</p></li>
<li><p>Lenzen</p></li>
<li><p>Grip</p></li>
<li><p>Accessoires</p></li>
<li><p>Recorders</p></li>
<li><p>Transport</p></li>
<li><p>Edit suits</p></li>
<li><p>Crew</p></li>
</ul>
</div>
<div class="products-overview">
This is some other content that I want to the right of the menu.
</div>
</div>
And here are some CSS properties I've set on left-menu and products-overview:
.left-menu {
margin-top: 10px;
background-color: #BBB;
width: 150px;
float: left;
}
.products-overview {
background-color: #BBB;
float: left;
}
Could anyone please explain me why the left-menu is being pushed to the right?
Hmm, I believe this is a result of the normalize.css stylesheet you're using.
The problem stems actually from the .header element, which has a table within it. The normalizing stylesheet has a margin-bottom:1.5em applied to the table, which translates into a margin on the .header element (since it has no padding/border), which in turn sends the .left-menu to the right (since the margin causes there to be no space for it to fit on the left).
Adding to your current .header table definition can fix this, with a simple:
.header table{
margin-bottom: 0;
}
I hope this is what you were looking for! If not, let me know and I'll be happy to help further. Good luck!
I tried to replicate your problem. I did and found a solution that should work. Just set the products-overview class to float:none. See this fiddle. http://jsfiddle.net/shaansingh/yj4Uc/
In Mozilla Firefox it looks ok to me. From your code, I can only see that you need a width for the content div. and watch the dimensions, especially left/right padding and borders.
I used to add a <div style='clear:both'></div> to clear floats from previous segments, but someone suggested I should use overflow:auto on the <div> with floats instead as it's simpler and more clean.
Problem is, I got reports that there were some strange 'shades' in my website. After investigating, it turns out it happens in Chrome, not in Firefox, and those 'shades' are actually very small scrollbars.
I tried to reduce the parts to a minimum in this jsfiddle http://jsfiddle.net/57HM3/4/ . note they are far to the right (by where it says 'Result'). It seems to have to do with the line-height, if I set it to 1.2 instead of 1.1 it disappears. Is this some sort of known issue (that I don't know about)?
I know there are other ways to clear them but they involve IE specific codes and what not. I'd like to keep it as it is, just making the div with the floats as overflow:auto (and if this doesn't work, I'd rather go back to my adding the extra <div>
add overflow:hidden instead of. This will clear your both and will not add any scroll
Don't monkey with overflow. I'd recommend a "clearfix" solution. Here's what I use, I put it at the top of all my style-sheets from the beginning of each project:
/* CLEAR-FIX */
.clearfix:after {
visibility: hidden; display: block; font-size: 0;
content: " "; clear: both; height: 0;
}
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
...got that off a blog so long ago I can't remember where.
Any container that needs to grow with floats just needs the "clearfix" class added:
<div class="test" class="clearfix">
<div style="float:left">Hello</div>
<div style="float:left">World</div>
</div>
BTW, if you're wondering why CSS is such that floats aren't normally counted as part of a parent's height, see: Why do non-floating parents of floating elements collapse?
If you want to keep the overflow:auto rule for the container div, you can try removing the line-height rule from the .test class.
Here is the relevant HTML:
<div class="row">
<div class="arrow box">◄</div>Month Year<div class="dayMonth box"></div>►<div class="arrow box"></div>
</div>
Here is the css which the .html file that the above HTML is in links to:
*
{
margin: 0;
padding: 0;
}
body
{
font-family: "Times New Roman";
font-size: 12pt;
}
.dayMonth
{
width: 80%;
}
.arrow
{
width: 10%;
}
.row
{
width: 58em;
background-color: gray;
margin-right: auto;
margin-left: auto;
}
.box
{
float: left;
text-align: center;
}
This is the output:
The "row" is centering in the browser right but the stuff inside it (the two arrows and the Month Year) aren't doing what I want.
What I think this should be doing is, because there are two arrows and both of their widths is sent to 10% and then the dayMonth width is 80% that all the divs should take up the entire "row" (because they sum to 100%) and that the text "Month Year" should be centered within the "row" because the .dayMonth css class says it should be centered in its div and because its div should be the center 80% of the "row". This, obviously, isn't happening though.
I don't want a different solution (per se) I want to know why the code I've written doesn't express the idea that I want it to express, doesn't work the way I want it to.
I think I must be misunderstanding how %'s governs widths. http://www.w3schools.com/css/pr_dim_width.asp says that %'s "Defines the width in percent of the containing block" though and that looks like %'s should do what I intend them to do so I'm thoroughly confused.
Where have I gone wrong?
This works fine for me in Opera.
I did notice that you have "Month Year" outside of the <div>. Try putting it inside and see if that fixes it.
Edit
And again with the last arrow, it's outside its <div> tag as well.
Your HTML should be like this:
<div class="row">
<div class="arrow box">◄</div><div class="dayMonth box">Month Year</div><div class="arrow box">►</div>
</div>
Also, once you do this, the row <div> will not have a height so you might want to explicitly set a height (try 20px).
Once i fix your HTML, it works fine for me in FF. You have empty divs and the Month Year and left arrow are not in their respective divs.
I figured this out real quick when i used firebug. You should debug using firebug or chrome's developer tools.
<div class="row">
<div class="arrow box">◄</div><div class="dayMonth box">Month Year</div><div class="arrow box">►</div>
</div>
Try the code like this, with the content inside the divs. Worked for me in FF, IE7/8, and Chrome. You may want to use a hex value for the .row color, like #333333 - the color wasn't rendering for me in any browser but IE7.
First, your markup is wrong, that's why you're seeing issues. It has to do with the content not being in the divs, but outside of them, causing height issues with the floated elements.
Here's the work corrected:
http://jsbin.com/ezari4/edit