PDA

View Full Version : Having some positioning problems with DIVs

dwight
01-18-2007, 09:04 AM
This is a problem I've had a few times before and I've just not bothered about it and changed my design, but I'm currently working on a site I can't change the design of and I really need to sort this glitch out.

HTML Code:

<div id="header">
<div id="LEFT" style="float:left;width:100px;">LEFT</div>
<div id="RIGHT" style="float:right;width:100px;">RIGHT</div>
</div>

<div id="content">Blah, blah, blah"</div>

Now what I want this to come out as (sorry about the dodgy sketching) is:

LEFT RIGHT
Blah, blah, blah

Instead, the "blah" likes to jump in the middle between the two floating divs, ie:

LEFT Blah, bl RIGHT
ah, blah

Anyone know how to sort this out, and to keep the CONTENT div staying down below where it should be? (I wanted to search Google and forums for this but am unsure what this problem would be called...)
ahallicks
01-18-2007, 09:11 AM
Ermmm wouldn't putting:

<div id="header">
<div id="LEFT" style="float:left;width:100px;">LEFT
<p><div id="content">Blah, blah, blah"</div></p></div>
<div id="RIGHT" style="float:right;width:100px;">RIGHT</div>
</div>

that work?
Excavator
01-18-2007, 09:26 AM
Hello dwight,
You need to apply some styling to #header and #content or they will just flow how they want.
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#header {
width: 100%;
}
#left {
width: 100px;
float: left;
}
#right {
width: 100px;
float: right;
}
#content {
width: 100%;
clear: both;
}
</style>
</head>
<body>
<div id="header">
<div id="left">LEFT</div>
<div id="right">RIGHT</div>
</div>
<div id="content">Blah, blah, blah"</div>
</body>
</html>
dwight
01-18-2007, 10:23 AM
Hey, thanks so much for the quick response.

I implemented these new stylings and it sorts the problem out in IE whilst Firefox appears to have made no change whatsoever.

Any other ideas would be greatly appreciated.
Graft-Creative
01-18-2007, 11:16 AM
Like this?


<div id="header">
<div id="LEFT" style="float:left;width:100px;">LEFT</div>
<div id="RIGHT" style="float:left;width:100px;">RIGHT</div>
</div>

<div id="content" style="clear: both;">Blah, blah, blah"</div>


Gary
dwight
01-18-2007, 12:10 PM
Thank you so much! That did it... what a useful attribute to remember.