Topic: Float left for column look

The title sucks but I just couldn't describe what I want in that little
bit of space.

I trying to do a typical 2 - 3 column layout (depending on the width of the browser) where I have a containing div with multiple child divs within it. Each of the inner divs is set float:left so that they will continue in a row until the space is full and then wrap to start another row. There's a visual of what I want here. So far it's simple beans, but I run into trouble when the divs are of different heights. If for example Div 2 is longer than Div 3, Div 4 gets stuck and won't wrap back to the left edge of the containing div. Something like this is what happens. Now amazingly enough my boss was in a hurry to get this done, so what I did was make 1 outer containing div and 3 main inner divs that I filled with the list divs so it looks like what I want, but doesn't act the way I want if the browser is narrowed or the resolution is lower. It looks like this. The problem with this solution as I said before is when you narrow the browser, the whole third column drops down below the second column and makes the page look badly unbalanced.

Anyway, if anybody's still with me after that ramble... can anybody suggest a way to get the look I want while keeping the divs individual so they will wrap nicely in smaller browsers.

Thanks very much

- Butcher -

Thats a bit of a tricky ask... floating works how it works so you can't change that. For it to work how you want it to work your floating elements need to be the same height - so you should aim for a way to do that - which again is not an easy task.

What im assuming you want is

If its wide enough:

1 2 3
4 5 6
7 8 9

If its not:

1 2
3 4
5 6
7 8
9

Is that correct?

^that's what I'm trying to figure out as well, not sure exactly what you're after. Being able to specifiy height and width, or max-height and max-widths would be helpful (if not madatory to get it to work proper) if you're able, made me wonder what the actual content inside the DIV was going to be.

If your content is indeed just a heading image and a list, you can get rid of the 3 divs and the image and do all that via CSS on the UL

tell your son happy birthday for me =)

hey i havnt looked into this but does css have any sort of if statements? like if something do something? Im not aware of it and wouldnt expect it but who knows

Thanks for the replies guys.

The list items are being generated from a database query so I can't control the height, and the images are category headers that have to be there. I decided to force a width on the container div that will fit 3 columns no matter what but will still fit in the manditory browser width that my boss wants.

Now I have a follow up question. I've made it to look nicely in a 1024 browser width, but I would like it to expand nicely in larger resolutions. I've been able to get the containing div to center as a whole by doing

.container
{
  margin-left: auto;
  margin-right: auto;
}

but what I would like to accomplish now would be to set the width on the container div to 100% and hav the 3 "column" divs spread out evenly to fill the container space in bigger browsers.

Any ideas, links or shoves in the right direction would be appreciated.

Thanks again

- Butcher -

I'm afraid I haven't quite followed the entire discussion but the last question seems simple enough. You should just be able to set the widths the column divs to a percentage. That will take into account the size of the browser window and adjust accordingly.

Sorry again if I'm under thinking this.

-SPyX

Spyx

That won't quite do what I need. I don't want the column divs to expand, I want them to evenly adjust the space between them to take up the available realestate while keeping their width the same.

Thanks though.

- Butcher -

Butcher, have you tried to use a percentage for your margin-left of the fixed width floated elements then?
/D

<edit> Btw, on another Q of yours, look here http://www.gurusnetwork.com/discussion/thread/3180/ </edit>

{cell 260} {Blog}
-{"Theories without facts are just religions...?}-

(Edited by DmS on 02-21-2006 10:36)

(Edited by DmS on 02-21-2006 10:37)