Forum Moderators: not2easy
this is Scalax. I'm trying to do an elastic layout that will resize automatically on windows resize.
I'm using floated divs in a double-column layout.
The left column has a fixed width of 183px while the right column should automatically enlarge itself as the browser window resizes.
By setting the right column width to 100% the floating effect is broken and the right column div automatically appears under the left column.
How can i fix the problem?
This is the simple html code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="left_column">
<div class="logo">$logo</div>
<div class="menu">$menu</div>
</div>
<div class="right_column">
<div class="header">
$header
</div>
<div class="main">
$main
</div>
<div class="footer">
$footer
</div>
</div>
</div>
</body>
</html>
And here goes the current css file
html,body{
height: 100%;
width: 100%;
margin: 0px;
}
body, table, tr, td, div{
font-family: Arial;
}
body{
background-color: #000066;
}
div.container{
height: 100%;
width: 100%;
}
div.left_column{
float:left;
width: 183px;
height: 100%;
}
div.right_column{
float:left;
height: 100%;
width: 1200px;
}
div.logo{
}
div.menu{
}
div.header{
}
div.main{
min-height: 340px;
height: auto !important;
height: 340px;
}
div.footer{
clear: both;
height: 80px;
}
By setting the right column width to 100% the floating effect is broken and the right column div automatically appears under the left column.
The provided markup does not set the right column width to 100%, but to 1200px; (quite wide).
You need neither the float nor the width. Comment out both and the right column will pop into place. (By the way, the markup does work as is - if you've got a screen wide enough and have the browser window stretched wide enough as well.)
div.right_column {
/*float: left;*/
height: 100%;
/*width: 1200px;*/ background-color: teal;
}
You will have to fix the .footer for IE. A positioning option would be my choice in this case.
I changed the following classes in this way:
div.right_column{
/*float:left;*/
height: 100%;
/*width: 1200px;*/ /*This btw was a copy paste error because i was really tired :)*/
}
div.footer{
/*clear: both;*/
height: 80px;
}
And all worked fine thank you very much D_Blackwell.
I have a two column layout and in the right column there is an element that exceeds the browser window size (i'm simulating it with a 1400 pixel wide table).
The right column again goes under the left column on screens that have a smaller resolution. This happens in IE 6.
Here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
html, body{
width: 100%;
height: 100%;
margin: 0;
}
div.container{
background-color: #000;
width: 100%;
height: 100%;
}
div.left{
background-color: #f00;
height: 100%;
width: 183px;
float:left;
}
div.right{
background-color: #00f;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="left">Left</div>
<div class="right">
<table width="1400" border="3">
<tr>
<td>Ciao</td>
</tr>
</table>
</div>
</div>
</body>
</html>
It'll never work properly, unless you define properly.
You're essentially going to fit an overweight elephant in a car. Without knowing how large the car is.
So if it is that rare 18wheeler designed for obese elephants, you'll need to think how you're going to pad the extra space so as not to have space you don't know what to do with.
But also it the car is a pinto, you'll need to figure out how you're going to shoehorn it into the car. And if you then say "can't have the doors bulge out", well then the zookeeper might say the elephant won't fit.
Seriously: 1400px wide content is always going to be a serious issue, no matter how you twist or turn it, adding columns next to that is making it even worse.
There's no way you can show it without creating scrollbars. So ask yourself where you want them. Or you could cut off the bits that don't fit.
Overflow will be your friend:
[w3.org...]
(*) no elephants were harmed n the creation of this reply
The 1400px table was just a way to simulate a block level element with a width that is larger than the current screen resolution width.
My problem is that i have a flash file as header of the website that has a fixed dimension. This is what is causing me this problem.
On a table based layout the cell would have streched to make space to the flash file and an orizontal scroll bar in the browser would have appeared.
Instead the browser with the layout i posted just displays the two divs under each other like it's ignoring the float command.
Do yourself a favor though and do not start out with things like:
html, body{
width: 100%;
height: 100%;
it'll limit you more than help you: just go with the flow and only set widths where you need them (and 100% is almost never the right setting anyway, esp not if you have more than what you have space for).
Take care: IE6 doesn't do min-width, you need to use width in the conditional comment instead, or use an expression depending on the context.
After many testes i just reached the point that i ignore any width for the right column and i let the inner content resize the right column div.
The problem on IE 6 is still present however.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
html, body{
margin: 0;
}
div.container{
background-color: #0f0;
/*width: 100%;*/
}
div.left{
background-color: #f00;
width: 183px;
float:left;
}
div.right{
background-color: #00f;
margin-left: 183px;
}
div.footer{
background-color: #ff0;
clear: both;
}
</style>
<!--[if IE 6]>
<style type="text/css">
div.right{
background-color: #00f;
margin-left: 183px;
}
</style>
<![endif]-->
</head>
<body>
<div class="container">
<div class="left">
Left
<!--
<table width="183" border="0">
<tr>
<td>Left Content</td>
</tr>
</table>
-->
</div>
<div class="right">
<table width="820" border="3">
<tr>
<td>Right Content</td>
</tr>
</table>
</div>
<div class="footer">
Footer text.
</div>
</div>
</body>
</html>
Here is the screenshot of IE 6 on a 1024x768 screen:
<snip>
And here is the screenshot of IE 8 (the resolution is larger so i increased the size of the right content table to 1800 pixel just to cause the browser window's scroll bar to appear)
<snip>
As u can see in IE6 the scroll bar doesn't appear. Instead the right div content starts as soon as the left one "finishes".
edit: in IE 6 if increase the right content table width the browser window's scroll bar will appear but still the table will be displayed in the same position you could see in the screenshot
[edited by: swa66 at 10:08 am (utc) on Oct. 16, 2009]
[edit reason] No links please [/edit]
<head>
.....
<!--[if IE 6]>
<style type="text/css">
div.container{
background-color: #0f0;
width: 100%;
overflow: hidden;
}
div.right{
background-color: #00f;
margin-left: 0px;
width: 920px;
float:left;
}
</style>
<![endif]-->
</head>
