PDA

View Full Version : This is about as simple as it comes, but I still don't get it.

effpeetee
06-25-2008, 04:52 PM
This is about as simple as it comes, but I still don't get it.
Why is div three underneath? I am obviously missing something basic here. Three columns with plenty of space but refuse to go laterally.:mad:

It's not just the code that I need. I need to know why.

Frank

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">

html body{
height:100%;
width:100%;
}


#one{
float:left;
height:500px;
width:200px;
border:2px solid red;
}

#two{
margin:0 auto;
height:500px;
width:200px;
border:2px solid green;
}

#three{clear: both;
float:right;
height:500px;
width:200px;
border:2px solid black;
}


</style>
</head>

<body>
<div id="one">11111111111111</div>
<div id="two">22222222222222</div>
<div id="three">33333333333333</div>
</body>

</html>
gnomeontherun
06-25-2008, 04:56 PM
You are clearing the float, and since #two has no float it would also force it down since it is a block element.
effpeetee
06-25-2008, 05:18 PM
You are clearing the float, and since #two has no float it would also force it down since it is a block element.
I have tried every combination of float, clear and display that I can think of, ALL without success.

EDIT: At last the penny has dropped.

I had the div's in the wrong order in the html. YUK!

But I'd still like to know why this order is required.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">

*{
padding:0;
margin:0;
border:0;
}


html body{
height:100%;
width:100%;
}


#one{
float:left;
height:500px;
width:200px;
border:2px solid red;
}

#two{
margin:0 auto;
height:500px;
width:200px;
border:2px solid green;
}

#three{
float:right;
height:500px;
width:200px;
border:2px solid black;
}


</style>
</head>

<body>
<div id="one">11111111111111</div>
<div id="three">33333333333333</div>
<div id="two">22222222222222</div>

</body>

</html>

Frank
tomws
06-25-2008, 05:37 PM
But I'd still like to know why this order is required.


The browser more-or-less builds the page just like you read it (and code it): top to bottom.
effpeetee
06-26-2008, 11:18 AM
Thank you, but that doesn't answer my question.

Why the order left - right- centre is needed and not
left, centre, right.

I read from left to right.

I am still puzzled.

Frank