Welcome to WebmasterWorld Guest from 54.205.119.93

Forum Moderators: not2easy

Message Too Old, No Replies

divs just not going where I want

   
9:20 am on Nov 2, 2009 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



I have been playing with some html/css strict doctype for a simple 2-column layout, and it just won't go how I want at all in IE8. Seemingly inconsequential changes have massive effects. For instance, the container won't expand to hold the links column, and sometimes it won't expand to hold the content. Those things just hang down below the whole thing like unwanted guests out on the street at a party.
plus, I wanted to put an advertisement div above the content
anyway, here's a short, stripped-right-down version of the page. If anyone could shed light on what I'm doing wrong, I will be forever grateful.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>my website</title>
<style type="text/css">
body
{margin:0;
padding;0;
text-align:center;
background:#EEFFEE;
font-family:Ariel, sans-serif;
font-size:.9em;}
.wrapper
{width:800px; border:solid 2px green; text-align:left; color:black; margin:10px auto;}
.header
{margin:1%;border:solid 2px green; padding:1%;text-align:left;}
.leftcol
{float:left; width:160px; margin:1%;border:0; padding:1%;}
.contentstuff
{padding:1%; margin-left:250px; border:solid 2px orange; }
.advert
{float:left; padding:1%;border: 2px solid blue;}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>A cool website</h1>
<p>with very cool content</p>
</div>
<div class="navbar">
This is the navbar.
</div>
<div class="leftcol">
<p>QuickLinks</p>
<p>here are lots of links. here are lots of links. here are lots of links. here are lots of links. here are lots of links. </p>
</div>
<div class="advert">
<h3>An advertisement</h3>
</div>
<div class="contentstuff">
Here is content. here is content. Here is content. here is content.
Here is content. here is content. Here is content. here is content.
Here is content. here is content. Here is content. here is content.
</div>
</div>
</body>
</html>

why won't this do what I want? :-(
11:04 am on Nov 2, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi there callivert,

try this, it should get you moving in the right direction...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>my website</title>

<style type="text/css">
body {
margin:0;
padding:0;
background-color:#efe;
font-family:ariel,sans-serif;
font-size:0.9em;
}

#wrapper {
width:784px;
height:1%;
padding:8px;
border:2px solid #008000;
margin:10px auto;
color:#000;
background-color:#ded;
overflow:hidden;
}

#header {
padding:8px;
border:2px solid #008000;
background-color:#fcfcfc;
}

#navbar {
padding:8px;
border:2px solid #008000;
margin:8px 0;
background-color:#fcfcfc;
}

#leftcol {
float:left;
width:156px;
padding:8px;
border:2px solid #f00;
margin-right:8px;
background-color:#fcfcfc;
}

#advert {
float:left;
width:184px;
padding:8px;
border:2px solid #00f;
margin-right:8px;
background-color:#fcfcfc;
}

#contentstuff {
float:left;
width:368px;
padding:8px;
border:2px solid #ffa500;
background-color:#fcfcfc;
}
</style>

</head>
<body>

<div id="wrapper">

<div id="header">
<h1>A cool website</h1>
<p>with very cool content</p>
</div>

<div id="navbar">
This is the navbar.
</div>

<div id="leftcol">
<p>QuickLinks</p>
<p>
here are lots of links. here are lots of links.
here are lots of links. here are lots of links.
here are lots of links. here are lots of links.
</p>
</div>

<div id="advert">
<h3>An advertisement</h3>
</div>

<div id="contentstuff">
Here is content. here is content. Here is content. here is content.
Here is content. here is content. Here is content. here is content.
Here is content. here is content. Here is content. here is content.
</div>

</div>

</body>
</html>


birdbrain
11:30 am on Nov 2, 2009 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



wow! That works, thanks!
I still don't understand why, but maybe I'll understand divs one day...
11:33 am on Nov 2, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



:) understanding Div is not an issue , real thing is to know float , clear

Just see these tow things and you will be far far ahead from crowd.

1:24 pm on Nov 4, 2009 (gmt 0)

5+ Year Member



Nice job BirdBrain,

Easy to edit too.

You can cut the margin-right:8px; from the adverts and paste it to the contentstuff in the style and then place the adverts after the contentstuff in the html for a differnet look in two seconds.

Nouturns

 

Featured Threads

Hot Threads This Week

Hot Threads This Month