...

View Full Version : Why Won't My Divs Float and why Can't I add a Border?



Doctor_Varney
01-08-2010, 06:00 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

<html>
<head>
<title>Welcome Blinding Horror's Client Area!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../css/style_master.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="index">
<div id="masthead">
</div>

<div id="Menuside">
<a href="something">link 1</a>
</div>

<div id="thumbplate">

<a href="display.htm"><img src="../images/001.jpg"></a>

</div>

<div id="footer">
<h5>Footer</h5>
</div>


</div>
</body>
</html>


*{margin:0;padding:0;}
body{margin:0;padding:0;min-width:450px;background-color:#444;font-size:85%;font-family:Arial, Helvetica, Sans serif;color:#000;}
/*structure---------------*/
#index, #display{text-align:center;width:85%;margin-left:auto;margin-right:auto;padding:0, 100px, 100px, 100px;border:1px solid gray}
#masthead{width:100%;height:85px;margin:0 0 0 0;border:1px solid green}
#thumbplate{float:left;text-align:left;border:1px dashed black}
#thumbplate img{width:65px;height:65px;border:10px solid gray;margin:10px 25px 10px 25px}
#menuside{float:left;border:1px dashed #fff;width:200px;padding:22px;background-color:#000}
#display img{border:10px solid gray;margin-left:auto;margin-right:auto;margin-bottom:25px}
.double_emphasis{font-weight:bolder;text-decoration:underline}
.single_emphasis{font-weight:bolder}
#footer{clear:both;border:1px solid blue;width:100%;height:44px}
#footer h1{margin-top:2em;margin-bottom:2em;border:2px solid #000;width:52%;margin-left:23%;font-size:0.9em;text-align:center}

This won't work in either browser (Moz. or IE).

God, I HATE CSS!!!

Please can anyone help? Thanks.

Rowsdower!
01-08-2010, 06:36 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

<html>
<head>
<title>Welcome Blinding Horror's Client Area!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../css/style_master.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="index">
<div id="masthead">
</div>

<div id="Menuside">
<a href="something">link 1</a>
</div>

<div id="thumbplate">

<a href="display.htm"><img src="../images/001.jpg"></a>

</div>

<div id="footer">
<h5>Footer</h5>
</div>


</div>
</body>
</html>


*{margin:0;padding:0;}
body{margin:0;padding:0;min-width:450px;background-color:#444;font-size:85%;font-family:Arial, Helvetica, Sans serif;color:#000;}
/*structure---------------*/
#index, #display{text-align:center;width:85%;margin-left:auto;margin-right:auto;padding:0, 100px, 100px, 100px;border:1px solid gray}
#masthead{width:100%;height:85px;margin:0 0 0 0;border:1px solid green}
#thumbplate{float:left;text-align:left;border:1px dashed black}
#thumbplate img{width:65px;height:65px;border:10px solid gray;margin:10px 25px 10px 25px}
#menuside{float:left;border:1px dashed #fff;width:200px;padding:22px;background-color:#000}
#display img{border:10px solid gray;margin-left:auto;margin-right:auto;margin-bottom:25px}
.double_emphasis{font-weight:bolder;text-decoration:underline}
.single_emphasis{font-weight:bolder}
#footer{clear:both;border:1px solid blue;width:100%;height:44px}
#footer h1{margin-top:2em;margin-bottom:2em;border:2px solid #000;width:52%;margin-left:23%;font-size:0.9em;text-align:center}

This won't work in either browser (Moz. or IE).

God, I HATE CSS!!!

Please can anyone help? Thanks.

It looks like a simple mismatch on caps vs. non-caps for your ID. Make the highlighted parts the same case and you should be fine.

Doctor_Varney
01-08-2010, 06:42 PM
Arrrgghhh!!!

Bloody hell! Well spotted, that man!

Thanks... (now I feel stupid)... :)

Doctor_Varney
01-08-2010, 06:56 PM
One other thing...

I was taught initially by someone who insisted that when floating left, you should put the leftmost div below the one intended for the right. Apart from this making no sense, it just doesn't work. The mystery is: I used to actually do it as instructed and it did, but now it doesn't...?!

So how DO you float correctly?

_Aerospace_Eng_
01-08-2010, 07:01 PM
It would work if you had a fixed width layout and you had a width given to your #thumbplate however because you are using a fluid layout you need to remove float:left from your thumbplate and give it a left margin that is larger than your menuside which in this case is 200px + 44px (22px on each side plus the width).

#thumbplate{text-align:left;border:1px dashed black;margin-left:244px;}
This will allow the #thumbplate div to resize according to the width of the browser. The menu will be a fixed width.

Doctor_Varney
01-08-2010, 07:08 PM
Beautiful, thanks!

Will it be okay to leave as is, because I think the fluid layout will be useful in this design...?

Dr. V



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum