Menu
Basically, I want the inner divs outside the outer div to wrap according to the width of the outer div, which in turn expands and contracts according to the width of the browser window, like so:
.---------------------.
| | <-- Browser Window
| .-----------------. |
| | ,-, ,-, ,-, | |
| | |X| |X| |X| | |
| | `-` `-` `-` | |
| | | |
| | ,-, ,-, ,-, | |
| | |X| |X| |X| | |
| | `-` `-` `-` | |
| `-----------------` |
| |
`---------------------`
.-------------------------------.
| | <-- Browser Window enlarged
| .---------------------------. |
| | ,-, ,-, ,-, ,-, ,-, | |
| | |X| |X| |X| |X| |X| <----- Inner divs wrap around accordingly, as if
| | `-` `-` `-` `-` `-` | | they are text
| | | |
| | ,-, | |
| | |X| | |
| | `-` | |
| `---------------------------` |
| |
`-------------------------------`
What would be the best (as in simplest in terms of developer time) way to make this happen?
952
Set for this blocks - display: inline-block, and for main container some width...
.div {
display: inline-block;
}
http://jsfiddle.net/guh5Z/1/
183
You can just apply float: left to each of the inner divs. See the following jsFiddle as an example (try resizing the result pane to see the behavior):
jsFiddle (Live): http://jsfiddle.net/guh5Z/
Source Code:
<html>
<head>
<style type="text/css">
#outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: auto;
background-color: red;
}
.inner {
float: left;
width: 150px;
height: 150px;
margin: 20px;
background-color: blue;
}
</style>
<body>
<div id="outer">
<div class="inner">X</div>
<div class="inner">X</div>
<div class="inner">X</div>
<div class="inner">X</div>
<div class="inner">X</div>
<div class="inner">X</div>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
