467,910 Members | 1,774 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,910 developers. It's quick & easy.

containers side by side

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

Apr 16 '07 #1
  • viewed: 3788
Share:
6 Replies
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.
Apr 16 '07 #2
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.

Apr 16 '07 #3
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
Apr 16 '07 #4
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
Apr 16 '07 #5
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.
Apr 17 '07 #6
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
Apr 17 '07 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Catherine Lynn Smith | last post: by
14 posts views Thread by phil_gg04 | last post: by
18 posts views Thread by Matthias Kaeppler | last post: by
1 post views Thread by Jean-Marc Blaise | last post: by
35 posts views Thread by dragoncoder | last post: by
15 posts views Thread by Nindi73 | last post: by
21 posts views Thread by George Exarchakos | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.