PDA

View Full Version : Really simple question about positioning



oliver111
Aug 17th, 2007, 06:31 PM
This is the code:
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

#header{
margin:0 auto;
background-image:url(images/img03.gif);
float:left;
width:620px;
height:80px;
}

.header:hover{background-image:url(images/img02.gif)}
.header:link{background-image:url(images/img04.gif)}

All's i want is for the div to be in the center instead of being stuck on the left all the time, how would i do this?, and also how would i position div's under it? one on the left one in the center and one on the righT? all to be centered too so when somebody resizses there browser it doesn't go wrong. Thanks!

fanfavorite
Aug 17th, 2007, 06:45 PM
If I am understanding you correctly, you are going to have to use a table with 3 columns.

CSS:

#leftside {
background:url(leftside.jpg) top right;
background-repeat:no-repeat;
width: 50%;
height: 80px
}

#center {
background-image:url(center.jpg);
width: 620px;
height: 80px
}

#rightside {
background:url(rightside.jpg) top left;
background-repeat:no-repeat;
width: 50%;
height: 80px
}

HTML:

<table cellpadding="0" cellspacing="0">
<tr>
<td id="leftside"></td>
<td id="center"></td>
<td id="rightside"></td>
</tr>
</table>

But I may have misunderstood what you mean.

oliver111
Aug 17th, 2007, 06:49 PM
What i mean is a simple positon to the center, i look at most CSS codes and they don't have any numbers for centering its just in the center.

raghu207
Aug 17th, 2007, 09:17 PM
Hi..

From your post, I'm guessing you are looking for a three column layout? There are several ways to do this.. there are examples are all over the net
Here's a basic version
#left {
width:33%;
float:left;
}
#middle {
width:33%;
float:left;
}
#right {
width:33%;
float:left;
}

<div style="width:75%; margin:0 auto; ">
<div id="left">some text</div><div id="middle">some text</div><div id="right">some text</div>
</div>


If you want just a single div in the middle, the code you posted initially should work.. just remove the float:left so that the div doesnt stick to the left. If you want the text also to be in the middle, use text-align attribute.. Hope this helps..

All the best!
raghu207

VIPStephan
Aug 17th, 2007, 10:18 PM
All's i want is for the div to be in the center instead of being stuck on the left all the time, how would i do this?, and also how would i position div's under it? one on the left one in the center and one on the righT? all to be centered too so when somebody resizses there browser it doesn't go wrong. Thanks!

You should really look into semantic coding (http://brainstormsandraves.com/articles/semantics/structure/) because web development isnít all about positioning divs. And in future please post all of your code, that means CSS and HTML because CSS alone isnít telling us anything about your problem(s).

Now, centering a block level element (like div, ul, form) is really easy and if I interpret your CSS above correctly youíve (almost) done it already. Give your element a width and center it with margin: auto; (specifically left and right margin have to be auto).
However, note that in IE this only works if the browser is in standards mode (as opposed to quirks mode) which means you need a proper document type declaration (http://www.alistapart.com/articles/doctype/).