Do not know how to position my divs the good way

Question

Dannis86 2 Junior Poster in Training

15 Years Ago

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.

html-css user-interface web-design

Edited 15 Years Ago by Dannis86 because: n/a

3 Contributors
5 Replies
237 Views
2 Days Discussion Span
Latest Post 15 Years Ago Latest Post by ko ko

Dani AI

Generated 7 Months Ago

Short summary and focused fixes for the layout problems seen in 's screenshots and code.

The misplaced “sticks” and the mysterious white band are classic positioning/flow issues. The sticks were taken out of normal flow (absolute positioning) but the section that should contain them (#contentboven) was not a positioned ancestor, so the sticks float relative to the page rather than the blue band. ’s suggestion to experiment with widths/floats is useful for flow-based layouts; correctly called out margin collapse and the anchor/display problem — both are relevant here.

Make the containing band the reference frame, and stop relying on margin-left for absolute placement:

#contentboven { position: relative; }

#stoka { position: absolute; left: 325px; /* replace margin-left */ }
#stokb { position: absolute; left: 641px; }

Notes and best practices to avoid similar problems:

Absolute children should usually be positioned inside a positioned parent (position: relative) so they stay tied to that block when the page resizes.
Use left/top for absolute placement rather than margins; margins with positioned elements are brittle.
Avoid using many <br> tags for spacing; use padding/margins on the proper elements so heights and flow are predictable.
Make navigation anchors cover the full clickable area by giving the anchor display:block and explicit width/height (so background images or inline images feel clickable).
Consider simpler alternatives for decorative “sticks”: background-position, multiple backgrounds, or ::before/::after pseudo-elements (these keep markup cleaner). For overall layout, modern approaches (Flexbox/Grid) eliminate most of these problems.

Troubleshooting tips: use the browser inspector to toggle position/top/left live and to see which element’s margins are collapsing. If overflow:hidden was added as a quick fix, re-check that it isn’t hiding legitimate overflow content.

All 5 Replies

MagicMedia 10 Junior Poster

15 Years Ago

Play around with width, height, margins and floats.

ko ko 97 Practically a Master Poster

15 Years 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.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Dannis86 2 Junior Poster in Training · Answer 1 · 2011-09-01T19:59:17+00:00

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:

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 2 Junior Poster in Training · Answer 2 · 2011-09-02T17:53:42+00:00

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=""
  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;
}

ko ko 97 Practically a Master Poster · Answer 3 · 2011-09-02T22:00:48+00:00

ko ko 97 Practically a Master Poster

15 Years Ago

Does it solve ? If then, mark as Solved.

Do not know how to position my divs the good way

Dani AI

Recommended Answers Collapse Answers

All 5 Replies

Recommended Answers