CODEWITHSUNDEEP
htmlcss
user3058067
user3058067

Reputation: 327

Body width 100% issue

I have a problem with my body selector. When I make my windows smaller it doesn't keep the body width at 100%, and I don't have any clue why.

body
{
  margin:0px !important;
  background:url(../images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width:100%;
  height:100%;
}

This is generating a footer bug when I make the window smaller because the body is not on the whole width.

I can't add pics to show because I don't have 10 rep, but you can check at this link and make the windows smaller: http://websoftit.ro/lackoflove/about.php?active=1

i dont want my website to be responsive i just want my body to be 100% on any resolution. here are the links of pics and problem i have when i make the window smaller: i.imgur.com/70sj43G.png i.imgur.com/OgMZVxa.png

Upvotes: 1

Views: 7062

Answers (4)

Jose Mar
Jose Mar

Reputation: 694

document.onresize = function() {
   document.body.style.width = document.body.scrollWidth+"px";
}

This can help you, when the document is resized, this callback reset body width to 100% of document's width.

Upvotes: 0

Michał Rybak
Michał Rybak

Reputation: 8706

The problem is actually caused by div#banner, which has the following style:

 #banner {
   position: absolute;
   width: 150px;
   margin-top: 5px;
   margin-left: 1040px;
 }

Margin set to 1040px together with width: 150px causes your banner to have overall width of 1190px, that is wider than the rest of site.
I assume you've used position: absolute on your banner to avoid this problem, but this is not enough to make it work like you want.
You can read more about solution to this issue here.

Note: The above solves your problem, but won't help making your site responsive.
If responsive design is your goal (you didn't say this, I'm just guessing that maybe it is), I'd recommend looking at some tutorials to get the basic rules etc.
There also are responsive frameworks like Bootstrap or Zurb Foundation that help making responsive websites.

Upvotes: 1

JonathanR
JonathanR

Reputation: 48

The child divs are not set to fluid widths. If you change the CSS "width" to "max-width" you'll get a chance to see how the layout changes at different screen widths. There will definitely be further updates needed to your CSS, but this will get you started.

Upvotes: 0

David Jones
David Jones

Reputation: 4305

You have widths set inside the body. For example your navigation has a width of 1060px as does your main_bg div.

Upvotes: 2

Related Questions