...

View Full Version : positioning help



justbreathe
04-08-2011, 07:35 AM
I am trying to avoid using absolute positioning so the layout stays centered in all browsers. I chose random background colors for the divs so you could see the problem. I am trying to get the blue box to align at the very top of the layout. The pink box needs to be under the banner (the banner is the grey box).

http://obsidianskies.webs.com/ffffffffff.htm

how do I align the blue box at the top?



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Site Tittle</title>
<style type="text/css">
body
{
background-image:url("http://i53.tinypic.com/4u6mvb.jpg");
background-repeat:repeat-y;
background-position:50% 50%;
margin:0px;
padding:0px;
background-color:#555555;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
color:#000000;
}
#banner
{
display:block;
margin:0 auto;
}
#align-1
{
margin-left:-213px;
}
#align-2
{
margin-left:-213px;
}
#main-wrapper
{
display:block;
margin:0 auto;
width:627px;
overflow:auto;
height:100px;
background-color:pink;
}
#fix
{
display:table;
margin:0 auto;
width:841px;
background-color:green;
height:100px;
}
#align-3
{
margin-left:1px;
}
#nav-wrapper
{
float:right;
width:213px;
overflow:auto;
height:100px;
background-color:blue;
}
</style>
</head>
<body>

<div id="align-1"><img src="http://i53.tinypic.com/23swtxv.jpg" id="banner" alt="banner"></div>

<div id="align-2"><div id="main-wrapper"></div></div>

<div id="align-3"><div id="fix"><div id="nav-wrapper"></div></div></div>
</body>
</html>

Excavator
04-08-2011, 09:19 AM
Hello justbreathe,
A 2 column layout is what you really need here. Your markup is laid out like your building it all with absolute positioning and that doesn't work when you want the elements to flow naturally.

Have a look at how to build a basic 2 column layout (http://nopeople.com/CSS%20tips/simple_2-column/index.html).

Try something like this to start with -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #fc6 url(http://i53.tinypic.com/4u6mvb.jpg) repeat-y center;
}
#container {
width: 841px;
margin: 0 auto;
overflow: auto;
}
#left {
width: 627px;
float: left;
}
#align-1 {
height: 338px;
background: #ccc;
}
#align-2 {
height: 100px;
background: #f9f;
}
#align-3 {
height: 100px;
background: #0f0;;
}
#right {
margin: 0 0 0 628px;
}
#nav-wrapper {
height: 100px;
background: #00f;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
<div id="align-1"></div>
<div id="align-2"></div>
<div id="align-3"></div>
<!--end left--></div>
<div id="right">
<div id="nav-wrapper">
<!--end nav-wrapper--></div>
<!--end right--></div>
<!--end container--></div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum