CODEWITHSUNDEEP
htmlcss
Belgarion
Belgarion

Reputation: 159

Can't get page to display full width when shrinking

When I shrink the browser, the header and navigation bar does not extend till the end of the browser. It looks like this when I shrink the browser. I want the header and the navigation bar to extend till the end of the browser. When shrinked

When the browser is stretched, it's alright though! When browser is expanded

Here's my html code :

<body>

<div id="header">
Some text
</div>

<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

</body>

Here's the CSS for it:

/* CSS Document */
body {
background:red; 
}

#header{
    margin:0;
    background: white;
    height:90px;
    width:100%;
}


#nav {
    /* margin: 0px auto;*/
     padding-left: 100px;
     background: black;
     height:54px;
}

#nav li {
     float: left;
}

#nav li a {
     color: lime;
     font-size: 20px;
     font-weight: bold;
     line-height: 54px;
     margin-right: 94px;
     text-decoration: none;
}

Would really appreciate it if you could tell me what I'm doing wrong. I'm using Eric Meyer's reset too.

Upvotes: 0

Views: 225

Answers (3)

Leo
Leo

Reputation: 63

I would suggest to make your website Responsive instead, the @Naveen answer is so helpful but u want to keep in mind to edit a responsive css style for all devices something like: 

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

Upvotes: 1

Harish Ambady
Harish Ambady

Reputation: 13121

Update your css of list with percentage spacing as follows.

/* CSS Document */
body {
background:red; 
}

#header{
    margin:0;
    background: white;
    height:90px;
    width:100%;
}


#nav {
    /* margin: 0px auto;*/
     padding-left: 10%;
     background: black;
     height:54px;
}

#nav li {
     float: left;
    padding-right:9%;
}

#nav li a {
     color: lime;
     font-size: 20px;
     font-weight: bold;
     line-height: 54px;
     text-decoration: none;
    display:block
}

here is the demo: http://jsfiddle.net/vYgs5/

Upvotes: 2

Naveen D Almeida
Naveen D Almeida

Reputation: 877

Try this

#header{
    margin:0;
    background: white;
    height:90px;
    min-width:960px;
    width:100%;
}

here you can specify the min-width:--;

Upvotes: 3

Related Questions