Do not know how to position my divs the good way

Hello there, I am redesigning my website. This is the design:
http://imageshack.us/photo/my-images/217/nieuwdesign.png/
How far I am right now, is not far enough in my eyes. The code that I am having right now is for the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Funny Mash, the funniest website around!</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
  <div id="header">
    <div id="logo">
    </div>
  </div>
  <div id="menu">
      menu items
    </div>
  <div id="contentboven">
  a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
	<div id="stoka">
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    </div>
    <div id="stokb">
    </div>
  </div>
  <div id="contentonder">
  	a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />	
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />   
  </div>
  <div id="footer">
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
    a <br  />
  </div>
</div>
</body>
</html>

This is what I have in the CSS.

@charset "utf-8";
/* CSS Document */


*{font-family:arial,helvetica,sans-serif,tahoma,verdana,geneva,lucida,"lucida grande";}

#container {
	width:960px;
	height:auto;
	margin-left:auto;
	margin-right:auto;
}



#header {
	width:auto;
	height:100px;
	background:url('../images/Bheader.png') repeat-x;
}



#logo {
	background:url('../images/logo.png') no-repeat;
	width:auto;
	height:52px;
	width:334px;
	margin-left:auto;
	margin-right:auto;
}


#menu {
	background:url('../images/Yheader.png') repeat-x;	
}

#contentboven {
	background:url('../images/blauwb.png') repeat-x;
	margin-top:1px;
}

#stoka {
	background:url('../images/stok1.png') no-repeat;
	margin-left:355px;
	margin-right:0;
	margin-top:75px;
}

#contentonder {
	background:url('../images/geel.png') repeat-x;
}

#footer {
	background:url('../images/blauwc.png') repeat-x;
	
}

With this as a result: http://imageshack.us/photo/my-images/31/dreamweaverfunnymash.png/

I am trying to get the black sticks in the right place, but what am I doing wrong? And how do i put this fully design to a good code? I want to code a news section that only imports news from sites with the tags 'funny'. I was almost sure there was something like that on Blogger, and make an automatic blog feed.. Can anybody give me tips? Thanks for helping me out guys!

PS: Stoka is being the black stick I am trying to get a nice position. Stokb is the other one. When I do not add all the A's, I do not see an image.

Dannis86

Junior Poster in Training

68 posts since May 2011

Reputation Points: 12

Solved Threads: 0

9 Months Ago

Play around with width, height, margins and floats.

http://htmldog.com/reference/cssproperties/

MagicMedia

Junior Poster

149 posts since Jul 2010

Reputation Points: 20

Solved Threads: 35

9 Months Ago

Uhh thanks..
Ofcourse I am trying alot or else I wouldn't ask. After a few hours of trying today, it worked a little. But now I've got another problem.

Here's the example of the problem: http://www.failmash.nl/abc/IndexNew.html

Here is my code for HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Funny Mash, the funniest website around!</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
  <div id="header">
    <div id="logo">
    </div>
  </div>
  <div id="menu">
  	<div id="nav">
    <div id="home">
    <a href="http://funnymash.com"></a>
    </div>
    </div>
   </div>
  <div id="contentboven">
  <div id="stoka">
    </div>
    <div id="stokb">
    </div>
  </div>
  <div id="contentonder">  
  </div>
  <div id="footer">

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

And for CSS now

@charset "utf-8";
/* CSS Document */


*{font-family:arial,helvetica,sans-serif,tahoma,verdana,geneva,lucida,"lucida grande";}

#container {
	width:980px;
	height:auto;
	margin-left:auto;
	margin-right:auto;
}


#header {
	width:auto;
	height:100px;
	background:url('../images/Bheader.png') repeat-x;
}



#logo {
	background:url('../images/logo.png') no-repeat;
	width:auto;
	height:52px;
	width:334px;
	margin-left:auto;
	margin-right:auto;
}


#menu {
	background:url('../images/Yheader.png') repeat-x;
	height:39px;
	width:980px;
}

#nav {
	width:415px;
	height:39px;
	margin-left:10px;
}

#home {
	background:url('../images/home.png') no-repeat;
	width:75px;
	height:39px;
}

#contentboven {
	background:url('../images/blauwb.png') repeat-x;
	width:980px;
	height:282px;
}


#stoka {
	background:url('../images/stok1.png') no-repeat;
	margin-top:75px;
	width:1px;
	height:131px;
	margin-left:325px;
}

#contentonder {
	background:url('../images/geel.png') repeat-x;
	height:513px;
	width:980px;
}

#footer {
	background:url('../images/blauwc.png') repeat-x;
	width:980px;
	height:266px;
}

The white area is not supposed to be there, if I use dreamweaver it does not show the white area. I validated my html & css in a w3c validator, both are "good".

And btw how do I make my home button clickable, I thought this was done this easy, but it's not..

Dannis86

Junior Poster in Training

68 posts since May 2011

Reputation Points: 12

Solved Threads: 0

9 Months Ago

1.) Put 'overflow: hidden' to '#contentboven', the margin are collapsing. But, it is not the best solution, if you've some content they need to flow out of the parent container, in this case, '#contentboven', the 'overflow: hidden' will hide and the content will not visible.

2.) Set 'display: block' to the anchor inside the 'nav' and set the height to the same height of 'nav' (ie. 39px), #nav a {display: block; height: 39px;}

Hope this help.

Zero13

Practically a Master Poster

624 posts since Jan 2009

Reputation Points: 120

Solved Threads: 139

9 Months Ago

Hi there, thanks for helping me out. A friend from school helped me out here. But thanks, I did add it. Here's the code right now:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Funny Mash, the funniest website around!</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
  <div id="header">
    <div id="logo">
    </div>
  </div>
  <div id="menu">
  	<div id="nav">
    <div id="home">
    <a href="http://funnymash.com"><img src="http://failmash.nl/abc/images/home.png"
  alt="Home"
  width="75" height="39" border="0" /></a>
    </div>
    </div>
   </div>
  <div id="contentboven">
  	<div id="stoka">
    </div>
    <div id="stokb">
    </div>
  </div>
  <div id="contentonder">  
  </div>
  <div id="footer">

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

@charset "utf-8";
/* CSS Document */


*{font-family:arial,helvetica,sans-serif,tahoma,verdana,geneva,lucida,"lucida grande";}

#container {
	width:980px;
	height:auto;
	margin-left:auto;
	margin-right:auto;
}



#header {
	width:auto;
	height:100px;
	background:url('../images/Bheader.png') repeat-x;
}



#logo {
	background:url('../images/logo.png') no-repeat;
	width:auto;
	height:52px;
	width:334px;
	margin-left:auto;
	margin-right:auto;
}


#menu {
	background:url('../images/Yheader.png') repeat-x;
	height:39px;
	width:980px;
}

#nav {
	width:415px;
	height:39px;
	margin-left:10px;
	display: block;
}

#home {
	background:url('../images/home.png') no-repeat;
	width:75px;
	height:39px;
}

#contentboven {
	background:url('../images/blauwb.png') repeat-x;
	width:980px;
	height:282px;
	overflow:hidden;
}



#stoka {
	background:url('../images/stok1.png') no-repeat;
	top:214px;
	width:1px;
	height:131px;
	margin-left:325px;
	position:absolute;
}

#stokb {
	background:url('../images/stok2.png') no-repeat;
	top:214px;
	width:1px;
	height:131px;
	margin-left:641px;
	position:absolute;
}
	

#contentonder {
	background:url('../images/geel.png') repeat-x;
	height:513px;
	width:980px;
}

#footer {
	background:url('../images/blauwc.png') repeat-x;
	width:980px;
	height:266px;
}

Dannis86

Junior Poster in Training

68 posts since May 2011

Reputation Points: 12

Solved Threads: 0

9 Months Ago

Does it solve ? If then, mark as Solved.

Zero13

Practically a Master Poster

624 posts since Jan 2009

Reputation Points: 120

Solved Threads: 139

This article has been dead for over three months

You