Welcome to WebmasterWorld Guest from 54.234.244.30

Forum Moderators: not2easy

Message Too Old, No Replies

divs just not going where I want

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

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Nov 30, 2006
posts:685
votes: 0


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)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 948
votes: 4


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)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Nov 30, 2006
posts:685
votes: 0


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 22, 2004
posts:1082
votes: 0


:) 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)

New User

5+ Year Member

joined:Nov 4, 2009
posts:4
votes: 0


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

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members