Topic: Float left for column look (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=27496" title="Pages that link to Topic: Float left for column look (Page 1 of 1)" rel="nofollow" >Topic: Float left for column look <span class="small">(Page 1 of 1)</span>\

 
butcher
Paranoid (IV) Inmate

From: New Jersey, USA
Insane since: Oct 2000

IP logged posted posted 02-16-2006 03:20 Edit Quote

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 -

H][RO
Bipolar (III) Inmate

From: Australia
Insane since: Oct 2002

IP logged posted posted 02-16-2006 04:18 Edit Quote

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?

JKMabry
Maniac (V) Inmate

From: raht cheah
Insane since: Aug 2000

IP logged posted posted 02-16-2006 04:36 Edit Quote

^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 =)

H][RO
Bipolar (III) Inmate

From: Australia
Insane since: Oct 2002

IP logged posted posted 02-16-2006 14:56 Edit Quote

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

butcher
Paranoid (IV) Inmate

From: New Jersey, USA
Insane since: Oct 2000

IP logged posted posted 02-16-2006 21:36 Edit Quote

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

code:
.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 -

SPyX
Bipolar (III) Inmate

From: College Station, TX
Insane since: Aug 2002

IP logged posted posted 02-17-2006 02:07 Edit Quote

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

butcher
Paranoid (IV) Inmate

From: New Jersey, USA
Insane since: Oct 2000

IP logged posted posted 02-17-2006 03:26 Edit Quote

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 -

DmS
Maniac (V) Inmate

From: Sthlm, Sweden
Insane since: Oct 2000

IP logged posted posted 02-21-2006 10:34 Edit Quote

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)



Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu