place following divs in one page centred div

antonyx · #1 (**permalink**) Dec 29th, 2005, 17:39

hi, i have been looking on the net for definitive div centering methods.. i got somewhere and then it collapsed when i tried positioning things..

basically, i have 4 divs, one is 750px wide for the logo at the top of the page..
the next one is also 750px wide, directly below the logo and is for the menu..
then i have two divs below the menu, each one 375px wide and 100 percent high.

i want to put all of these in a div that lies in the centre of the page, and if possible i would like it to be centered in as many as browsers as possible.

here is my code..

stylesheet

Code: Select all

body {
margin:0;
padding:0;
height:100%;
}

#top {
position:absolute;
left:0px;
top:0px;
padding:0;
width:750px;
height:125px;
background:#666666;
border:0px;
margin:0px;
}


#menu {
position:absolute;
left:0px;
top:126px;
padding:0;
width:750px;
height:15px;
background:#ffffff;
border:0px;
margin:0px;
}


#bleft {
position:absolute;
left:0px;
top:185px;
padding:0;
width:374px;
height:100%;
background:#ffffff;
border:0px;
margin:0px;
}

#bright {
position:absolute;
left:375px;
top:185px;
padding:0;
width:374px;
height:100%;
background:#ffffff;
border:0px;
margin:0px;
}

p.links {
margin-top:15px;
margin-left:35px;
margin-bottom:0px;
color:#666666;
font-family:arial;
font-size:12pt;
}

p.main {
margin-top:0px;
margin-left:35px;
margin-bottom:30px;
margin-right:10px;
color:#666666;
font-family:arial;
font-size:10pt;
}

p.main2 {
margin-top:0px;
margin-left:35px;
margin-bottom:15px;
margin-right:10px;
color:#666666;
font-family:arial;
font-size:10pt;
}

p.little {
margin-top:0px;
margin-left:35px;
font-family:arial;
font-size: 8pt;
color:#666666;
}

p.clear {
margin-top:0px;
margin-left:35px;
font-family:arial;
font-size: 8pt;
color:#ffffff;
}

p.bullet {
margin-top:0px;
margin-left:25px;
margin-bottom:5px;
margin-right:10px;
color:#666666;
font-family:arial;
font-size:10pt;
}

h1 {
margin-top:0px;
margin-left:35px;
margin-bottom:10px;
position:float;
font-family:arial;
color:#F99C08;
font-size:17pt;
}

img {margin-left:35px; margin-top:3px;margin-bottom:20px;}

ul {
list-style-type: none;
padding-left: 0;
margin-left: 35px;
}

li { background: url(man.png) left center no-repeat }

hr {margin-left:35px;}

and the page is like this..

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="newerstyle.css">
</head>
<body>
<div class="bleft"> my opening paragraph...</div> //bottom left
<div class="top">my logo</div> //the logo on the top of the page
<div class="menu"> my menu links </div>
<div class="bright"> my second column of text</div>

</body>

the actual order on the page is top-menu-bleft-bright

but for seo reasons i want the bleft div at the start of the body tag... will this be a problem if i have to place them all in another css div in order... so they can be centred??

muneepenee · #2 (**permalink**) Dec 30th, 2005, 12:54

<html>
<head>
<title>div senter test</title>
</head>
c:\web\jtemp3.htm...Fridae, 30 Des 05 at 0855
<body>
<div style="width:750px;text-align:center">
<div style="width:700px;border:solid 1px black">logo</div>
<div style="width:750px">menu</div>
<div style="width:750px">
<table>
<tr>
<td style="width:375px">left stuff</td>
<td style="width:375px">rite stuff</td>
</tr>
</table>
</div>
</div>
</body>
</html>

antonyx · #3 (**permalink**) Dec 30th, 2005, 14:45

i used that code...

nothing was centred on IE of FF...

also that layout doesnt allow me to place my opening paragraph close to the body tag (which is in my bleft div)

thanks for tryin tho.. is there no way i can just create a single centred div, and place the rest in the middle... im gonna try do that but if anyone can show me straight up then please do.

antonyx · #4 (**permalink**) Dec 30th, 2005, 15:48

ok, basically im gettin somewhere..

i found a tutorial on the following website which is quite good..
http://www.pactumgroup.com/tutorials/index.php

i use this..

Code: Select all

body{
text-align:center;
margin:0;
padding:0;
}

#centered {
margin: auto;
width: 750px;
background-color: #ffffff;
border: 1px solid #666666;
padding: 0px;
}

this allows me to have a div called 'centered' and i did the following to test it on my page..

Code: Select all

<div id="centered"><p>hello matey</p></div>

it works... i have loads of other divs with content and i thought i could just place the other divs inside the centered div like this..

Code: Select all

<div id="centered">
<div id="main">the best website content you will ever read</div>
</div>

oh how wrong i was... the result is my page just looks the same left aligned..
if you cant just place divs in divs like this.. (and i tried making a centered table and putting my divs in there and that didnt work) how can it be done?? all these damn issues.. im not gonna go back to tables.. but why cant it be easy.

<(i agree)

herkalees · #5 (**permalink**) Dec 30th, 2005, 15:57

Very easy, wrap all those divs in one more, like this:
<div id="wrap">
all your other divs go here
</div>
Then, use this css code:
div#wrap {
width: 750px;
position: absolute;
left: 50%;
margin: 0 0 0 -375px;
}

antonyx · #6 (**permalink**) Dec 30th, 2005, 16:10

well that was easy... thank you herkalees from Massachusetts.. you are a 'top boy' as we say in london...
one more thing tho.. i wanted the entire div holding my content to have a border around it.. wen i tried puttin a border in the centered or wrap div.. the border was only right at the top and in a pointless position.

is there a way to put a border around the wrap div so everything in my site is like in a box...?

herkalees · #7 (**permalink**) Dec 30th, 2005, 16:12

Quote:

Originally Posted by antonyx

well that was easy... thank you herkalees from Massachusetts.. you are a 'top boy' as we say in london...
one more thing tho.. i wanted the entire div holding my content to have a border around it.. wen i tried puttin a border in the centered or wrap div.. the border was only right at the top and in a pointless position.
is there a way to put a border around the wrap div so everything in my site is like in a box...?

div#wrap {
width: 750px;
position: absolute;
left: 50%;
margin: 0 0 0 -375px;
border: 1px solid #000;
}

That has to work, and if no, your remaining CSS styles might be screwing something up.

Thanks for the thanks, it's nice to be thanked. You're welcome.

antonyx · #8 (**permalink**) Dec 30th, 2005, 16:29

ok that still isnt working...
i think what i will do is recreate the page step by step starting with the wrap div and see how that goes...

just so i know tho, what other div properties could be screwing it up.. none of them have borders..could it be to do with the margins?? or the background colours??

herkalees · #9 (**permalink**) Dec 30th, 2005, 16:32

Quote:

Originally Posted by antonyx

ok that still isnt working...
i think what i will do is recreate the page step by step starting with the wrap div and see how that goes...

just so i know tho, what other div properties could be screwing it up.. none of them have borders..could it be to do with the margins?? or the background colours??

most likely it's margins, paddings, or inline border styles, either with CSS or nasty HTML.

benbacardi · #10 (**permalink**) Dec 30th, 2005, 17:12

doesnt there have to be some content in a div for a border to show up? and by content i mean something in that div, but outside any other container or div or span etc?

antonyx · #11 (**permalink**) Dec 30th, 2005, 17:15

ok.(this is all in firefox by the way)
basically i was placing a div called 'top' inside the wrap div.
when i used absolute positioning for the top div.. it automatically killed the 'wrap' border.. i took it away.. and it worked.

herkalees · #12 (**permalink**) Dec 30th, 2005, 18:09

Quote:

Originally Posted by antonyx

ok.(this is all in firefox by the way)
basically i was placing a div called 'top' inside the wrap div.
when i used absolute positioning for the top div.. it automatically killed the 'wrap' border.. i took it away.. and it worked.

Yeah, you should've called it "position:relative;"

Ben, no, as long as a div contains anything, including other divs, the border will show up. The only time it won't is if it's floated and there is nothing inside the div, because then it's taken out of the flow of the document, and is empty.

benbacardi · #13 (**permalink**) Dec 30th, 2005, 21:00

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Making centred div hug content	mikeym	Web Page Design	13	Dec 11th, 2007 22:23
div wrap height centred	jillcary	Web Page Design	1	Jul 24th, 2007 16:05
Page out of place !!!	Coty Skaj	Web Page Design	2	Jul 2nd, 2006 16:38
Parent of/ page shows up in place of index.htm	Babawawa	Introduce Yourself	1	Mar 3rd, 2006 12:07
Divs within another div go to the bottom of page...	Nitesh9999	Web Page Design	10	Mar 1st, 2006 14:08

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
place following divs in one page centred div