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

[Q] Two Column Layout - right column relative to left

P: n/a
I would like to setup a two column layout for my web page using CSS.

I would like the Left column width to be auto.

Can I have the right column be offset by 8 pixels from the right edge of
the left column?

If so, how can I specify this?

--
== Eric Gorr ========= http://www.ericgorr.net ========= ICQ:9293199 ===
"Therefore the considerations of the intelligent always include both
benefit and harm." - Sun Tzu
== Insults, like violence, are the last refuge of the incompetent... ===
Jul 20 '05 #1
Share this Question
Share on Google+
9 Replies


P: n/a
On Mon, 20 Oct 2003 02:57:58 GMT, eg*************@verizon.net (Eric)
wrote:
I would like to setup a two column layout for my web page using CSS.

I would like the Left column width to be auto.

Can I have the right column be offset by 8 pixels from the right edge of
the left column?

If so, how can I specify this?


Yes. Depending on exactly what effect you are looking for (what do you
want to see between the columns?), you can use padding, margin or border
to achieve this.

This may help: http://www.xs4all.nl/~sbpoley/webmatters/layout3.html
If you want the left column to have automatic width, you will need to do
a mirror-image version.

Are you sure you want 8 pixels BTW? It's likely that using em units
will scale better to very large screens.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #2

P: n/a
Stephen Poley <sb******************@xs4all.nl> wrote:
On Mon, 20 Oct 2003 02:57:58 GMT, eg*************@verizon.net (Eric)
wrote:
I would like to setup a two column layout for my web page using CSS.

I would like the Left column width to be auto.

Can I have the right column be offset by 8 pixels from the right edge of
the left column?

If so, how can I specify this?
Yes. Depending on exactly what effect you are looking for (what do you
want to see between the columns?), you can use padding, margin or border
to achieve this.


Don't know...at the moment, it really doesn't matter.
This may help: http://www.xs4all.nl/~sbpoley/webmatters/layout3.html
If you want the left column to have automatic width, you will need to do
a mirror-image version.
I will take a closer look at this. It does look promising.
Are you sure you want 8 pixels BTW? It's likely that using em units
will scale better to very large screens.


Thanks for the tip. I will probably use em units then. My choice of
pixels was mostly arbitrary.

--
== Eric Gorr ========= http://www.ericgorr.net ========= ICQ:9293199 ===
"Therefore the considerations of the intelligent always include both
benefit and harm." - Sun Tzu
== Insults, like violence, are the last refuge of the incompetent... ===
Jul 20 '05 #3

P: n/a
Stephen Poley <sb******************@xs4all.nl> wrote:
On Mon, 20 Oct 2003 02:57:58 GMT, eg*************@verizon.net (Eric)
wrote:
I would like to setup a two column layout for my web page using CSS.

I would like the Left column width to be auto.

Can I have the right column be offset by 8 pixels from the right edge of
the left column?

If so, how can I specify this?
Yes. Depending on exactly what effect you are looking for (what do you
want to see between the columns?), you can use padding, margin or border
to achieve this.

This may help: http://www.xs4all.nl/~sbpoley/webmatters/layout3.html


I've taken a closer look at that and, unless I am missing something,
neither the right or the left column have an auto width based on content
alone.

The width of the columns are based on:

margin: 0 0 0 10em

in #content

Any more suggestions?

--
== Eric Gorr ========= http://www.ericgorr.net ========= ICQ:9293199 ===
"Therefore the considerations of the intelligent always include both
benefit and harm." - Sun Tzu
== Insults, like violence, are the last refuge of the incompetent... ===
Jul 20 '05 #4

P: n/a
On Tue, 21 Oct 2003 03:49:26 GMT, eg*************@verizon.net (Eric)
wrote:
Stephen Poley <sb******************@xs4all.nl> wrote:
On Mon, 20 Oct 2003 02:57:58 GMT, eg*************@verizon.net (Eric)
wrote:
>I would like to setup a two column layout for my web page using CSS.
>
>I would like the Left column width to be auto.
This may help: http://www.xs4all.nl/~sbpoley/webmatters/layout3.html


I've taken a closer look at that and, unless I am missing something,
neither the right or the left column have an auto width based on content
alone.


You'll need to do a bit of reading up on the CSS box model, but
basically the width of an element is auto until it is specified to be
something else.

Adjust your window width with my example and you'll see the column width
adjust accordingly.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #5

P: n/a
Stephen Poley <sb*****@xs4all.nl> wrote:
On Tue, 21 Oct 2003 03:49:26 GMT, eg*************@verizon.net (Eric)
wrote:
Stephen Poley <sb******************@xs4all.nl> wrote:
On Mon, 20 Oct 2003 02:57:58 GMT, eg*************@verizon.net (Eric)
wrote:

>I would like to setup a two column layout for my web page using CSS.
>
>I would like the Left column width to be auto. This may help: http://www.xs4all.nl/~sbpoley/webmatters/layout3.html


I've taken a closer look at that and, unless I am missing something,
neither the right or the left column have an auto width based on content
alone.


You'll need to do a bit of reading up on the CSS box model, but
basically the width of an element is auto until it is specified to be
something else.

Adjust your window width with my example and you'll see the column width
adjust accordingly.


Right, but that is not what I want.

To be more clear, change the text:

Web Matters Index

to

Web Matters Index now this is even longer

I would want the left hand column to automatically become wider to
contain this single line of text. Unfortunately, what happens is that
the text leaks into the right hand column.

--
== Eric Gorr ========= http://www.ericgorr.net ========= ICQ:9293199 ===
"Therefore the considerations of the intelligent always include both
benefit and harm." - Sun Tzu
== Insults, like violence, are the last refuge of the incompetent... ===
Jul 20 '05 #6

P: n/a
On Tue, 21 Oct 2003 13:55:08 GMT, eg*************@verizon.net (Eric)
wrote:
Stephen Poley <sb*****@xs4all.nl> wrote:
On Tue, 21 Oct 2003 03:49:26 GMT, eg*************@verizon.net (Eric)
wrote:
>Stephen Poley <sb******************@xs4all.nl> wrote:
>
>> On Mon, 20 Oct 2003 02:57:58 GMT, eg*************@verizon.net (Eric)
>> wrote:
>>
>> >I would like to setup a two column layout for my web page using CSS.
>> >
>> >I would like the Left column width to be auto.

>> This may help: http://www.xs4all.nl/~sbpoley/webmatters/layout3.html
>
>I've taken a closer look at that and, unless I am missing something,
>neither the right or the left column have an auto width based on content
>alone.


You'll need to do a bit of reading up on the CSS box model, but
basically the width of an element is auto until it is specified to be
something else.

Adjust your window width with my example and you'll see the column width
adjust accordingly.


Right, but that is not what I want.

To be more clear, change the text:

Web Matters Index

to

Web Matters Index now this is even longer

I would want the left hand column to automatically become wider to
contain this single line of text. Unfortunately, what happens is that
the text leaks into the right hand column.


As I explained before, in my example it is the right column that is
flexible; if you want the left column to be flexible, just create a
mirror-image version.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #7

P: n/a
Stephen Poley <sb*****@xs4all.nl> wrote:
On Tue, 21 Oct 2003 13:55:08 GMT, eg*************@verizon.net (Eric)
wrote:
Stephen Poley <sb*****@xs4all.nl> wrote:
On Tue, 21 Oct 2003 03:49:26 GMT, eg*************@verizon.net (Eric)
wrote:

>Stephen Poley <sb******************@xs4all.nl> wrote:
>
>> On Mon, 20 Oct 2003 02:57:58 GMT, eg*************@verizon.net (Eric)
>> wrote:
>>
>> >I would like to setup a two column layout for my web page using CSS.
>> >
>> >I would like the Left column width to be auto.

>> This may help: http://www.xs4all.nl/~sbpoley/webmatters/layout3.html
>
>I've taken a closer look at that and, unless I am missing something,
>neither the right or the left column have an auto width based on content
>alone.

You'll need to do a bit of reading up on the CSS box model, but
basically the width of an element is auto until it is specified to be
something else.

Adjust your window width with my example and you'll see the column width
adjust accordingly.


Right, but that is not what I want.

To be more clear, change the text:

Web Matters Index

to

Web Matters Index now this is even longer

I would want the left hand column to automatically become wider to
contain this single line of text. Unfortunately, what happens is that
the text leaks into the right hand column.


As I explained before, in my example it is the right column that is
flexible; if you want the left column to be flexible, just create a
mirror-image version.


The right column is _NOT_ flexible, in terms of width, based on content,
which is what I am looking for.

It is flexible based on window size and font size, which is not what I
am looking for.

For example, if I were to add breaks in the text that appears in the
right hand column such that each word was on a different line, the right
column would maintain the same width given the same window and font
size. This is not what I am looking for...what I would be looking for is
for the right column to be only wide enough for the text it contains.

Do you understand now?

--
== Eric Gorr ========= http://www.ericgorr.net ========= ICQ:9293199 ===
"Therefore the considerations of the intelligent always include both
benefit and harm." - Sun Tzu
== Insults, like violence, are the last refuge of the incompetent... ===
Jul 20 '05 #8

P: n/a
On Tue, 21 Oct 2003 14:27:06 -0400, eg*************@verizon.net (Eric)
wrote:
Stephen Poley <sb*****@xs4all.nl> wrote:

As I explained before, in my example it is the right column that is
flexible; if you want the left column to be flexible, just create a
mirror-image version.


The right column is _NOT_ flexible, in terms of width, based on content,
which is what I am looking for.

It is flexible based on window size and font size, which is not what I
am looking for.

For example, if I were to add breaks in the text that appears in the
right hand column such that each word was on a different line, the right
column would maintain the same width given the same window and font
size. This is not what I am looking for...what I would be looking for is
for the right column to be only wide enough for the text it contains.

Do you understand now?


OK. You originally said you wanted the width to be "auto", which is a
CSS term describing how my right column operates, so I thought that was
what you wanted.

I think what you are asking for can probably only be done with a table.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #9

P: n/a
Stephen Poley <sb*****@xs4all.nl> wrote:
OK. You originally said you wanted the width to be "auto", which is a
CSS term describing how my right column operates, so I thought that was
what you wanted.

I think what you are asking for can probably only be done with a table.


This is what I was thinking as well.

Something like this _almost_ works...

<html>
<head>
<title>My CSS Test</title>
<style TYPE="text/css">
#menu { background:#cccccc; float: left; width: auto; }
</STYLE>
</head>
<body>
<div id=menu>
Menu Item<br>
a long menu item<br>
</div>
<div>
more stuff<br>
more stuff<br>
more stuff<br>
more stuff<br>
more stuff<br>
more stuff<br>
</div>
</body>
</html>

But, of course, when 'more stuff' extends below the menu div, it wraps
underneath it.

Stuff I've been playing with...

An attempt to solve this might involve:

#menu { background:#cccccc; float: left; height: 100em; width: auto; }

But, of course, 'height: 100em;' would largely be arbitrary, unless
there was a way to detect the height of the 'more stuff' div and set it
accordingly.

Another method to solve the problem, involved:

#menu { background:#cccccc; float: left; width: auto; }

AND

<div>
<table>
<tr><td>more stuff<br>
more stuff<br>
more stuff<br>
more stuff<br>
more stuff<br>
more stuff<br></td></tr>
</table>
</div>
Basically creating a single table for the right column. This would,
again, work better if there was a way to know the height of the table
and then be able to set the height of the menu div accordingly.
Any other ideas? Any obvious, insurmountable, problems with the
solutions to what I mentioned above that I didn't already cover?


--
== Eric Gorr ========= http://www.ericgorr.net ========= ICQ:9293199 ===
"Therefore the considerations of the intelligent always include both
benefit and harm." - Sun Tzu
== Insults, like violence, are the last refuge of the incompetent... ===
Jul 20 '05 #10

This discussion thread is closed

Replies have been disabled for this discussion.