CODEWITHSUNDEEP
css
Ahmed
Ahmed

Reputation: 15069

css applying width on the body

I am completely new to html and css so my question could be very basic but hope you guys can help me udnerstnad,

I am using following css code 

    body
    {
        background-color:Olive;
        width:550px;           
        font-family:Verdana;
    }

I am setting width to 550px and as a result all my paragraphs contract to 550px but the background is applied to the whole page even beyond the 550px

I understand that because of inheritance the child elements would have inherited the width property from body, but I was thinking that if I set width property of body to 550px then background should be visible in 550px wide area and not the full page,

I don't get the logic here..

Upvotes: 3

Views: 1644

Answers (6)

Roddy of the Frozen Peas
Roddy of the Frozen Peas

Reputation: 15219

If you apply a color to the html, for example html { background-color: yellow; }, you'll see this is not the case at all. The <body> tag is special in that it is intended to encompass the entire contents of the HTML page. When you apply a background, then, the default is for it to paint the entire background page, unless htmls background has otherwise been set.

See this jsfiddle example. Like the other posters above, I highly recommend using a <div> element to wrap, size, and color your content.

This is described in the CSS2 specifications as so:

The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.

Upvotes: 2

Rahul Bhansali
Rahul Bhansali

Reputation: 135

This is what you are looking for.

<html>
    <head>
        <title>
            Your title goes here.
        </title>
    </head>
<style type="text/css">
#test
{
    background-color:Olive;
    width:550px;           
    font-family:Verdana;
}
</style>
<body>
    <div id='test'>
    Hello
    </div>
</body>

Another answer is:

<html>
<head>
    <title>
        Your title goes here.
    </title>
</head>
<style type="text/css">
    html
    {
        background-color:white;
    }
    body
    {
        background-color:Olive;
        width:550px;
        font-family:Verdana;
    }
</style>
<body>
    Hello
</body>
</html>

Upvotes: 0

Ajay Patel
Ajay Patel

Reputation: 5418

You should try this http://jsfiddle.net/ajaypatel_aj/8tfKc/ HTML

<div id="wrapper">Test me!</div>​

CSS

*{  
   margin:0;  
   padding:0;  
}  

body{  
   text-align:center; /*For IE6 Shenanigans*/  
    font-family:Verdana;
}  

#wrapper{  
   width:550px;  
   margin:0 auto;  
   text-align:left;  
    background-color:Olive;
} 
​

Answer is simple applied body color will set to whole page you must have to use div .

Upvotes: 0

Kanaiya Katarmal
Kanaiya Katarmal

Reputation: 6118

css 

#wrapper {
    width: 550px;
    margin: 0 auto;
    text-align: left;
}

HTML:

<body>
    <div id="wrapper">
        Piece of text inside a 550px width div centered on the page
    </div>
</body>

Upvotes: 0

Snow Blind
Snow Blind

Reputation: 1164

You can use a container div that wraps your whole page and acts like a "fake" body. Then if you apply these style to this div your problem will be solved.

Upvotes: 0

Mike
Mike

Reputation: 781

Why not wrap your content in a div, and set the properties to that?

<body>
<div class="content">
 ... content here
</div>
</body>

and apply the same classes to the div

.content
    {
        background-color:Olive;
        width:550px;           
        font-family:Verdana;
    }

Upvotes: 1

Related Questions