I've got a number of div's with float:left;, of course they show up next to eachother but except for the floating div's wich don't fit in the wrapper div anymore.
I need the divs to stay next to eachother and flow over on the x-axis. I know it could be done by setting a fixed width to the wrapper and wrapping the wrapper in another wrapper but the width isn't static and prefer not to use a script to calculate the width.
The situation is:
<div id="wrapper">
<div class="floatleft"></div>
<div class="floatleft"></div>
<div class="floatleft"></div>
</div>
//Wrapper WITHOUT fixed width
#wrapper{
overflow:hidden;
}
.floatleft{
float:left;
width:500px;
}
You can do it with inline-block and white-space:nowrap http://jsfiddle.net/imsky/EbAFw/
<ul id="wrap">
<li>A</li><li>B</li><li>C</li><li>D</li><li>E</li>
</ul>
#wrap {margin:20px;width:300px;height:100px;background:yellow;overflow-x:scroll;overflow-y:hidden;white-space:nowrap}
li {display:inline-block;width:100px;height:100%;background:#5AA4D7;color:#fff;font-family:sans-serif}
The only catch is the markup will be white-space sensitive.
Edit: this works cross-browser, with IE7 and below just needing a *display:inline;zoom:1 at the end of the li rule.
Related
How can I achieved aligning of N contiguous divs horizontally with a wrapper whose width is 'auto'?
like:
.boxes{ width:200px;height:200px;float:left; }
<div id="wrapper" style="width:auto;">
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
. . .
</div>
I tried applying display:inline; and display:inline-block; on wrapper but boxes goes into new y after it reaches the browsers/display width?
But setting document's width into fixed will solve the issue but its not what I want.
Also I can easily achieved this using tables but I don't want to do it because my code will look messy and will be hard for me to maintain.
Add
#wrapper
{
white-space: nowrap;
}
and on your boxes class: change float:left to display:inline-block;
FIDDLE
This will keep your boxes from wrapping.
What is the best way to write a div which has a width of 100% (the yellow-ish ones in the pic below), without breaking the flow of the document?
<div id="container">
<div class="big">
//content
</div>
<div class="small">
//content
</div>
</div>
css:
.big
{
background-color:#whatever;
}
.small
{
width:75%;
margin-left:auto;
margin-right:auto;
}
div {position:absolute;}
or
div {postion:fixed;}
will remove it from the document flow, but you may have to specify the left and top to put it where you want it once you remove it, depending on which one you use.
A div will automatically take up the whole width of it's parent (<body> in this case). If you insert
style="clear:both"
Into the div you'd like to stretch, it will ensure that it is not alongside any other elements (following the normal flow of the page) hence it will stretch the width of the body.
I am trying to creat a layout like this:
My question is specifically centered around the five boxes. I struggle with the CSS to get it to work. Have you guys got a simple setup for such a layout?
I see that you have fixed width, so here is an example. Widths are not exact for your width, but you can esily set values you need. Main thing here is float:left in small_bottom class which makes div to be shown in one row. overflow:hidden in bottom class makes that div wrap around floating divs (without that it will be shown like there is nothing inside). If you want this depend on browser window width - try using percents in width for small_bottom.
HTML:
<div class="main">
<div class="top"></div>
<div class="bottom">
<div class="small_bottom"></div>
<div class="small_bottom"></div>
<div class="small_bottom"></div>
<div class="small_bottom"></div>
<div class="small_bottom"></div>
</div>
</div>
CSS:
div{border:solid 1px;}
.main{width:350px; border:solid 1px;}
.top{ height:40px;margin:5px;}
.small_bottom{
float:left;
height:50px;
width:50px;
margin:5px;
}
.bottom{margin:5px; overflow:hidden;}
Here is an example how it looks
HI, can someone please help me with this. I have:
<html>
<body>
<div style="width=100%">
<div style="float:left; background-color:Red; height:100px">Red</div>
<div style="background-color:Green;">Green</div>
<div style="background-color:Yellow;">Yellow</div>
</div>
</body>
</html>
Which gives me exactly what I want, a Red div on the left with a Green div beside it taking up the rest of the width with a Yellow div beside the Red but below the Green div.
However the parent div actually has to also float left ie.
<html>
<body>
<div style="width=100%; float:left">
<div style="float:left; background-color:Red; height:100px">Red</div>
<div style="background-color:Green;">Green</div>
<div style="background-color:Yellow;">Yellow</div>
</div>
</body>
</html>
This breaks it. Is there a way to get it working again with the parent div float left?
if you float the parent div, in order to keep them all in the parent container, you must also float them all. Those inside without float will fall out.
Edit: Note though that once you float them, width:100% means nothing anymore since the element don't know what to align 100% width with. Might have to give it some fixed width, or use JQuery to get width from document.
http://jsfiddle.net/robx/cpFUV/
It breaks it because a div is normally set to have a width of 100% it's parent container. Setting float:left makes the width set to the content's width. Set a width on your parent container and it should fix it.
You wrote width=100% instead of width:100% - fixed example:
<html>
<body>
<div style="float:left;width:100%;">
<div style="float:left; background-color:Red; height:100px;">Red</div>
<div style="background-color:Green;">Green</div>
<div style="background-color:Yellow;">Yellow</div>
</div>
</body>
</html>
The reason it worked originally, is that there is an implicit width of 100% on block elements, but you made your div an inline element (of sorts) by adding the float (such that the width of the div reverted back to the content's width, just as your Red div works).
Your width=100% was always ignored, so by putting the width:100% as it should be, you are specifying a width for the element and all is well.
Example: http://jsfiddle.net/hwb4w/
<div style="float:left; width:50%;">
div 1
<div style="position:absolute; width:105%">nested element</div>
</div>
<div style="float:left; width:50%;">
div 2
</div
If an element exceeds the width of its floated parent element, the next element is pushed down unless I apply overflow:hidden on both floated elements, which defeats the purpose because I DO NOT want to hide the overflowing content. Is there any fix for it?
You have to make sure the content inside is not wider than the divs to stop the elements being pushed down in this scenario.
You could perhaps put margin-right: -5% on the positioned div to make it's width narrower in the document flow, but it should still display at 105% wide once rendered.
Set it to 100%, not 105% - otherwise, it is simply doing what you told it to do.