CODEWITHSUNDEEP
htmlcss
Scorb
Scorb

Reputation: 1950

div fit to top of page

I am trying to create a div element that fits to the top of the page, and fills the width. I have it filling the width, but I can not get it to fit to the top of the page, there is a small gap above the div.

I have set the body to have 0 margin and 0 padding, so what is creating the ~20px gap on the top.

my html is as follows

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Photography</title>    
    <style>
        p {
            padding-top: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
            padding-left: 20px;
        }    
    </style>
</head>
<body bgcolor="#bbbbbb" style="margin:0;padding:0">

    <div style="background-color:#999999;margin:0;padding:0">
        <h1 style="color:#ffffff" >Photographs</h1>
    </div>

    <div>
        <p align="center" ><img src="IMG_2574.png" alt="Campground" style="width:;height:;"></p>
        <p align="center"><img src="IMG_2593.png" alt="Lake Sunset" style="width:;height:;"></p>
        <p align="center"><img src="IMG_2702.png" alt="Hudson River" style="width:;height:;"></p>
        <p align="center"><img src="IMG_3129.png" alt="Central Park" style="width:;height:;"></p>
        <p align="center"><img src="IMG_3229.png" alt="The Met" style="width:;height:;"></p>
        <p align="center"><img src="IMG_3384.png" alt="Break Dancer" style="width:;height:;"></p>
        <p align="center"><img src="IMG_3486.png" alt="Brooklyn Bridge" style="width:;height:;"></p>
        <p align="center"><img src="IMG_3656 2.png" alt="Rockefeller Center" style="width:;height:;"></p>
        <p align="center"><img src="IMG_3809 2.png" alt="Times Square" style="width:;height:;"></p>
        <p align="center"><img src="IMG_3824 2.png" alt="Top of the Rock" style="width:;height:;"></p>
        <p align="center"><img src="IMG_7620.png" alt="Lake Louise" style="width:;height:;"></p>
        <p align="center"><img src="IMG_7907.png" alt="Mt Hood" style="width:;height:;"></p>
        <p align="center"><img src="IMG_7950.png" alt="Multnomah Falls" style="width:;height:;"></p>
        <p align="center"><img src="IMG_8193.png" alt="Cape Kiwanda" style="width:;height:;"></p>
        <p align="center"><img src="IMG_8254.png" alt="Yaquina Head Lighthouse" style="width:;height:;"></p>
        <p align="center"><img src="IMG_8377.png" alt="Cape Perpetua" style="width:;height:;"></p>
        <p align="center"><img src="IMG_8441.png" alt="Simpson Reef" style="width:;height:;"></p>
        <p align="center"><img src="IMG_9711.png" alt="Nevada" style="width:;height:;"></p>
        <p align="center"><img src="IMG_9730.png" alt="Salt Flats" style="width:;height:;"></p>
    </div>
</body>
</html>

Upvotes: 0

Views: 792

Answers (4)

Javed Iqbal
Javed Iqbal

Reputation: 69

include following code

<head>
....
<style>
#your_div_id {
            height: 100%;
        }
</style>
....
</head>

Upvotes: 0

Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

div{background-color:#999999;margin:0;padding:0}
h1{margin-top:-8px;color:#ffffff;}
<div \>
    <h1  >S.Field Photographs</h1>
</div>

Upvotes: 0

Aakash Thakur
Aakash Thakur

Reputation: 3905

You can use * to remove any margin or padding that the browser adds and can then give any custom padding or margin to your elements.

Use this at top of your css:

*{
   margin:0;
   padding:0
}

Upvotes: 1

john c. j.
john c. j.

Reputation: 1185

Just add this:

h1 {
    margin-top: 0; /* It will fix the top margin */
}

Headings have default top and bottom margins. In Chrome, default margin is 0.67em, which will give you approximately 20px.

h1 {
    -webkit-margin-before: 0.67em;
}

That's why we need to set it to zero.

Upvotes: 1

Related Questions