By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,493 Members | 1,920 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,493 IT Pros & Developers. It's quick & easy.

containers side by side

P: n/a
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
Share this Question
Share on Google+
6 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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.