This is Interesting: Free Magazines for Graphics designers and webmasters  


Home > Archive > Stylesheets > April 2007 > containers side by side





You are viewing an archived Text-only version of the thread. To view this thread in it's original format and/or if you want to reply to this thread please [click here]

Author containers side by side
Miked

2007-04-16, 6:18 pm

Hello:

I've put a post up previously asking how to position containers. I
wanted to ask this question theoretically to see what folks think is
the optimal way.

If I have a container, and I then have 2 sub-containers inside of this
larger container, what is the best way to I naturally position them
side-by side - without position: absolute, so that they can grow down
when the content inside the containers grows. So the question is in
general, what's the best way to position columns side by side that
doesn't require absolute.

Thanks very much in advance!

Mike

Ben C

2007-04-16, 6:18 pm

On 2007-04-16, Miked <mike.dershowitz@XXXXXXXXXX> wrote:
> Hello:
>
> I've put a post up previously asking how to position containers. I
> wanted to ask this question theoretically to see what folks think is
> the optimal way.
>
> If I have a container, and I then have 2 sub-containers inside of this
> larger container, what is the best way to I naturally position them
> side-by side - without position: absolute, so that they can grow down
> when the content inside the containers grows. So the question is in
> general, what's the best way to position columns side by side that
> doesn't require absolute.


Make each column float: left, or use a table. Which is best? Depends on
the details of what you need.
zzpat

2007-04-16, 6:18 pm

Miked wrote:
> Hello:
>
> I've put a post up previously asking how to position containers. I
> wanted to ask this question theoretically to see what folks think is
> the optimal way.
>
> If I have a container, and I then have 2 sub-containers inside of this
> larger container, what is the best way to I naturally position them
> side-by side - without position: absolute, so that they can grow down
> when the content inside the containers grows. So the question is in
> general, what's the best way to position columns side by side that
> doesn't require absolute.
>
> Thanks very much in advance!
>
> Mike
>



If your containers have unequal lengths (most likely) use a table. You
can use some tricks to make floats work but if you're trying to float an
entire column you'll have problems getting the background colors to
extend to the end of the column unless you use a background image.

On the other hand if you're working with images and text, use float.
Images have defined widths and heights so they're easy to float but
calculating the height of a block of text is impossible.

I'd use a table.

Bergamot

2007-04-16, 6:18 pm

zzpat wrote:
>
> You
> can use some tricks to make floats work but if you're trying to float an
> entire column you'll have problems getting the background colors to
> extend to the end of the column unless you use a background image.


It's easier than you think. Use borders, floats and negative margins.
http://www.bergamotus.ws/samples/2c...th-borders.html

--
Berg
dorayme

2007-04-16, 6:18 pm

In article <58hub7F2gd1mvU1@mid.individual.net>,
Bergamot <bergamot@visi.com> wrote:

> zzpat wrote:
>
> It's easier than you think. Use borders, floats and negative margins.
> http://www.bergamotus.ws/samples/2c...th-borders.html


This is clever and as far as I see, good.

A lot of trouble can go into the requirement to have cols look
the same height. It is liberating and makes things much simpler
not to require such. This is not a criticism of the example above.

--
dorayme
zzpat

2007-04-16, 10:17 pm

Bergamot wrote:
> zzpat wrote:
>
> It's easier than you think. Use borders, floats and negative margins.
> http://www.bergamotus.ws/samples/2c...th-borders.html
>



It's an interesting approach but it has limits. Adding a border to
..content when .navbar is longer causes a collapse of sorts...

..contents "bottom border" isn't 100%, but the trick (hack) seems to work
except for the above limitation. I'd have to test it further to find
other flaws.
Bergamot

2007-04-17, 6:28 pm

zzpat wrote:
> Bergamot wrote:
>
> It's an interesting approach but it has limits. Adding a border to
> .content when .navbar is longer causes a collapse of sorts...


Then you add another container and put the border on that. See the
Ruthsarian layouts I linked to. They have a more complex layout with
added borders on just about everything.

I used to point people there all the time, but they seemed overwhelmed
by it so I made a simpler version just to show the basic technique. It
works, and it works well.

--
Berg
Sponsored Links


Copyright 2003 - 2008 forum4designers.com  Software forum  Computer Hardware reviews