Hi,
I'm trying to get the following type of layout.
div1 runs text over three lines. I want div2 to abut div1 on it's right. I
want div3 to abut div1 and be under div2. Finally there's div3 which appears
under all this.
The problem I have is that I can't seem to force div3 to align against div1
and stay under div2, regardless of page width - it wants to slide up next to
div2. i'd be happy to fix widths on div1, div2 & 3 etc. to try and get the
right alignment.
This is just an abstraction of a real example where graphics and a menu bar
wont do what I want!
Any ideas? I've added some test html/css below. I tried adding an extra div
to try and constrain div2 & 3 but didn't get the right result - div3 is
being squashed.
Thanks,
Paul
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
#div1 {
float: left;
}
#div2 {
float: left;
}
#div3 {
clear: both;
float: left;
}
#divContent {
clear: both;
float: left;
}
#div23 {
width: 220px;
}
-->
</style>
</head>
<body>
<div id="divHeader">
<div id="div1">DIV1<br>DIV1b<br>DIV1c</div>
<div id="div23">
<div id="div2">Content for id "div2" Goes Here</div>
<div id="div3">Content for id "div3" Goes Here</div>
</div>
</div>
<div id="divContent">Content for class "divContent" Goes Here</div>
</body>
</html>