473,708 Members | 2,378 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

How to do a multicolumn layout where the columns size to fit the contents?

Hello,

Sorry if this is covered somewhere, but I've looked at countless sites
explaining how to do multicolumn layouts in CSS, but have yet to find
one that does what I want.

In the old days, I would use something like this (deliberately small
fragment of air code, so no comments about validity please!!) to produce
a two-column layout, where the left column was (say) for site links...

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="top">
<small>
<a href="...">Ferr ets</a>
<br><a href="...">Gibb ons</a>
<br><a href="...">Vole s</a>
</small>
</td>
<td align="left" valign="top">
This is where the main content goes...
</td>
</tr>
</table>

The advantage of this is that the left column would only be wide enough
to fit the links, and the right column would expand to fill the rest of
the window (assuming it had enough content of course).

I have been looking to do such a layout in CSS, but can't see how. All
the examples I've seen use DIVs for the columns, and float them. They
set the width of the left DIV either as a fixed value in pixels, ems,
etc, or as a percentage. Either way, the left column's width is
independent of the contents. If the text of the links are all short,
then you waste space in the left column. If there are long texts, they
overflow the DIV and spill into the right column.

Is there any way to set it so that the left column is only as wide as
needed by the contents, and the right one uses the rest? As I said, I've
searched and searched, I've followed loads of links from posts in this
group, but I've yet to find a layout that is as flexible as the old
table one. I would be very grateful if anyone can point me in the right
direction.

TIA

--
Alan Silver
(anything added below this line is nothing to do with me)
Jan 24 '06 #1
14 1928
Alan Silver wrote:

The advantage of this is that the left column would only be wide enough
to fit the links, and the right column would expand to fill the rest of
the window (assuming it had enough content of course).

I have been looking to do such a layout in CSS, but can't see how. All
the examples I've seen use DIVs for the columns, and float them. They
set the width of the left DIV either as a fixed value in pixels, ems,
etc, or as a percentage. Either way, the left column's width is
independent of the contents. If the text of the links are all short,
then you waste space in the left column. If there are long texts, they
overflow the DIV and spill into the right column.

<http://css-discuss.incutio .com/>
<http://www.csszengarde n.com/>
<http://www.positionise verything.net/>
<http://css.maxdesign.c om.au/>

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Jan 25 '06 #2
Hmm, it seems my reply of two days ago never made it into the newsgroup.
Here goes for a second try...
Thanks for your links Jim, but I've been through those already, and
unless I missed one, none of them do what I want. They all have either
fixed width, or a fixed percentage. I'm looking for a way to have the
left column (DIV) only take as much space as the contents need, and have
the right column take the rest.

If I missed a sample that does that, please could you provide a more
specific link as I couldn't see one.
<http://css-discuss.incutio .com/>
Great site, loads of sample, but all suffer from the problem mentioned.
<http://www.csszengarde n.com/>
Beautiful site, but almost every design fixes the font size and the
width.
<http://www.positionise verything.net/>
Also a great site, but see comments above
<http://css.maxdesign.c om.au/>


I presume you were referring to the floatutorial. Again, AFAICS, no
example of automatic sizing.

It could be that CSS simply isn't up to this yet and I'm going to have
to stick with tables a while longer. If anyone has any idea, please
reply. TIA.

--
Alan Silver
(anything added below this line is nothing to do with me)
Jan 26 '06 #3
Alan Silver schrieb:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="top">
<small>
<a href="...">Ferr ets</a>
<br><a href="...">Gibb ons</a>
<br><a href="...">Vole s</a>
</small>
</td>
<td align="left" valign="top">
This is where the main content goes...
</td>
</tr>
</table> .... Is there any way to set it so that the left column is only as wide as
needed by the contents, and the right one uses the rest?
Your table-solution doesn't fit your description, the link-column
is maybe at about 20% for me. Try to understand floating and div and
you get exactly what you want:

<div>
<!-- floating always reduces the div to the minimum needed size! it's
automatically 'display: inline;' -->
<div style="float: left;">
<small>
<a href="...">Ferr ets</a><br/>
<a href="...">Gibb ons</a><br/>
<a href="...">Vole s</a>
</small>
</div>
<!-- nothing always expands the div to the maximum available size!
that is the default behaviour of every unstyled div -->
<div style="">
This is where the main content goes...
</div>
<!-- stop making garbage with the following content -->
<div style="clear: both;" />
</div>
abc
TIA


Niels

Jan 26 '06 #4
Alan Silver wrote:

Thanks for your links Jim, but I've been through those already, and
unless I missed one, none of them do what I want. They all have either
fixed width, or a fixed percentage. I'm looking for a way to have the
left column (DIV) only take as much space as the contents need, and have
the right column take the rest.

Hmm. There is the float suggestion by Niels. That would work.
You could also try display: table-cell. I do not know if IE supports
that, though.
--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Jan 26 '06 #5
<snip>
Is there any way to set it so that the left column is only as wide as
needed by the contents, and the right one uses the rest?
Your table-solution doesn't fit your description, the link-column
is maybe at about 20% for me.


If you add more text to the main content part then it will shrink the
link column down to just the size needed. I didn't bother adding that
in, so as not to fill the post with unnecessary text.
Try to understand floating and div and
you get exactly what you want:

<snip>

Thanks for the sample, it isn't bad, but isn't actually what I wanted.

The sample I posted (with the table) would have a left column that is as
long as the right column. The one you posted floats the left column at
the top left of the containing DIV, allowing the contents of the main
column to expand out under the links. I was looking for something that
would mimic the table layout, where the two columns fill the full
vertical space used.

I tried adding style="float:ri ght;" to the main content div, which gave
something a lot closer to what I wanted in IE, but put the div *below*
the links on in Firefox, so still no joy ;-(

Thanks for the reply. If you have any further suggestions, please do so.

--
Alan Silver
(anything added below this line is nothing to do with me)
Jan 26 '06 #6
>> Thanks for your links Jim, but I've been through those already, and
unless I missed one, none of them do what I want. They all have either
fixed width, or a fixed percentage. I'm looking for a way to have the
left column (DIV) only take as much space as the contents need, and have
the right column take the rest.
Hmm. There is the float suggestion by Niels. That would work.


Unfortunately not, see my reply to him.
You could also try display: table-cell. I do not know if IE supports
that, though.


I just did a quick search, and apparently it doesn't.

Thanks for the reply anyway. Any further suggestions greatly welcome.

--
Alan Silver
(anything added below this line is nothing to do with me)
Jan 26 '06 #7
ni************* @seies.de wrote:

<!-- floating always reduces the div to the minimum needed size!


FYI, if the browser follows the CSS 2.0 spec, an explicit width is
required for non-replaced elements. It will default to 100% width if
none is specified. MacIE falls into this category. Most current browsers
follow the 2.1 spec, which allows for "shrink-wrapping".

I realize MacIE is a dead browser, but it is an exception to your
"always" rule. A graceful fallback for non-supporting browsers is always
A Good Thing.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jan 26 '06 #8
> I tried adding style="float:ri ght;" to the main content div, which gave
something a lot closer to what I wanted in IE, but put the div *below*
the links on in Firefox, so still no joy ;-(


<div>
<div style="float: left;">
Menu
</div>
<div style="float: right;">
This is where the main content goes...
This is where the main content goes...
</div>
<!-- this little space works wonders ;-) you can
even setup 'font-size: 1px;' for making it smaller
or using another element -->
&nbsp;
<div style="clear: both;" />
abc
</div>

Ciao
Niels

Jan 26 '06 #9
No that was a too fast a shoot. ;)
Niels

Jan 26 '06 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

47
9145
by: Neal | last post by:
Patrick Griffiths weighs in on the CSS vs table layout debate in his blog entry "Tables my ass" - http://www.htmldog.com/ptg/archives/000049.php . A quite good article.
7
3661
by: Drew Martin | last post by:
The page at the below URL renders perfectly in IE6, but is failing horribly in Firefox (0.7, 0.8). I can't figure out why and was hoping someone could take a quick look at it. Most of the layout is done through the use of floats. HTML file: http://superdisco.net/css/index.html CSS file: http://superdisco.net/css/sd.css The gray and maroon backgrounds are to highlight the layout used.
5
3069
by: Thomas F.O'Connell | last post by:
We've got a table that has a definition as follows: CREATE TABLE linking_table ( fk int8 REFERENCES source_table( pk1 ), value int8, PRIMARY KEY( fk1, value ) ); I would've thought that the multicolumn primary key would behave as a multicolumn index is supposed to behave per
7
6118
by: Paul Bromley | last post by:
How can I use this please - I need 2 columns. I have been having difficulty finding info on this and the 2005 Treeview control today. Many thanks for any links or info, Paul Bromley
5
633
by: Stephen Poley | last post by:
There are plenty of people around these groups who promote the idea of flexible page design. However, while employing relative units and not fixing column-widths is a big improvement on fixed-pixel layouts, it isn't really enough IMHO. In principle the user can indeed set his window-size to what he wants, and sites will then adjust to that. The adjustment will however not be optimal for all sites. The problem becomes evident if one...
10
4045
by: Rob | last post by:
VS 2005 How can you tell if a value is contained in a specific column (let's say column 1 named Status) of a ListView ? In a list box you could go... If ListBox1.Items.Contains(strWhatever) then How would you accomplish this using a ListView ?
1
1413
by: brixton | last post by:
Hey, I'm trying to make a 3-column layout with CSS and specifying the width of each column in %, not in px (it's a school thing and I'm required to do this). Say it looks like this: div#col1 { float:left; width:20%;
5
17751
by: WRH | last post by:
Hello I want to have a multicolumn listbox. I never used one before so I looked at a Help example. I set the multicolumn property and the column width and tested with this example... this.listBox3.Items.AddRange(new object { "Item 1, column 1", "Item 2, column 1", "Item 3, column 1",
3
5640
balabaster
by: balabaster | last post by:
Hey guys and gals, I'm not sure if this is the simplest way to do this or if someone can throw any other ideas out there. I'm looking to build a treeview inside a listbox...or have a multicolumn treeview. Having done some research it seems there was some rather extensive and laborious methods for achieving such an effect in VB6 but none of them satisfactory and the only method I can find that looks anywhere near like it might possibly be...
0
8787
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8697
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9001
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7921
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6615
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5939
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4712
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
2508
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2096
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.