CSS fun ^^

Soldato
Joined
12 Jan 2004
Posts
3,172
Location
Brighton
Heya,

Simple, yet silly question.

I want to make a div width X, height Y, then I want to string an entire series of these divs in a row, and I want them to automatically flow after each other, so that say, if I resized the page, they'd automatically fill up the box, in the same way that text does.

Does that make sense?

I am sure that it is a combination of position, display and float, but I can't remember the correct combination :S

Something like

.layoutBoxes {
width : 200px;
height : 200px;
background : #00ff00;
float : left;
display : inline;
}

and the html

<div class="layoutBoxes" />
<div class="layoutBoxes" />
<div class="layoutBoxes" />
<div class="layoutBoxes" />

Any ideas?
 
Last edited:
CSS looks OK, although I can't remember what the 'display:inline' is for... not necessary I don't think. You should use span instead of div in the html though, as span doesn't do any formatting itself unline div which includes a line break.
 
Crowze said:
not necessary I don't think.
So you do think that it is necessary then? ;) :D.

float: * implies display: block;. A floated element has block properties, not inline, so you can't float it and then display it inline. One or the other.
 
lol am confusing myself then ^^

I want to display the item, as a box, but that the boxes themselves line up one after another, so I clearly don't need display:block. But... they don't seem to line up...

weird
 
Shoseki said:
lol am confusing myself then ^^

I want to display the item, as a box, but that the boxes themselves line up one after another, so I clearly don't need display:block. But... they don't seem to line up...

weird
What you want is display: inline-block;. Elements have block properties (dimensions etc.), but display inline (don't create a new line before and after). Unfortunately it's not well supported, despite being in CSS 2.1. The culprit of this lack of support is... wait for it... not IE, but Mozilla/Firefox failing to implement it.

Actually, IE doesn't actually support it properly either, but for once it's nice to show that the Gecko engine, despite being awesome, is far from perfect :D.

For a solution to the layout you want, read this article at ALA, it should have what you want (The "One Step at a Time" part).
 
:D

Thanks matey!

With a little testing, I found that individual divs work as I like, however, as soon as I embed another DIV inside, it falls apart.

So it looks as though I need to do tiny "table layouts" for my inner blocks, and outer inline divs to make it flow :S

I will read the article you posted first ^^ thanks again!
 
Back
Top Bottom