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.
Related
I've got a red box and a green one, side-by-side, and centered. When the browser width is smaller than the width of the squares, they break into separate lines. How do I keep them together?
(I tried using a container div with their combined widths, which does the job in keeping them together, but they no longer are centered.)
Any suggestions?
The code:
<body>
<div style='text-align:center;font-size:0'>
<div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
<div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>
</body>
You can run it here: https://plnkr.co/edit/2De21ziNmaeleFmkPuPF?p=preview
This can be done in many ways, here is 3:
Use min-width
<div style='text-align:center;font-size:0; min-width: 400px'>
<div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
<div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>
Use white-space: nowrap
<div style='text-align:center;font-size:0; white-space: nowrap'>
<div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
<div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>
Use display: flex;
<div style='text-align:center;font-size:0;display: flex;justify-content: center'>
<div style='display:inline-block;background-color:red;width:200px;height:50px'></div>
<div style='display:inline-block;background-color:green;width:200px;height:50px'></div>
</div>
Try using Flex-box
.parent{
display:flex;
border:1px solid green;
width:500px;
}
.parent div{
background:green;
width:100px;
height:100px;
margin:20px;
}
<div class="parent">
<div>cell1</div>
<div>cell2</div>
</div>
Hope this helps
If you give them a fixed width (ex 200+200px), when that div width is passed (ex mobile width of 375px < 400px of divs sum), the last element slide on the next row.
With width of 35% for each other, will look exactly as you want it for that 200px.
<body>
<div style='text-align:center;font-size:0; width: 100%;'>
<div style='display:inline-block;background-color:red; width:35%;height:50px'></div>
<div style='display:inline-block;background-color:green; width:35%;height:50px'></div>
</div>
</body>
Here is the link to your code
EDIT:
Here is a usefull link for understanding better the width options depends of the width of device, and I encourage you to take a deeply look inside of w3schools, or other platforms where you can learn better how to manipulate elements of html, with css and js.
screen-width
Try using width: 50% on the boxes instead of width: 200px.
I want to achieve a layout where the outer div is 100% width and height. In this div I will add more divs dynamically. I want to write a css structure that splits the outer div so that each div gets the same space. Actually I want to create a dynamic grid with div elements.
Examples below:
The answer of "Sowmia" is so good but one thing :
you want to sub div have AUTO SIZE and with is solution you can't do this.
my solution is exactly the Sowmia's answer with some changes:
<style type="text/css" >
.main{width:100%; height:100%; background:#F5D0A9; overflow:auto}
.sub{width:auto;
height:auto;
float:left;
background:#8181F7;
margin:4px;
border:solid 1px #2ECCFA}
</style>
and html:
<div class="main">
<div class="sub"></div>
<div class="sub">this is div number 1</div>
<div class="sub">this is div number 2</div>
<div class="sub">if you have a big text this div is bigger than the other
<br />
even you can have a text with some height
</div>
</div>
and this is :
DEMO
with only css its not possible but you can do this with jquery just count div and set their width according to number of div
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
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.
I am trying to create a 4 column <div> layout.
Why are the row containers not drawing a border around the respective row?
Also, is this a good approach, as in is my css written well to be fluid and for dynamic resizing of the browser window?
Any suggestions or help would be most appreciated.
Here is my current attempt.
You need to set the overflow to auto when using float. http://jsfiddle.net/gJJHs/
The problem seems to be that you are floating your columns, and when you float things, they take up effectively zero space.
I think the solution is to cancel the float in you "last" class and add a "dummy column" to each row.
This CSS seems to work:
.col
{
float: left;
width: 25%;
}
.last{
clear: left;
}
.row{
border: 1px solid green;
}
Revised HTML (with dummy last column):
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="last" />
</div>
<div class="row">
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="last" />
</div>
When an element is floated, its parent no longer contains it because the float is removed from the flow. The floated element is out of the natural flow, so all block elements will render as if the floated element is not even there, so a parent container will not fully expand to hold the floated child element.
As such, the border will seem like it is not bordering anything :( Take a look at the following article to get a better idea of how the CSS Float property works:
The Mystery Of The CSS Float Property
As others have said, if you add overflow: auto; to your .row class, it'll take care of the problem. Here's another article that explains why to use overflow.
http://www.quirksmode.org/css/clearing.html
I hope this helps.
Hristo
it's the float left. That takes the divs "out of flow" and it's drawing the border around empty space essentially
Yet another option, in addition to the other answers, is to add overflow: hidden; to your .row.
The reason for the behavior you saw is that float takes the div outside of the normal flow. The div then essentially takes up no space in the document.
This makes sense if you think about the ostensible purpose of floating an image in order to wrap text around it. The next p tag (for example) is positioned as if the floated image wasn't there, i.e. overlapping the image. Then, the browser wraps the text within the 'p' tag around the image. (If the floated image was not "removed from the flow", the p tag would naturally appear below the image—not giving the desired effect.)
Here's how I'd write the code.
HTML:
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
<div class="row">
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="last">8</div>
</div>
CSS:
.col
{
float: left;
width: 25%;
}
.row{
border: 1px solid green;
overflow: hidden; /* "overflow: auto;" works just as well instead */
width:100%; /* Helps older versions of IE */
}
Add a "float:none;clear:both" to your .row and you'll see the rows appropriately. But for the fluid behavior and design that you are looking for, you'll want to apply some javascript (like jQuery Equal Height: http://www.jainaewen.com/files/javascript/jquery/equal-height-columns/) to be consistent across browsers without a ton of CSS hacking.