CODEWITHSUNDEEP
htmlcssbackground-image
Philip7899
Philip7899

Reputation: 4677

How do I get my html to take up the entire browser window?

If my browser window is large enough, the web page is fine. If it is smaller and I scroll to the right, my backgrounds don't go horizontally across the entire browser window. They stop inside the webpage. I have made the body background blue so you can see where the background is ending. I want to make it so the actual content and background pictures end where the browser window ends and have there be no blue. The site is up at avidest.com/schneer. Here is the CSS:

.main {width:100%; padding:0; margin:0 auto; min-width: 1020px;}
.header { background:url(images/slider_bgpng200.png); background-repeat: repeat-x; padding:0; margin:0 auto; width: 100%; }
.header .headertop{width: 100%; background: #d3e5e8; height: 30px;}
.block_header {margin:0 auto; width:1200px; padding:0; border:none; }
.slider { background: transparent; margin:0 auto; padding:0; height:420px;}  
.slider .gallery { margin:0 auto; width:980px; height:420px; padding:0;}

And here is the html:

<div class="header">
   <div class="headertop"> 
       <div class="header_text"><a href="#">Email</a> | <a href="#">Client Login</a> </div>
   </div>
   <div class="block_header">
       <div class="slider">
          <div class="gallery">
          </div>
      </div>
   </div>
</div>

Thanks.

Upvotes: 0

Views: 705

Answers (4)

Krik
Krik

Reputation: 445

I see a huge amount of variance in your widths. I would think "main" "header" "block_header" all would be the same width. Also note that 100% is not 100% of the parent element it is 100% of the window size especially when the parent element is larger than the window. Set the widths to a definitive numbers. If you want the content to fill the users screen then set the parent to 100% first and then all the child element can be set to 100% to fit the parent elements width.

Upvotes: 0

mavrosxristoforos
mavrosxristoforos

Reputation: 3643

You have contents that go beyond the .main div.
If you add in your div.main { overflow: hidden; } you will see that it works as expected, because nothing is pushing it to a bigger width than expected.

Upvotes: 4

betatester07
betatester07

Reputation: 691

Why do you have .main class? Didnt you forgot some elements?

In your .header, you set up background and width 100%. so the width of element with .header class will be 100% of its parent element. Whats the parent element of <div class="header">?

Upvotes: 0

bizzehdee
bizzehdee

Reputation: 21003

for 100% height, you need html and body tags to be 100% also

add this to your CSS

html, body { height: 100%; width: 100%; }

you would then have to create a fake background out of a 100% by 100% wrapper div and place your background within that to get the effect you are looking for

Upvotes: 1

Related Questions