Thank you for being a valued part of the CNET community. As of December 1, 2020, the forums are in read-only format. In early 2021, CNET Forums will no longer be available. We are grateful for the participation and advice you have provided to one another over the years.

Thanks,

CNET Support

General discussion

CSS Layout Question

Feb 19, 2007 1:00AM PST

I am designing a template for Joomla! CMS and I need to make a page that stretches with the window. The layout has three columns. I want the left sidebar to be static width, but the other two to be dynamic (i.e. stretch to fill).
I do not want to use tables at all, which is my problem.

Discussion is locked

- Collapse -
card layout
Feb 19, 2007 8:56AM PST

you include the tables, but make the tables invisible. its all in the background.

- Collapse -
Another solution...
Feb 19, 2007 12:46PM PST

Would be to use the div tag for making something similar to a table but not using the table tag.

Regards,
JB

- Collapse -
#dynamic column { width: auto; }
Mar 20, 2007 1:10PM PDT

Couldn't you just put the layout in HTML as a div tag, and then in the css file, put the width of the two dynamic columns as 'auto'? That would stretch those columns to fill.

Hope that helps.

- Collapse -
I actually figured it out...
Mar 20, 2007 11:46PM PDT

The only way to make a content or div fill the space is to tell the side columns to be a static width--

(#sidebar {position: absolute; width: 100px; top:0; left:0;})

and then tell the content column to have a margin of the same amount as the width of the sidebar--

(#content {margin: 0 0 0 100px;})

By doing this, the #content column will automatically stretch to fill the page, but will not put any content where it's margins are defined.

By combining this with some clever PHP code (I borrowed of course), I have managed to have it count the number of "Joomla!" content modules in the sidebar columns so that if there are none, it applies a CSS snippet that resizes the page accordingly.

BTW... two divs existing on the same line with the "width: auto" doesn't work; one always pushes the other underneath it. The only way I know of (besides the way described above) is to give the divs widths that will allow them to all fit on the same line--

#column1 {width: 20%; float: left;}
#column2 {width: 60%; float: left;}
#column3 {width: 20%; float: right;}

OR you can give them static widths (e.g. 100px), but if the page width goes under the cumulative width of your columns, one or more columns will be pushed down.

Hope this is helpful to someone somewhere.

Thanks for you guys' help!