CODEWITHSUNDEEP
htmlcss
Brandyn
Brandyn

Reputation: 1017

Getting Background Color to cover the whole area of a website

I didn't really know how to word this question, but anyway, My website kind of looks rather weird at the moment. I had it looking perfectly well, however i changed it due to the fact that the Footer was taking up the whole main section of the page (and i wanted to add color variations between the footer and main section).

So what i would like to know is how do i get the Main Area Text background color cover everything from the navbar to the footer (as wide as the navbar also)? I would make change it to using pixels, but wouldn't that mean to much guessing as you decide to change it? Surely there is an easier way!

Thanks to any help provided

Code:

.mainsection{
float:left;
width: 660px;
margin:30px;
background-color:#999;

}

.center{
background-color:#999;  
}

HTML:

<div class="center">

            <section class="mainsection">
                <p>Main Area</p>
            </section>

            <aside class="sidenews">
                This is the side news
            </aside>
        </div>

Upvotes: 0

Views: 1803

Answers (3)

Vbiz Solutions
Vbiz Solutions

Reputation: 27

try this ; create one new class for all main page like .center and add below styles in that i hope this is help you.

body{background:#999;width:100%;height100%;}
.center{margin:auto; width:960px;}

Upvotes: 0

RandomUs1r
RandomUs1r

Reputation: 4190

Another thing you can try is wrapping all the areas you want a certain background color in a div, then set that div's class and do a background color property in that class. You'd have to remove background color property from the rest of your classes for this to work. You can further control it with !important.

Upvotes: 0

Bart Karp
Bart Karp

Reputation: 659

How about:

html {
   background: #999;
}

or 

body {
   background: #999;
}

?

Upvotes: 1

Related Questions