I've a several columns in CSS, with float:left property to align them horizontally. But as it float in the left side, I can't center all the divs.
So I found that if I wrap my columns with another div with display:table property, all works perfectly... but not in IE7 (idd, this property is not supported -.-).
Does anybody has a hack or trick for this?
Here is my code:
<div style="display:table">
<div style="float:left">A column</div>
<div style="float:left">A column</div>
<div style="float:left">A column</div>
<div style="float:left">A column</div>
</div>
Hm, why are you having a float: left on your leftmost div? I think that will cause some trouble. Do you have any css? You should have margin-left: auto and margin-right: auto on your outer div. Take a look on this page, there's all the details. Seems like you might have to add br-tags or similar too
if you use display:table; on the parent dic, you should have display:table-row; and display:table-column;-elements in it - and floating doesn't make any sense in that case. please take a look at this or ask google for more information.
(if you want to display a table, why don't you use the table-element? In cases where tables are used for layout, thats a bad practice, but doing the same sh*** by substituting table-crap for divitis doesn't make it better)
EDIT: if you just want to display your divs side by side and centered, you could simply try to use display:inline; or display:inline-block; (but the last will make problems in IE, too) - and remove that senseless display:table; on the parent-div
Related
This is driving me mental.
Why wont my third div (content-col-text) not go up on float right?
It stays aligned to the gallery-thumb-container? I need it to go to the right and up and align with large-image-container - this is where the outer div wrapper is (entry-content)..
I dont have any weird margin stuff going on even..
Your order is not correct. You need to change it as below for it to work.
Below is the code:
The HTML:
<div class="large-image-container"> </div>
<div class="content-col-text"> </div>
<div class="gallery-thumb-container"> </div>
The CSS:
.large-image-container{float:left; width:66%; background:red;}
.gallery-thumb-container{float:left; width:66%; background:yellow;}
.content-col-text{float:right; width:31%; background:green;}
The Fiddle demo:
DEMO
Usually, under such circumstances, when you use a clear:both;, the floats get corrected and it works properly.
Hope this helps.
your gallery-thumb-container has probably been forced down as it floats left and there's no more space to the right of large-image-container.
You could try switching the order of the <div>'s and put content-col-text second instead of third
Another option would be to position it absolutely, but that will take it out of the flow of the document...
Short version: Why does overflow:auto cause a div to the right of a left floated div not to wrap its text around the left floated div? (Bonus: Is this an acceptable way to accomplish a column effect?)
Long version...
I have two divs that I wish to be next to each other, and displayed as columns. The div on the left has a specific width and height. And the div on the left is shorter than the div on the right. However, I do not want the text in the right div to wrap under the left div.
Here was my first attempt...
<div>
<div style="border:1px solid grey;
width:100px;
height:100px;
float:left;">
Div on the left.
</div>
<div>
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
...I knew the text in the right div would wrap under the left div. And it did.
Then I remembered a page I had created that had a column effect. I had copied and pasted it from I know not where. All it did was assign overflow:auto to the div on the right. It looks like this...
<div>
<div style="border:1px solid grey;
width:100px;
height:100px;
float:left;">
Div on the left.
</div>
<div style="overflow:auto">
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
Voila, the right divs text no longer wrapped under the first (left) div! The second (right) div appeared as a column.
So, I read everything I could find on overflow:auto and found no mention of why I should see this behaviour. Can anyone explain it to me?
Also, is this an acceptable way to achieve a column effect?
overflow: auto (or anything but visible) causes your second div to create a new block formatting context. This means the text within that div is now in its own formatting context, rather than sharing the same one as your first, left-floating div (which is the containing block of both divs), and so it is no longer allowed to flow around the first div.
Floats also generate their own BFCs, but that doesn't exactly relate to the matter at hand. It does however also prevent reflow, achieving a column effect, as shown in the other answers.
Is this an acceptable way of creating a column effect? I don't know, but it does seem unconventional. You can just float the second div as well instead for the reason mentioned above (although even that, in favor of upcoming true layout modes like flexbox and grids, is now seen as a browser compatibility hack these days, but is the best we've got for the time being).
Remember that inline content is designed to be able to flow naturally around floated content; see CSS2.1, §9.5 Floats.
Remember also that the purpose of overflow is to control content overflow in a box with a limited size. That it causes a box to create a new BFC, influencing floats as a result, is but a side effect, the reason for which is explored here. It's a lengthy read, but it includes a bit about preventing reflow, which I'll quote here for ease of reference:
And so, this change was brought about in CSS2.1, documented here. Now if you apply an overflow value other than visible only to the second box, what a browser does is push the entire box aside to make way for the float, because the box now creates a new block formatting context that encloses its contents, instead of flowing around the float. Here's what it looks like with overflow: auto for example:
Note that there is no clearance; if the second box had clear: left or clear: both it would be pushed down, not to the side, regardless of whether it established its own BFC.
By the way, yes, this means your clearing div needs to be there if you want to always clear the first div.
To get the divs next to each other they both will need a float and fit in the surrounding div.
Example:
<div style="width:200px;">
<div style="width:100px; float:left;">
content
</div>
<div style="width:100px; float:left;">
content
</div>
</div>
If you want the outlining div to grow with the largest div place overflow:hidden; to the div.. If that div doesnt have a height with it then it will scale with the larges div.
Preview:
http://jsfiddle.net/WzVBE/
Remove float:left from the first div.
<div>
<div style="border:1px solid grey; width:100px; height:100px;">
Div on the left.
</div>
<div style="overflow:auto; ">
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
DEMO
You can try this
<div style="width:800px; background-color:#CCC">
<div style="width:300px; height:100px; float:left; background-color:#CCC">
Div on the left.
</div>
<div style="height:100px; float:left; width:500px; background-color:#999">
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
In this example http://jsbin.com/inoka4 no width is defined for parent element
if i want to wrap red boxes in container border.
then we can make this in 5 ways
to giving float also to <div class="container">
overflow:hidden or overflow:auto
any clearfix hack to <div class="container clearfix">
Giving height to <div class="container">
adding one more html element (for example another div or <br >) after 2
boxes in <div class="container"> enter code hereand give
clear:leftor:bothor:right` to that
element
my question is any other option except float do not make any changes in <div class="container"> and inner boxes width. but if we use float:left or right to parent box then it's shrink the whole box and inner-boxes as well.
Why?
example link: http://jsbin.com/inoka4
Edit: My question is not about which method i should use, the question is why Float shrink the width
I think the better option is to use overflow:hidden. It is a simple one line change and it works.
div#container {
...
overflow: hidden;
}
Adding extra divs for clear fix requires changes in html for something that is really css. Alternatively, when using clear fix by doing hacks like...
div:after {
content:....
...
}
your css just gets bigger and messier. But it still is a good option (especially when you need to have things that overflow the box)
Reference:
http://net.tutsplus.com/tutorials/html-css-techniques/css-fudamentals-containing-children/
If you dont' use float on the container it's width is set to 100%. If you add a floating, it only takes the space it needs. In this case the width is calculated by the two divs inside.
To wrap the red boxes in the container border there is not other option except adding float to the container. The only other option would be to absolutely position all the elements but in this case you have to know the width and height of all elements in advance. So that really isn't an option.
So my advice is to use float on the container and add a clear: both on the element after the container.
Your best bet is to always clear your floats. Just after you close the div with class .right, and just before you close the div with class .container, add a new div like this:
<div class="clear"></div>
.clear is just {clear:both;} in your stylesheet. That's what I use all day long, and works like a treat.
The final markup would be:
<div class="container">
<div class="left"> ... </div>
<div class="right"> ... </div>
<div class="clear"></div>
</div>
Edit: Just like your last example, apparently. :)
I ma having an issue with divs and css and especially floats.. I need to convert a page that is heavy using tables and columns and rows, my idea is to create a div for each column but of course i need to float these.
What are the rules for floating? I should float left each Div until i come to the end and then i must "clear" the float?
Is it good practice to use Width / Height on a div others i can't float them correctly?? or is it better to use min-height ?
Of course my idea is removing all the css stuff to a css external style sheet so i presume i need to give each div and ID so that i can assign a float / style to it... or of course if they are all the same i can assign a css class?
Any help really appreciated
Thank you
<div id="mytable">
<div class="left"></div>
<div class="right"></div>
<div class="clearer"></div>
</div>
<style>
.left,.right {
float:left;
width:100px;
}
.clearer {
clear:both;
height:0;
}
</style>
This is the way i style my "tables", it works in all browsers.
This might be helpful:
http://www.vordweb.co.uk/css/replacing-tables.htm
http://snook.ca/archives/html_and_css/getting_your_di
I am having an issue with divs and css and especially floats.. I need to convert a page that is heavy using tables and columns and rows, my idea is to create a div for each column but of course i need to float these.
Sounds fine. Beware, though, that converting table layout to CSS layout might be tricky if you want to keep the appearance 100% the same.
What are the rules for floating? I should float left each Div until i come to the end and then i must "clear" the float?
Let me answer by example:
<div style="float: left;">Column 1</div>
<div style="float: left;">Column 2</div>
<div>Column 3</div>
<div style="clear: left;">Stuff below the three columns</div>
Is it good practice to use Width / Height on a div others i can't float them correctly?? or is it better to use min-height ?
That depends on whether you want the width/height to depend dynamically on the content or if you want it fixed. min-height can be useful in a lot of cases, but I think the question is too general to be answered.
Of course my idea is removing all the css stuff to a css external style sheet so i presume i need to give each div and ID so that i can assign a float / style to it... or of course if they are all the same i can assign a css class?
Yes.
I have a container background defined in CSS like this;
.container {
background:#fff;
margin-left:auto;
margin-right:auto;
position: relative;
width:970px;
border:1px solid #000;
padding:5px 10px;
}
The problem is I have a jqGrid put in the bottom of the container (near the bottom edge) and when its initially drawn it does fit inside the container panel and looks correct. Something like this (please pardon my non-l33t graphic skillz):
alt text http://img67.yfrog.com/img67/7162/screenshot002f.jpg
But then when I populate the grid with rows it outgrows the container and it looks really tacky, something like this (I circled the original container background edges):
alt text http://img80.yfrog.com/img80/5419/screenshot003fr.jpg
I am sure its something I am doing wrong with the CSS. Any advice would be appreciated.
EDIT: The problem isn't the width its the height of the container being overlapped by the new height of the now populated grid
I've seen this happen many times when you have floats inside. Add a clearing div just before closing container. You should always clean up after floats.
<div class="container">
<div id="nav" style="float:left;">
...
</div>
<div id="grid" style="float:left;">
...
</div>
<div style="clear:both;"></div> <!-- this does the trick -->
</div>
I disagree with adding float to container. Although this will work, having unnecessary floats will give you more problems down the road. Only use floats where necessary and clear it when done floating.
Also in my experience, overflow doesn't mean anything here unless you define height. I don't think setting overflow on container fixes the issue here. Correct me in the comments if I'm wrong.
.container { overflow:hidden; }
assuming you are dealing with floats, this is one way to make the container actually contain them.
Your container is fixed width and won't grow. What you're probably looking for is min-width. In other words, change:
width:970px;
to:
min-width:970px;
As a note, IE 6 and 7 treat width as min-width, but other browsers do not.
I think you need this in your CSS:
overflow: auto;
Depending on your float situation for the container and the inside grid, you can do a number of different things. You might be able to get away with just adding a clear,
clear:both;
You also can float the parent. This is called, setting a float to fix a float. So if your grid has a
float:left;
Then you can just add
float:left;
to your container css. I really like the Complex Spiral article on containing floats.