Jump to content

CSS Help: DIV not stretching full width


Napis

Recommended Posts

Hello everyone. I have a small problem and I hope someone can help me. Since I'm new at this.I'm creating a website with a fixed positioned bar at the very top that stretches to full width ofbrowser window:

#topdiv {background-image:url(../images/nav-bg.png);	  position:fixed;	  top:0px;	  left:0px;	  width:100%;height:75px;	  z-index:1; 	}

I created a second div right beneath it that I'd like it to stretch to full width of browser windowjust like the first one but when the user scrolls down, the content will go behind the top bar.

#services{background-image: url(../images/services-bg.png);background-repeat: repeat-x;position: absolute;top: 0px;left: 0px;right: 0px;width: 100%;height: 314px; }

it does stretch full width but only when the browser is maximized. The problem is that whenI add content to this div, or any other section and then I reduce the browser's size, theservices div will shrink as well. I'm attaching a picture of this problem for easier understanding. width_zpse540627c.jpg My html code is simple:

<!DOCTYPE html><html><body>  <div id="topdiv"> <div id="logo"><img src="images/logo.png"></div><div id="navmenu"><?php include("nav_menu.php"); ?></div> </div> <div id="services"><img src="images/services_hdr.png"></div> </body></html>

I hope someone can help me with some advice, why it's doing thiswhen i add content. Thank you very much in advanced.

Link to comment
Share on other sites

Don't use position absolute for #services, without it, it will stretch to full width anyway, and its height will automatically adjust to the content within it, if you wish to use z-index, use position relative, but use margin-top: -#px; to force it up, NOT top: -#px; Don't use width:100%; for body, html or #topdiv, but for #topdiv use right:0; instead, which produces a less problematic solution, when using position and you require 100% width to match browser window

Link to comment
Share on other sites

Don't use position absolute for #services, without it, it will stretch to full width anyway, and its height will automatically adjust to the content within it, if you wish to use z-index, use position relative, but use margin-top: -#px; to force it up, NOT top: -#px; Don't use width:100%; for body, html or #topdiv, but for #topdiv use right:0; instead, which produces a less problematic solution, when using position and you require 100% width to match browser window
try 1 html,body {height:100%;width:100%;} 2 html,body,#topdiv,#services {margin:0;padding:0;}
Thanks guys for the help, I tried both solutions but i'm still having the same problem. Still trying to figure it out.Thanks
Link to comment
Share on other sites

show us the source of loaded document, so we see all html code.
Thanks, I uploaded the website so it will be easier to see the problem. http://napis.byethost7.com/ I've tried relative and absolute postition and margins paddings 0 top-margins, min-widths, etc and nothing seems to work. I just dont understand how the topdiv works and reaches 100% widtheven when i add content on that div and resize the browser windowbut the services div will shrink The only way i can make it stretch 100% width when i reduce the browser window and with content in it, is that if i set the width to 1280px widthbut i dont think that'd be proper? i know it should work with just width:100% Thanks everyone for the help.
Link to comment
Share on other sites

You have set a width to #welcome container of 1225px, but not to the other elements, when you resize below this a scrollbar appears, so you can scroll the rest of this element, BUT! the other elements keep shrinking to width of browser window still, so it will be smaller in width to the #welcome container, give these other element min-width of 1225px; give body a margin of 0, also the left: 30px; of #welcome, cause the width to be increased also, so use margin or padding instead. Avoid left:; top: etc on position: relative elements, it causes more problems when you do so, the top: left etc are only usually used when overlapping is required when using position: absolute; or fixed; most of the time margin: float; padding would be used.

Link to comment
Share on other sites

You have set a width to #welcome container of 1225px, but not to the other elements, when you resize below this a scrollbar appears, so you can scroll the rest of this element, BUT! the other elements keep shrinking to width of browser window still, so it will be smaller in width to the #welcome container, give these other element min-width of 1225px; give body a margin of 0, also the left: 30px; of #welcome, cause the width to be increased also, so use margin or padding instead. Avoid left:; top: etc on position: relative elements, it causes more problems when you do so, the top: left etc are only usually used when overlapping is required when using position: absolute; or fixed; most of the time margin: float; padding would be used.
Oooh woow.. thanks so much for the help. That worked perfectly. I'm still learning CSS and this has been of great help.I'm happy :)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...