CODEWITHSUNDEEP
css
user1050619
user1050619

Reputation: 20856

CSS alignment Issue with Headers

Im a newbie to CSS and created this html file for my testing...but the results are not what I expected..

Here are my questions,

  1. What would be the correct width of my IE window.
  2. What would be the perfect height of my window..When I specify a value nothing changes.
  3. I have created 3 divisions- Header, Footer and content..When I view it..there is a big space between each of these sections..Why do they occur?

Code follows:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body
            {
                background-color:#d0e4fe;
                width:1400px;
                height:1000px;
            }

            h1
            {
                color:orange;
                text-align:center;
            }

            #div-1
            {
                background-color:red;
            }
            #div-2
            {
                background-color:Green;
            }
            #div-3
            {
                background-color:Blue;
            }


        </style>

    </head>

    <body>

        <div id="div-1">
            <h1>Header<h1>
        </div>

        <div id="div-2">
            <h1>Content<h1>
        </div>

        <div id="div-3">
            <h1>Footer<h1>
        </div>


    </body>
</html>

Upvotes: 0

Views: 70

Answers (2)

DOCbrand
DOCbrand

Reputation: 339

  1. The width on your body tag should be set to "width: 100%;" This will cause the body tag to take up the entire width of the window, and your colored div sections will also stretch the full width.
  2. You can set the height on the body tag to either "height: 100%;" or "height: auto;". Depends on what you are doing exactly.
  3. The space is coming from your h1 tags you have inside each of those divs. They have a browser-defaulted margin set to them. If you set the css property to "margin: 0px" that should eliminate all that extra space.

Upvotes: 2

Ryan Kinal
Ryan Kinal

Reputation: 17732

First, you don't define the width or height of the window in CSS. It just doesn't happen. You may specify the width of particular elements on your page, but that is a slightly different matter. Remove your height and width properties.

Second, your divisions have spaces between them due to the default margins that are set on h1 tags. If you want to remove them, then set margin: 0 on your h1 in your CSS.

Third, you may want to check out this CSS tutorial at HTMLDog

Upvotes: 1

Related Questions