have centered a page in html, but problems with background colour

Posted on 2013-01-22
Medium Priority
Last Modified: 2013-01-31

Have an instance where I need to centre an html page on the screen, i.e. both horizontally and vertically. I have achieved this with the below container div. I know that my content is always 650px by 490px. #containerRTA is in my stylesheet and I apply it to a <div> that encapsulates everything in the <body> of my html page. Now with my content centred I want the whole html page to have a yellow background. I do not know how to achieve this. All I manage to do is set the actual background of just the content to yellow, not the margins. So my centred content is centred and the rest of the page is white.

Can anyone show me how to achieve this?

background-color: #FFFF00;
width: 650px;
height: 490px;
margin-left: -325px;
margin-top: -245px;
position: absolute;
top: 50%;
left: 50%;  
Question by:RupertA
  • 2
LVL 12

Accepted Solution

sivagnanam chandrakanth earned 1000 total points
ID: 38805064

background-color: #FFFF00;

Author Comment

ID: 38805135
that worked sivagnanam_c - will leave thread open in case anybody else wants to comment.

Assisted Solution

headshock earned 1000 total points
ID: 38805384
<!DOCTYPE html>
width: 650px;
height: 490px;
border:solid 1px #000;
margin: 0 auto;

margin-top: 50%;

body {background-color: #FFFF00;width:100%;height:100%;position:relative;}

<div id="containerRTA">
Your content goes here

Open in new window

adjust the margin-top till you have what you want!

Author Comment

ID: 38838806
That also works. Thank you both very much. I will split points.

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

588 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question