PDA

View Full Version : Further question. NOW RESOLVED.



effpeetee
Mar 14th, 2008, 03:28 PM
SEE MY VERY LAST POST

Second step! How do I level these three divs. In line at the top. I have tried clearing floats. Even so, I seem to have sunk.:eek:

Further help (a lifebelt) needed.:D

Frank


<!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>
<title>Enter_Title_Here</title>
<meta name="description" content="Utter rubbish it seems!" />
<style type="text/css">

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

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

#box1{
width: 30%;
background: yellow;
color: black;
font: Tahoma, sans-serif;
text-align: center;
margin-left: auto;
margin-right: auto;
border: 2px solid red;

}

#box2{float:left;
width: 30%;
background: yellow;
color: black;
font: Tahoma, sans-serif;
text-align: center;
border: 2px solid blue;
}


#box3{
position:relative;
float:right;
width: 30%;
background: yellow;
color: black;
font: Tahoma, sans-serif;
text-align: center;
border: 2px solid blue;
}



</style>
</head>

<body>
<div id="box1">
<p>Over to the centre if you please.</p>
</div>
<div id="box2">
<p>Over to the left.</p>
</div>
<div id="box3">
<p>Over to the right.</p>
</div>
</body>
</html>]

jerry62704
Mar 14th, 2008, 03:50 PM
The divs will have to be floated to align them otherwise their block properties will separate them. You don't want to clear the floats once you have added them if your goal is to keep them on one line.

harbingerOTV
Mar 14th, 2008, 04:04 PM
and you need box1 to be last in your html. (float left, float right then non floats)

effpeetee
Mar 14th, 2008, 04:19 PM
and you need box1 to be last in your html. (float left, float right then non floats)
My thanks to all of you.
Like British Rail said. "We're getting there."
Now on to the next step.

Frank


<!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>
<title>Enter_Title_Here</title>
<meta name="description" content="Utter rubbish it seems!" />
<style type="text/css">

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

html, body {
height: 100&#37;;
width: 100%;
}

#box1{
width: 30%;
background: yellow;
color: black;
font-family: Arial, Helvetica, Verdana, Sans-serif;
text-align: center;
margin-left: auto;
margin-right: auto;
border: 2px solid red;

}

#box2{float:left;
width: 30%;
background: yellow;
color: black;
font-family: Arial, Helvetica, Verdana, Sans-serif;
text-align: center;
border: 2px solid blue;
}


#box3{
position:relative;
float:right;
width: 30%;
background: yellow;
color: black;
font-family: Arial, Helvetica, Verdana, Sans-serif;
text-align: center;
border: 2px solid blue;
}



</style>
</head>

<body>
<div id="box2">
<p>Over to the left.</p>
</div>
<div id="box3">
<p>Over to the right.</p>
</div>
<div id="box1">
<p>Over to the centre if you please.</p>
</div>

</body>
</html>

_Aerospace_Eng_
Mar 14th, 2008, 04:28 PM
What is the issue now? Also I suggest you check out the layouts at www.bonrouge.com

effpeetee
Mar 14th, 2008, 04:40 PM
What is the issue now? Also I suggest you check out the layouts at www.bonrouge.com
Thanks Aero.

I am trying to build a site, coding out of memory and without cutting and pasting from other sources. Just asking when I get stuck. Just like doing the 'five finger exercises when I learned to play the piano all those years ago. I am gratefull to you and all the coders for your/their help, but in the past I have just accepted that help and not tussled much.

I'll try not to bother too much, but as another poster said recently, I learn best by doing.

Bear with me if you will.

Frank

effpeetee
Mar 14th, 2008, 10:27 PM
and you need box1 to be last in your html. (float left, float right then non floats)

Can someone tell me why the box1 needs to go to the end of my html.

This is a genuine question. I understand that it works that way, but is there an explanation?

Frank


<!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>
<title>Enter_Title_Here</title>
<meta name="description" content="Utter rubbish it seems!" />
<style type="text/css">

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

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

#header{
width:50%;
background:grey;
color:black;
font-family: Arial, Helvetica, Verdana, Sans-serif;
text-align: center;
margin-left: auto;
margin-right: auto;
border: 2px solid green;

}

#box1{
width: 30%;
background: yellow;
color: black;
font-family: Arial, Helvetica, Verdana, Sans-serif;
text-align: center;
margin-left: auto;
margin-right: auto;
border: 2px solid red;

}

#box2{float:left;
width: 30%;
background: yellow;
color: black;
font-family: Arial, Helvetica, Verdana, Sans-serif;
text-align: center;
border: 2px solid blue;
}


#box3{
position:relative;
float:right;
width: 30%;
background: yellow;
color: black;
font-family: Arial, Helvetica, Verdana, Sans-serif;
text-align: center;
border: 2px solid blue;
}



</style>
</head>

<body>
<div id="box2">
<p>Over to the left.</p>
</div>
<div id="box3">
<p>Over to the right.</p>
</div>
<div id="box1">
<p>Over to the centre if you please.</p>
</div>

</body>
</html>

effpeetee
Mar 15th, 2008, 12:47 PM
Any takers?

Frank

Apostropartheid
Mar 15th, 2008, 03:04 PM
I'm guessing that the box needs to have 2 and 3 displayed first so it can calculate the difference between them.
I'm guessing.

bazz
Mar 15th, 2008, 05:16 PM
I think it is mentioned in an earlier post Frank.

You do the left floats, then thr right floats and then the non-floated stuff so that it displays in the 'middle', between the floated things.

I think if you were to put box 1 ahead of boixes 2 and 3 in your html, then the floating will simply make the floated divs show below the first/non-floated div.

hth

bazz

_Aerospace_Eng_
Mar 15th, 2008, 05:17 PM
Floats need to come first or the elements following them won't move up. Its almost like reading a book. Left to right then everything else.

effpeetee
Mar 15th, 2008, 05:52 PM
Floats need to come first or the elements following them won't move up. Its almost like reading a book. Left to right then everything else.
Thanks Aero, Bazz and Cyanlight (quite alphabetic!).
It's going in slowly. Friendly advice - Find a cure for old age!

Frank