How to Centre a Page Layout With HTML/CSS?


Tags: html,css

Problem :

I'm new to HTML and CSS and am attempting a very basic webpage layout from scratch.

I'd like to centre all elements of the page (nav, header, section, footer, etc.) and still retain a left-placed nav bar. I've set-up the page itself, but can't figure out how to centre is. I'm using float:left at the moment, so I assume that's my problem, but I don't know how else t make the layout work.

Here's the code:

header {
	text-align: center;
	width: 960px;
}

nav {
	line-height: 30px;
	float: left;
	padding: 5px;
	height: 100px;
	width: 200px;
}

section {
	float: left;
	padding: 5px;
	width: 800px;
}

footer {
	background-color: gray;
	text-align: center;
	padding: 5px;
	width: 960px;
	clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Test HTML Page</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<header>
		<h1>Heading</h1>
	</header>
	<nav>
		<ul>
			<li><a href="#">Page 1</a></li>
			<li><a href="#">Page 2</a></li>
			<li><a href="#">Page 3</a></li>
		</ul>
	</nav>
	<section>
		<h2>Heading</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec est nunc, iaculis in mauris vitae, commodo ullamcorper lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere in libero id dictum. Phasellus viverra rutrum mollis.</p>
	</section>
	<footer>
		Copyright 2016
	</footer>
</body>
</html>

Thanks for any assistance!



Solution :

You'll want to set a width on your body and center it using margin: 0 auto.This will set the top/bottom margin to 0 and will automatically adjust the left/right margin so that your page is centered.

body {
  width: 960px;
  margin: 0 auto;
}

This alone will mess up your current layout only because the width of the body (now 960px) is less than the total width of your section and nav elements (810px + 210px respectively, adding up to 1020px). So you just need to adjust these to be equal to or less than your body. Don't forget that your padding adds to your container width, hence the extra 10px.

section {
    float: left;
    padding: 5px;
    width: 740px;
}

nav {
    line-height: 30px;
    float: left;
    padding: 5px;
    height: 100px;
    width: 190px;
}

Here's a demo of your current code with the above adjustments.


    CSS Howto..

    In IE Compat View, Developer tools shows elements “style” with the class of the previous element

    How to get the profile pic aligned center?

    How to fill a transparent image with a progress bar ? #CSS #HTML #Jquery?

    How to build a complex table by using CSS?

    How could I make a menu dropdown on click

    How to render same margins for every browser?

    How to include several nested CSS classes into rails .erb file?

    How to center div using JQuery or CSS

    I have the CSS & JS, how do I convert that to erb for my Rails app?

    How do I use pseudo-classes to select all children except first and last?

    How to create three columns in css

    How to make this page less cluttered with css and html [closed]

    How to spread three columns in CSS across a page equally

    How to customize CSS depending on (tinier) window size?

    How to verify that google web font is working or not?

    How to fit elements in 100% width without absolute positioning?

    How do I align an inner div with the bottom of an outer div?

    image shows ui-button over the button image

    How to avoid the div 'move' when mouse hover?

    How to stop web content from being displayed before css/jquery is prepared?

    How can I use True Type Collection (.ttc) in JavaFX?

    jQuery toggle slides DIV up and down, but UL content animates left to right. How can I make the content slide up and down?

    CSS - how to set a position of UL in LI

    ASP.NET MVC: How do other people apply conditional CSS classes?

    How to make a generic struct to contain any CSS properties' values

    CSS: how to set the width of form control so they all have the same width?

    How to make a div a link as it transitions in CSS

    How to change navbar background color after page has scrolled down

    How to make input box show up from right to left?

    How to get length of elements with a certain css attribute?