CODEWITHSUNDEEP
htmlcss
user3649338
user3649338

Reputation: 11

HTML, CSS - There is a white space at the top of the page which I want to remove

I am facing issues in having the div reach to the top of the page. There is a white space at the top of the page which I want to remove. Please find below the HTML:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Mastermind</title>
    <link rel="stylesheet" type="text/css" href="Style.css" />
</head>
<body>
    <div class="top">
       <div class="header">
        <table width="100%";>
            <tr valign="middle">
                <td style="width:30%">
                    <img alt="a" src="Images/images.jpg" />        
                </td>

                <td valign="middle" style="float:right; width:70%;">
                        Call us:+1 800 123 4567  |  F T G
                </td>
            </tr>
        </table>

       </div>
    </div>
</body>
</html>

Below is the CSS:

body
{
    background-color:#F0F8FF;
    width:100%;
    vertical-align:top;
    height:100%;
margin:0px;
padding:0px;
} 

.top
{
    background-color:#666;
width:100%;
height:25%;
margin:0px 0px 0px 0px;
margin-top:0px;
margin-left:0px;
margin-right:0px;
padding:0px;
}

.header
{
width:70%;
margin-left:15%;
margin-right:15%;
border:solid 1px black;
margin-top:50px;
}

I want the div top to be placed right at the top of the browser.

Upvotes: 0

Views: 132

Answers (4)

Swagat Bhetu
Swagat Bhetu

Reputation: 11

Just remove margin-top:50px; or keep margin-top:0px; inside .header

Upvotes: 1

Yiedpozi
Yiedpozi

Reputation: 300

Just remove margin-top on this code:

.header {
    width:70%;
    margin-left:15%;
    margin-right:15%;
    border:solid 1px black;
    margin-top:50px;
}

And change body instead of #BODY. :D

JSFiddle: http://jsfiddle.net/M65Zc/

Upvotes: 0

Vinm
Vinm

Reputation: 129

You can apply a css reset in the top of your css file like this :

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, #header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, hgroup, menu,  section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
margin: 1em 0 1em;
padding-left: 2em;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

And then, you set a margin: 0 to your .top and your .header classes.

Upvotes: 0

Adel
Adel

Reputation: 1468

Just remove margin-top: 50px; from the header, alos remove the # from body, then it will apply the margin 0 or make it -8 to reach the top exactly, look to your code from the JSFiddle from here

Upvotes: 0

Related Questions