Geek Answers Handbook

How can I wrap divs?

Basically, I want the inner divs outside the outer div to wrap around the width of the outer div, which in turn expands and contracts to fit the width of the browser window, for example:

.---------------------. | | <-- 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 the simplest in terms of developer time) way to do this?

+4
source share
3 answers

Set display: inline-block for these blocks, and some width for the main container ...

  .div { display: inline-block; }

http://jsfiddle.net/guh5Z/1/

+9
source

You can simply apply float: left to each inner div. See the following jsFiddle example (try resizing the results pane to see the behavior):

jsFiddle (Live): http://jsfiddle.net/guh5Z/

Source:

 <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>
+4
source

You can use <ul> instead if you place text instead. Something like that:

CSS

 ul { margin: 0; padding: 0; list-style: none; } li { width: 100px; height: 120px; border: 1px solid; float: left; margin: 5px; }

HTML:

 <ul> <li>Random text here</li> <li>Random text here</li> </ul>

I hope this helps

+2
source

More articles:


All Articles