Hi,
I'm trying to get a layout with an image on the left running down the side of the screen (1), two horizontal columns floated to the left (2) and (3) and then, underneath them a vertical nav bar (4) followed by the main content (5) to its right.
Anyhow, I can get the left image and the top two bars ok, but everything is fixed width - the top two bars are 700px and the left image is 80px. The problem is, the sideNav is 150px and anyone running a sensible resolution (>=1024px) has the sideNav(4) snap up and float next to the second horizontal bar (3), instead of the image (1).
I can kind of hack it with another div after 3, but this needs height and everything specifying and I want the layout to be more flexible than that (oh yeah, the top top bar (2) is an image and the one below that (3) is text).
So, basically, how can I ensure that the sidenav always comes down next to the left image, rather than floating next to the text above it. I'm sure there must be a really simple answer, but so far I've not figured it out - d'oh!
Thanks in advance,
Mat<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Layout css</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body {
margin:0;
margin-left:70px;
padding:0;
background:#ccc url(../Images/SideImage.gif) repeat-y;
}
#container {
width:700px;
}
#nav, #content {
float:left;
}
#nav {
width:150px;
}
-->
</style>
</head>
<body>
<div id="container">
<img alt="oosterduin (16K)" src=http://www.webdeveloper.com/forum/archive/index.php/"../Images/BannerImage.gif" height="100" width="700" />
<p>TEXT</p>
<div id="nav">NAV</div>
<div id="content">CONTENT</div>
</div>
</body>
</html>
I'm trying to get a layout with an image on the left running down the side of the screen (1), two horizontal columns floated to the left (2) and (3) and then, underneath them a vertical nav bar (4) followed by the main content (5) to its right.
Anyhow, I can get the left image and the top two bars ok, but everything is fixed width - the top two bars are 700px and the left image is 80px. The problem is, the sideNav is 150px and anyone running a sensible resolution (>=1024px) has the sideNav(4) snap up and float next to the second horizontal bar (3), instead of the image (1).
I can kind of hack it with another div after 3, but this needs height and everything specifying and I want the layout to be more flexible than that (oh yeah, the top top bar (2) is an image and the one below that (3) is text).
So, basically, how can I ensure that the sidenav always comes down next to the left image, rather than floating next to the text above it. I'm sure there must be a really simple answer, but so far I've not figured it out - d'oh!
Thanks in advance,
Mat<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Layout css</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body {
margin:0;
margin-left:70px;
padding:0;
background:#ccc url(../Images/SideImage.gif) repeat-y;
}
#container {
width:700px;
}
#nav, #content {
float:left;
}
#nav {
width:150px;
}
-->
</style>
</head>
<body>
<div id="container">
<img alt="oosterduin (16K)" src=http://www.webdeveloper.com/forum/archive/index.php/"../Images/BannerImage.gif" height="100" width="700" />
<p>TEXT</p>
<div id="nav">NAV</div>
<div id="content">CONTENT</div>
</div>
</body>
</html>