Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

css dynamic width columns (no percentages)

Status
Not open for further replies.
Borvik

Borvik

Programmer
Jan 2, 2002
1,392
US
Hey all,

Here is a puzzle for you:

I'm working on a css site design, and am having troubles getting the columns to work correctly. I currently have the site using tables, and want to do away with them except for tabular data.

It has a header that spans the full width of the page.
A navigation pane (<nobr>) on the left side of the page.
A main pane (navigation -> right side of the page).
The main pane cannot wrap around the navigation pane.

The navigation pane is <nobr> to keep the links (product groups) from using multiple lines. The links are built dynamically from a server side script so the width of the navigation pane is not static.

The main pane should be centered within the rest of the page (100% - nav pane width). This could be accomplished one of two ways (that I can see): one - center the div within that space, or two - expand the div to fill the space, and center the content.

Here is the html/css code I've gotten so far (colors for visibility/placement testing):

Code: 
<html>
<head>
</head>
<body style="padding: 0px; margin: 0px;">
<div style="background: #F0F; height: 106px;">Header</div>
<div style="background: #00F; width: 100%;">
	<div style="float: left; margin-top: 5px; background: #F00;">Navigation</div>
	<div style="float: left; margin-top: 5px; background: #0F0;">other data<br>data<br>data<br>data<br>data<br>data<br>data<br>data<br>data<br>
data<br>data<br>data<br>data<br>data<br>data<br>data<br>data<br>data<br>
data<br>data<br>data<br>data<br>data<br>data<br>data<br>data</div>
</div>
</body>
</html>

Thanks!
 
Sort by date Sort by votes
Basically - I'm having trouble with the layout.

The other div (the one with all the data<br> s) needs to either fill the remaining space (which it doesn't), or needs to be centered within the remaining space which it's not (I know float: left, won't help that, but it's what I have at the moment).

I can't seem to figure it out at the moment, and I'm hoping someone will be able to help me figure it out.
 
Upvote 0 Downvote
Oops, sorry. I have tested it with a DOCTYPE, just copied the wrong version. This is the doctype I've been using:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
 
Upvote 0 Downvote
Basically what I'm hoping for is the red navigation section to be able to spring to fit it's contents, thus pushing the green main body section completely over (not wrapped around the navigation box).

I could easily achieve this with tables, but I really don't want to do it unless I have no other choice.
 
Upvote 0 Downvote
Unfortunately no... they both have the width's specified as percentages. With my navigation using nobr, and being of undetermined width, I can't specify a width.
 
Upvote 0 Downvote
I don't know if you've already solved this problem, but I have a solution. But it requires your two navigation columns to have fixed widths.

you need to set margin-right and margin-left on the center div to the widths of the divs either side. You should be able to get away with just margin-right, and may have to take into account any margins/padding on the left and right divs.

The code below works perfectly in Firefox, Mozilla, and Epiphany (I'm a linux user so haven't tested IE)

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html>
<head>
<title>3 Column Layout</title>
<style>

div
{
	border: solid 1px #000;
}

#left
{
	width: 200px;
	float: left;
}

#center
{
	margin-left: 200px;
	margin-right: 200px;
}

#right
{
	width: 200px;
	float: right;
}

</style>
</head>
<body>

<div>
Heading
</div>

<div id="left">
Left Column
</div>

<div id="right">
Right Column
</div>

<div id="center">
Center Column
</div>

</body>
</html>

And yes, the right column tags have to come above the center column tags.

Hope it helps! I've just spent ages looking for the same thing.
 
Upvote 0 Downvote
Oh, and if you don't want the left hand navigation column, remove the div tags, the #left section, and the margin-left line from #center, like so:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html>
<head>
<title>3 Column Layout</title>
<style>

div
{
	border: solid 1px #000;
}

#center
{
	margin-right: 200px;
}

#right
{
	width: 200px;
	float: right;
}

</style>
</head>
<body>

<div>
Heading
</div>

<div id="right">
Right Column
</div>

<div id="center">
Center Column
</div>

</body>
</html>
 
Upvote 0 Downvote
Thanks for the code Andeee, but for my navigation pane I unfortunately don't know what width I'm going to need. The navigation pane is going to be the names of groups of items (pulled from a database). Before the navigation pane can even be seen - the user must login, as the website is customized to show just the items (and the groups those items belong to) to the user. As the group name widths are completely dynamic (can be added to and removed from freely), I can't set the width of the navigation pane.

It's looking like I'll have to use a table for this (eck, I know tables for layout, but it looks like this is one area where CSS is lacking).

Thanks for the suggestions.
 
Upvote 0 Downvote
Yeah i know the feeling, It's even worse trying to get the pages to display properly in all browsers.

All the options to do it are in css, but none of them are implemented correctly unfortunaetly.

There is another way mind, to do it, you don't define the center column:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html>
<head>
<style>

div
{
    border: solid 1px #000;
}

#right
{
    width: 200px;
    float: right;
    /* only needed if you f=don't want the text to wrap */
    height: 100%;
}

</style>
</head>
<body>

<div>
Heading
</div>

<div id="right">
Right Column
</div>

<!--page content here! -->

</body>
</html>

The only limitation of this is you cant use block-level elemnts such as div's in the main page content because they will overlap.
 
Upvote 0 Downvote
Yea, and I can't center the content properly either. Hopefully we'll see some changes in the "browser wars" that will bring these specifications across to the multiple browser's and make the developer's job easier.
 
Upvote 0 Downvote
Hey!

I found a css solution!

The key with the solution was the following CSS declarations: overflow: auto, height: auto !important, and height: 1% (this last one for IE, although may be fixed in IE7 - I didn't try it without either of them).

Here's the full code (tested in FireFox, IE7 beta 3, and IE6):

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html>
<head>
</head>
<body style="padding: 0px; margin: 0px;">
<div style="background: #F0F; height: 106px;">Header</div>
<div style="float: left; margin-top: 5px; background: #F00;">Navigation</div>
<div style="margin-top: 5px; background: #0F0;overflow: auto;height: auto !important;height: 1%;">other
   data<br>data<br>data<br>data<br>data<br>data<br>data<br>
   data<br>data<br>data<br>data<br>data<br>data<br>data<br>
   data<br>data<br>data<br>data<br>data<br>data<br>data<br>
   data<br>data<br>data<br>data<br>data</div>
</body>
</html>

Cheer!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
651
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
533
PeDa
PeDa
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
689
spamjim
spamjim
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
566
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top