CODEWITHSUNDEEP
htmlcss
cppit
cppit

Reputation: 4564

header and footer look terrible when I resize the browser window

I am having this issue where everything is aligned properly but when I resize the browser window it shows a scroll bar at the bottom to scroll horizontally ...when you scroll the header and footer are cut out and it looks really ugly. any ideas on how to fix that please ?

Upvotes: 0

Views: 603

Answers (4)

jamesplease
jamesplease

Reputation: 12869

The problem is that your #content div has width:1000px;, whereas the header and footer are only set to width: 100%.

You can patch this up by adding min-width: 1000px; to your header and footer selectors, so that they won't be shrunk any further than the width of the page.

Hope this helps!

Upvotes: 3

Mr. Alien
Mr. Alien

Reputation: 157314

You need to use this to fix it

body {
   width:100%; 
   min-width: 1000px;
}

As your #content <div> width is 1000px; and your header/footer are set to 100%; which generally never prints out of the size of your viewport so you can use this to fix

Upvotes: 2

mr.soroush
mr.soroush

Reputation: 1130

you can try this css:

html, body{
margin:0;
padding:0;
}

and this css for header and footer and content div:

header, footer, #content{
min-width: 1000px;
}

Upvotes: 3

Dipak
Dipak

Reputation: 12190

Your #content is causing the scroll because of 1000px width

Upvotes: 3

Related Questions