Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Moving mainbody div tag to center

    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?


    Code:
    <!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

  • #2
    New Coder
    Join Date
    Oct 2011
    Location
    North Carolina
    Posts
    12
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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.

  • #3
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,835 Times in 1,819 Posts
    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.
    You also use positioning and attempt to float it, those don't go together. It's either or.

    Look at your code with a few changes -
    Code:
    <!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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    aaronoafc (02-08-2012)

  • #5
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts
    You my friend are a saviour! Thanks a lot!

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •