2 replies [Last post]
toro
Offline
newbie
Dunedin, New Zealand
Last seen: 16 years 16 weeks ago
Dunedin, New Zealand
Joined: 2003-07-02
Posts: 2
Points: 0

Hey everybody.
I'm trying to work out how to do a layout with 2 centered columns.
One is fixed width and one is variable width.
The columns should adjust if the window is resized and cause the window to scroll to the right if the variable width column contains a table that is too wide.
Both columns contain block level elements.
I been trying to get the layout to work in both IE6 and Mozilla.

I've tried having both columns inline. This works in IE but the internal block level elements mean that Mozilla doesn't display the columns side by side. It would work fine in Mozilla if there where no internal block level elements.

I've tried float left, align right and float right, align left. But because I have to specify a percentage width (adding to 100%) to get the columns to meet in the middle I can't get the columns properly centered. Also IE causes one column to jump below the other (when they are wider than the window) instead of scrolling the window to the right as I was hoping. Mozilla scrolls fine.

Any ideas. I could post my code but I have several different versions at the moment and I'm not sure which is the most likely direction.

Thanks in advance.

[img][/img]

paCkeTroUTer
paCkeTroUTer's picture
Offline
Enthusiast
Melbourne, Australia
Last seen: 6 years 23 weeks ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2003-06-27
Posts: 241
Points: 2

2 columns with a twist

Have you experimented with the examples shown here http://www.glish.com/css/ or better still it would be good to post what code you have written so far, so that we can understand your needs.

cheers
Jeffery

http//melbourne.ug.php.net

toro
Offline
newbie
Dunedin, New Zealand
Last seen: 16 years 16 weeks ago
Dunedin, New Zealand
Joined: 2003-07-02
Posts: 2
Points: 0

2 columns with a twist

Sorry about that.
Here's my code.
I'm trying to get the page div to stay to right of the menu and expand if it have long lines with no breaks in them. Rather than the lines jumping down below the menu.

Thanks again
Toro

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<style type="text/css">
#leftside {
margin: 2px;
width: 152px;
border: 2px solid #000;
text-align: center;
float: left;
clear: both;
}
#rightside { margin-top: 25px;
width: 600px;
text-align: left;
margin-right: auto;
margin-left: auto;
border: 2px solid #000;
}
#page { margin: 2px;
border: 2px solid #000;
}
</style>
</head>
<body>
<div id="rightside">
<div id="leftside">
Menu Heading<br>
<br>
<br><br>
Bottom of menu
</div><!-- #leftside -->
Main Heading<br>
<div id="page">
Page Heading
averylonglinewithnobreaksthatidon'twanttojumpdownbelowtheleftmenuifitgetswiderthantheenclosingdiv
</div><!-- #page -->
<br>
</div><!-- #rightside -->
</body>
</html>