J
John Tennan
Hi,
Have run into a little difficulty. I want to create a 2 colum layout within
a box that is centered. The box is 80% width. The left colum is 200px. The
right colum needs to be dynamic; to fill the rest of the box, but also not
to spill underneath the left colum when the left colum is completed. IE
works okay to leave width off when defining style for right colum, however,
Netscape reacts by forcing the right colum to begin underneath the left
colum (if the left colum divs were created before). I'm using floats at the
moment, but have tried positioning, but makes more complicated and seems
less stable.
If anybody has any ideas on how to achieve this that would be greatly
appreciated. Many thanks in advance.
Cheers John.
Example code is below.
<style>
#box {
width: 80%;
border: 1px solid #CCCCCC;
}
#left_col {
width: 200px;
float: left;
background-color: #0000FF;
}
#right_col {
float: right;
background-color: #FF0000;
}
</style>
</head>
<body>
<center>
<div id="box">
<div id="left_col">Test</div>
<div id="right_col">
<p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test
Test Test Test Test</p>
</div>
<div style="clear: both;"></div>
</center>
</div>
</body>
Have run into a little difficulty. I want to create a 2 colum layout within
a box that is centered. The box is 80% width. The left colum is 200px. The
right colum needs to be dynamic; to fill the rest of the box, but also not
to spill underneath the left colum when the left colum is completed. IE
works okay to leave width off when defining style for right colum, however,
Netscape reacts by forcing the right colum to begin underneath the left
colum (if the left colum divs were created before). I'm using floats at the
moment, but have tried positioning, but makes more complicated and seems
less stable.
If anybody has any ideas on how to achieve this that would be greatly
appreciated. Many thanks in advance.
Cheers John.
Example code is below.
<style>
#box {
width: 80%;
border: 1px solid #CCCCCC;
}
#left_col {
width: 200px;
float: left;
background-color: #0000FF;
}
#right_col {
float: right;
background-color: #FF0000;
}
</style>
</head>
<body>
<center>
<div id="box">
<div id="left_col">Test</div>
<div id="right_col">
<p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test
Test Test Test Test</p>
</div>
<div style="clear: both;"></div>
</center>
</div>
</body>