...

View Full Version : Why is this simple piece of code not working?



effpeetee
07-08-2008, 01:05 PM
I am playing around with this to try to get an understanding of floats.
I know that I have many references in my Sources program, but obviously, I am missing something.


<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Enter_Title_Here</title>
<style type="text/css">

#left{
width:20&#37;;
height:30%;
margin:5px;
color:white;
background:red;
float:left;
}

#mid{
width:20%;
height:30%;
margin:5px;
color:white;
background:blue;
margin-left:0;
margin-right:0;

}

#right{
width:20%;
height:30%;
margin:5px;
color:white;
background:green;
floatright;
}

</style>
</head>
<body>
<DIV id="left">left</div>
<DIV id="mid">mid</DIV>
<div id="right">right</DIV>

</BODY>
</HTML>

The purpose is obvious.:D

I have played around with the css and the html. I am completely flummoxed. I just cannot see what does which. Enlightenment desperately needed.:rolleyes:

Not just a code correction, but an explanation is what I need.
I am fed-up with just copying other peoples layouts. Please.:thumbsup:

Frank

WyrmFyre
07-08-2008, 01:16 PM
floatright;

should be


float: right;

so im presuming that your problem is the right hand float

also your div order should be



<DIV id="left">left</div>
<div id="right">right</DIV>
<DIV id="mid">mid</DIV>


Your right div coming after the mid div will put the right div on a new line. Floated items should be placed before any non floats to achieve the layout your after

[EDIT] Sorry for the poor explanation! I know what i mean but putting it into words.... well thats another story

effpeetee
07-08-2008, 01:24 PM
Sorry for the poor explanation! I know what i mean but putting it into words.... well thats another story

WyrmFyre,

Thanks a lot. Your explanation is fine. It has given me information that I needed.
The missing colon is due to my poor eyesight.

Frank.

_Aerospace_Eng_
07-08-2008, 01:50 PM
Your doctype also isn't complete. This would put IE into quirksmode causing some CSS not to work properly.

effpeetee
07-08-2008, 01:59 PM
Your doctype also isn't complete. This would put IE into quirksmode causing some CSS not to work properly.
Thanks Aero. It was the default supplied by my editor. I didn't think to check it.
I am still having trouble centring the mid div. Do you have any suggestions for understanding this very simple piece of code and how to play with it.

I begin to think I understand it all and then realise that I still have a way to go.

Perhaps I'd better fold my tent and ---

Frank

_Aerospace_Eng_
07-08-2008, 02:04 PM
Just use auto on the mid div.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Enter_Title_Here</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
background:#FFF;
}

#left {
width:20&#37;;
height:30%;
margin:5px;
color:white;
background:red;
float:left;
}

#mid {
width:20%;
height:30%;
margin:5px auto;
color:white;
background:blue;
}

#right {
width:20%;
height:30%;
margin:5px;
color:white;
background:green;
float:right;
}
</style>
</head>
<body>
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
<div id="mid">mid</div>
</div>
</body>
</html>

Donkey
07-08-2008, 04:02 PM
I noticed that this code positions the left and right divs slightly below the mid div. I think that this is because you are giving each a top margin of 5px and the left and right divs are also inheriting the 5% from the mid div.

My solution would be to add a spacer div above the 3 with a 5px top margin on the spacer div. Then set the top margin on the other three divs to zero.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

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

*
{
padding: 0;
margin: 0;
border: none;
}
.spacer{
margin-top: 5px;
clear: both !important;
}

#left{
width:30%;
height:30%;
margin:0 5px;
color:white;
background:red;
float:left;
}

#mid{
width:30%;
height:30%;
margin: 0 auto;
color:white;
background:blue;
}

#right{
width:30%;
height:30%;
margin:0 5px;
color:white;
background:green;
float: right;
}

</style>
</head>
<body>
<div class="spacer">&nbsp;</div>

<div id="left">left</div>
<div id="right">right</div>
<div id="mid">mid</div>
</body>
</html>

jerry62704
07-08-2008, 04:12 PM
Shouldn't the middle div have a float on it?

WyrmFyre
07-08-2008, 04:20 PM
Shouldn't the middle div have a float on it?

No because you want the middle div to appear @in sequence@ which would be in between the other floats

effpeetee
07-08-2008, 04:34 PM
Thank you all for your input.
Edited: 9th July 2008
This is what I landed up with. I added the height:100&#37; ;and width:100%; to get the height on the divs.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Enter_Title_Here</title>
<style type="text/css">
* {
margin:0;
padding:0;
}

html, body{
background:#FFF;
Height:100%;
width:100%;
}

#left {
width:20%;
min-height:30%;
height:auto !important;
height:30%;
margin:5px;
color:white;
background:red;
float:left;
}

#mid {
width:20%;
min-height:30%;
height:auto !important;
height:30%;
margin:5px auto;
color:white;
background:blue;
}

#right {
width:20%;
min-height:30%;
height:auto !important;
height:30%;
margin:5px;
color:white;
background:green;
float:right;
}
</style>
</head>
<body>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="mid"></div>
</div>
</body>
</html>

Frank

_Aerospace_Eng_
07-08-2008, 05:00 PM
You need to a height on the container as well for the heights to work though setting a height probably isn't the best thing as content can always be larger than the set height. It would be better to use min-height and find a hack for IE6 if you care about it.

effpeetee
07-09-2008, 09:25 AM
My thanks to everyone. I am now much better informed.

Frank

FWDrew
07-09-2008, 11:34 AM
It would be better to use min-height and find a hack for IE6 if you care about it.
Hi Frank :)

Just in case you were looking for a min-height hack as _Aero suggested:


#Box {
min-height:300px;
height:auto !important;
height:300px; /*Be sure this matches the min-height pixels above*/
}

Best Regards,

Drew

effpeetee
07-09-2008, 01:49 PM
Thanks Drew.

All knowledge is good knowledge when mixed with wisdom.

The result is here. (http://exitfegs.co.uk/a3divtest.html)

Frank

effpeetee
07-10-2008, 12:04 PM
For further reference visit http://www.*************

Why? There's nothing there of any use.:mad:

Donkey
07-10-2008, 12:27 PM
Frank, he's just a no good forum spammer. Hopefully one of the Mods will delete his post and ban him.

BTW your link to the final version shows a blank page because you have no content in the three divs. Also you still have the vertical alignment problem your centre div is higher than the other two (see my previous post).

effpeetee
07-10-2008, 05:18 PM
BTW your link to the final version shows a blank page because you have no content in the three divs. Also you still have the vertical alignment problem your centre div is higher than the other two (see my previous post).

Comes up OK for me.:D They are just three coloured boxes .

Frank

effpeetee
07-10-2008, 05:23 PM
This is a screenshot.

Frank

Donkey
07-10-2008, 08:16 PM
Frank, are you sure we are looking at the same page? If I follow your link

http://exitfegs.co.uk/a3divtest.html (http://exitfegs.co.uk/a3divtest.html)

I get what appears to be a blank page.

When I check the html I see this is because the divs have no content, when I use the Fx web developer tool bar to ad content to the divs I get the following:

http://www.s151300449.websitehome.co.uk/Images/franksdivs.jpg

The middle div is definitely higher than the other two.

I'm using Fx3.

effpeetee
07-10-2008, 08:36 PM
This is the code and the address you give gives me the screen the screenshot that I gave you two back.

Frankly I am baffled.:confused:

Frank


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Enter_Title_Here</title>
<style type="text/css">
* {
margin:0;
padding:0;
}

html, body{
background:#FFF;
Height:100&#37;;
width:100%;
}

#left {
width:20%;
min-height:30%;
height:auto !important;
height:30%;
margin:5px;
color:white;
background:red;
float:left;
}

#mid {
width:20%;
min-height:30%;
height:auto !important;
height:30%;
margin:5px auto;
color:white;
background:blue;
}

#right {
width:20%;
min-height:30%;
height:auto !important;
height:30%;
margin:5px;
color:white;
background:green;
float:right;
}
</style>
</head>
<body>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="mid"></div>
</div>
</body>
</html>

imobilliare
07-10-2008, 08:48 PM
I am playing around with this to try to get an understanding of floats.
I know that I have many references in my Sources program, but obviously, I am missing something.


<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Enter_Title_Here</title>
<style type="text/css">

#left{
width:20%;
height:30%;
margin:5px;
color:white;
background:red;
float:left;
}

#mid{
width:20%;
height:30%;
margin:5px;
color:white;
background:blue;
margin-left:0;
margin-right:0;

}

#right{
width:20%;
height:30%;
margin:5px;
color:white;
background:green;
floatright;
}

</style>
</head>
<body>
<DIV id="left">left</div>
<DIV id="mid">mid</DIV>
<div id="right">right</DIV>

</BODY>
</HTML>

The purpose is obvious.:D

I have played around with the css and the html. I am completely flummoxed. I just cannot see what does which. Enlightenment desperately needed.:rolleyes:

Not just a code correction, but an explanation is what I need.
I am fed-up with just copying other peoples layouts. Please.:thumbsup:

Frank

floatright should be separated into two separate words:)

effpeetee
07-10-2008, 09:00 PM
If you check the latest code, you will find that this has long since been corrected and if fact the code validates,

Thanks for the interest,

EDIT. This version (http://exitfegs.co.uk/a3divtestb.html)has filled divs. Obviously FFox does not obey the height setting.

Frank

_Aerospace_Eng_
07-11-2008, 10:22 AM
Firefox would obey the heights if you had done what I said to do about the #container div. If you gave that a height it would work though this requires that you give it a height of 100&#37; or a pixel value. min-height won't work in this case

Donkey
07-11-2008, 10:39 AM
EDIT. This version has filled divs. Obviously FFox does not obey the height setting.
The middle div is still not aligned vertically with the other two divs

effpeetee
07-11-2008, 12:11 PM
Firefox would obey the heights if you had done what I said to do about the #container div. If you gave that a height it would work though this requires that you give it a height of 100&#37; or a pixel value. min-height won't work in this case

Sorry Aero.

I overlooked the Container Div. I did set the html and body to 100%. I'll sort it out.

Regards,

Frank

effpeetee
07-11-2008, 12:13 PM
The middle div is still not aligned vertically with the other two divs
I still cannot see any disparity in the top levels of the divs.

Frank

rafiki
07-11-2008, 12:16 PM
Firefox would obey the heights if you had done what I said to do about the #container div. If you gave that a height it would work though this requires that you give it a height of 100% or a pixel value. min-height won't work in this case

Look at this post carefully, this explains about getting them level in firefox.
All the best

effpeetee
07-11-2008, 01:08 PM
I think I/we have finally nailed it.

Look here. (http://exitfegs.co.uk/a3divtest.html)

It's been chaos at home. We have the builders in and the noise and dust has been overwhelming.
Hopefully, nearly over now.

My thanks to everybody for your help and patience.

Frank

Donkey
07-11-2008, 03:48 PM
I still cannot see any disparity in the top levels of the divs.

Are you looking in Firefox?

They are level in IE6 and Opera but not in Firefox.

<edit>
The latest version is level in Firefox.
</edit>

effpeetee
07-11-2008, 03:51 PM
I have checked in IE7 and FFox 3 and they are level in both, here.

screenshot (http://exitfegs.co.uk/ss1.jpg)

Anyone else like to comment?

http://exitfegs.co.uk/a3divtest.html

Frank

_Aerospace_Eng_
07-11-2008, 06:24 PM
There is a horizontal scrollbar on my 1280x800 resolution. Its coming from the left margin you added on the #container div. Get rid of it.

effpeetee
07-11-2008, 07:46 PM
Thanks Aero,

I have removed it, but I still have a scrollbar (1280x800). Not much of one, but as a point of interest, how can I get rid of it.

Frank

_Aerospace_Eng_
07-11-2008, 07:49 PM
Because you added that line. Okay Frank lets do some simple math here. You have this

#line{display-inline;
width:100&#37;;
min-height:2%;
height:auto !important;
height:2%;
margin:7px;
border-bottom:1px solid black;
}
You put a 7px margin on something that is ALREADY 100% wide so now the total width is 100% the width of the screen PLUS 14px so you are going to get a horizontal scroll of 14px. What I think you wanted was this

margin:7px 0;

effpeetee
07-11-2008, 08:00 PM
Thanks Aero. Like I said before, it's been a hell of a week.
Two plus two equalling five! I never thought of the line div. I only added it to prove to a poster that the divs were level horizontally.

Back to the drawing board.

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum