Jump to content
Napis

CSS Help: DIV not stretching full width

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.

Share this post


Link to post
Share on other sites

try1 html,body {height:100%;width:100%;}2 html,body,#topdiv,#services {margin:0;padding:0;}

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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 :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...