...

View Full Version : Moving mainbody div tag to center



aaronoafc
02-08-2012, 12:53 PM
Hi guys,

I'm new to this forum so hello to all! I have a slight problem and was wondering if anyone could help. I'm currently learning web development and am messing around making a dummy website to help teach myself. I am having a problem moving one of the boxes into the centre of the page. I have my header at the top, my left navigation on the left, my right navigation on the right. However my main body is still on the left and I want it to be the largest box in the middle of the page however it won't move like the others, any idea?



<!doctype html>
<head>
<style type="text/css">
body {
background-color:#0099FF;
font-size:100%;
}
h1 {
color:#ffffff;
text-align:center;
font-family:Arial;
font-size:1.75em;
border:2px solid white;
}
.oafcpage{
text-align:center;
font-family:arial;
}
.oafcpage:link {
text-decoration:none;
}
.oafcpage:hover {
color:white;
}
div.mainbody {
float:center;
width:140px;
border:3px solid white;
text-align:center;
position:absolute;
padding:10px;
margin:0px;
}
div.leftnav {
float:left;
width:250px;
height:500px;
padding:10px;
border:3px solid white;
margin:0px;
}
div.rightnav {
float:right;
width:250px;
height:500px;
padding:10px;
border:3px solid white;
margin:0px;
}
</style>
</head>
<body>

<div id="container">
<h1>Oldham Athletic Website</h1>

<p><a href="http://oldhamathletic.co.uk" class="oafcpage">Oldham Athletic Official Website</a></p>

<div class="mainbody">Main body of the website</div>

<div class="leftnav">Left navigation</div>

<div class="rightnav">right navigation</div>

</div>

</body>
</html>


Thanks
Aaron

success4acb
02-08-2012, 02:09 PM
I'm kind of new to coding as well but I don't thing you can have a float: center;
I remember having this problem too. I fixed it by having 2 divs: left and right.
Inside the left div put your leftnav and float left. Inside the right put your mainbody and rightnav and float right Then float mainbody left and rightnav right inside the right div.

I hope this helps.

aaronoafc
02-08-2012, 02:31 PM
Thanks for getting back to me, sorry, I am completely lost, I have removed the float centre but now not sure as to the next step? Could you write it in code if possible?

Cheers

Excavator
02-08-2012, 02:41 PM
Hello aaronoafc,
Your .mainbody seems closed too soon. I'm assuming it's intended to enclose your .leftnav/.rightnav elements but it doesn't. It is also not sized properly for containing those elements - see the rule of the box model here. (http://www.w3.org/TR/CSS2/box.html)
You also use positioning (http://www.barelyfitz.com/screencast/html-training/css/positioning/) and attempt to float (http://css.maxdesign.com.au/floatutorial/) it, those don't go together. It's either or.

Look at your code with a few changes -
<!doctype html>

<head>
<style type="text/css">
body {
background-color:#0099FF;
font-size:100%;
}
h1 {
color:#ffffff;
text-align:center;
font-family:Arial;
font-size:1.75em;
border:2px solid white;
}
.oafcpage {
text-align:center;
font-family:arial;
}
.oafcpage:link { text-decoration:none; }
.oafcpage:hover { color:white; }
div.mainbody {
width: 600px;
margin: 0 auto; /*this is the bit that centers it*/
padding: 10px;
overflow: auto; /*clears floats*/
border: 3px solid white;
text-align: center;
}
div.leftnav {
float:left;
width:250px;
height:500px;
padding:10px;
border:3px solid white;
margin:0px;
}
div.rightnav {
float:right;
width:250px;
height:500px;
padding:10px;
border:3px solid white;
margin:0px;
}
</style>
</head>
<body>
<div id="container">
<h1>Oldham Athletic Website</h1>
<p><a href="http://oldhamathletic.co.uk" class="oafcpage">Oldham Athletic Official Website</a></p>
<div class="mainbody">
<div class="leftnav">Left navigation</div>
<div class="rightnav">right navigation</div>
<!--end .mainbody--></div>
<!--end container--></div>
</body>
</html>

You would get a little extra help from the validators. Check out the links about validation in my signature line.

Since you are building a two column layout, have a look at an example here (http://nopeople.com/CSS%20tips/simple_2-column/index.html).

aaronoafc
02-08-2012, 02:47 PM
You my friend are a saviour! Thanks a lot!

Thanks for the links too, will have a read up on them :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum