homepage Welcome to WebmasterWorld Guest from 54.147.196.159
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
divs just not going where I want
callivert

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4017424 posted 9:20 am on Nov 2, 2009 (gmt 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? :-(

 

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4017424 posted 11:04 am on Nov 2, 2009 (gmt 0)

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

callivert

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4017424 posted 11:30 am on Nov 2, 2009 (gmt 0)

wow! That works, thanks!
I still don't understand why, but maybe I'll understand divs one day...

benevolent001

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4017424 posted 11:33 am on Nov 2, 2009 (gmt 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.

Nouturns

5+ Year Member



 
Msg#: 4017424 posted 1:24 pm on Nov 4, 2009 (gmt 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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved