CODEWITHSUNDEEP
htmlcss
Shyam Kashyap
Shyam Kashyap

Reputation: 61

CSS Body and Header Issue

I have used the following code for the body as its a responsive site

.body {
    margin: 0 auto;
    width: 70%;
    clear: both;
}

After body i have added a header with css as below

.topheader {
    height: 5%;
    background-color: #ff6d00;
    width:100%
}

The Problem what i am facing is i need the header 100% but its fixing to 70% because of the body width.

I need the body width 70% also i need the header width 100% inside body.

Is there any chance we can align it like this?

Upvotes: 1

Views: 3703

Answers (4)

Vivek Mahto
Vivek Mahto

Reputation: 314

See if this works...

<html>

<head>
    <style type="text/css">
        body{ 
            color: #000000;
            font-size: 87.5%;
            font-family: arial;
            line-height: 1.5;
            text-align: left;
        }
        .body{
            margin: 0 auto;
            width: 70%;
            clear: both;
        } 
        .topheader{ 
            height: 5%;
            background-color:#ff6d00;
            width: 200%;    
            } 
        .laser{
            float:left;
            padding:40px;
            margin-top:-35px;
        }
    </style>

<body class="body">
    <div class="topheader" style="margin-left:-250px">
        <nav> 
            <ul style="margin-left:180px;">
                <li class="laser">Books</li>
                <li class="laser">Video</li>
                <li class="laser">Audio</li>
                <li class="laser">Download</li>
                <li class="laser">Login</li> 
                <li class="laser">Register</li> 
            </ul>
        </nav>
    </div> 
</body>

</html>

Upvotes: 0

Vivek Mahto
Vivek Mahto

Reputation: 314

The problem you are having is becuase you have written body as a class.

.body
{
    margin: 0 auto;
    width: 70%;
    clear: both;
}

Instead of that you have to write only body, remove the dot before body.

body
{
    margin: 0 auto;
    width: 70%;
    clear: both;
}

If you are taking body as a class in that case write

First write the body class

.body
{
    margin: 0 auto;
    width: 70%;
    clear: both;
}

Then write topheader class like this 

.body  .topheader
{
    height: 5%;
    background-color:#ff6d00;
    width:100%
}

Upvotes: 0

Vipul Nayee
Vipul Nayee

Reputation: 35

You just Check this Demo.I think you want to like this.You never give the width to body. 

body{padding:0;margin:0 auto;background-color:#ccc;}
.header{float:left;width:100%;position:absolute;top:0;left:0;padding:10px 0;background-color:#000;color:#fff;margin:0;}
.container{margin:0 auto;width:70%;background-color:#fff;height:200px;}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>
<div class="container">
<div class="header">
This is an Demo

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

Upvotes: 2

Broken Dust
Broken Dust

Reputation: 1

So you want that your header is about 100% of the viewport and the body only had 70% of the viewport?

I would say you have to set the css:

#viewport
{
 width:100%;
 [...]
}
.body
{
width:70%;
[...]
}
.header
{
width:100%;
[...]
}

When you have the body that is inherit from viewport that is 100% of the width, you can set the body to 70% and the header, that is inherit from viewport too, had about 100%.

Of course you can set the header outside from the body and give him 100%, so you don't need the extra #viewport.

Upvotes: 0

Related Questions