positioning help [Archive] - CodingForums.com

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>
</div>
<div id="right">
<div id="nav-wrapper">
</div>
</div>
</div>
</body>
</html>