containers side by side

[Miked]

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]

On 2007-04-16, Miked <mi*************@gmail.comwrote:

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]

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]

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/2co...h-borders.html

--
Berg

[dorayme]

In article <58*************@mid.individual.net>,
Bergamot <be******@visi.comwrote:

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/2co...h-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]

Bergamot wrote:

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/2co...h-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]

zzpat wrote:

Bergamot wrote:

>zzpat wrote:

http://www.bergamotus.ws/samples/2co...h-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...

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