Latest Announcemnent
New thread
Status
Not open for further replies.
N

Napis

Member
22
2011
1
0
Hello, I have a small problem with my website I hope someone can help.

I created a a fixed div that streches full screen: no problem with that

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

}
Right under that i created another div that i want to strech full width:

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

}
Now the problem is, when i view it in my browser at full size, it does stretches full width, however when i add content to this div and then resize my browser, i get a horizontal scroll bar and when i scroll right, the div won't strech at full width.

Im adding an image so you can see it more clearly.
width_zpse540627c.jpg


my html code is just:

<!DOCTYPE html>
Code: 
<html>
    <head>
    <meta charset="utf-8">
    </head>
<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'd appreciate any help. Thanks a lot
 
5 comments
Hmm... that's weird. The only thing I found wrong it that you're not using the slash at the end of the <img> tags and it's alt attribute as you should - as <img src="X.png" alt="" />.

Have you tried setting the #services width @ min-width:100% ?
 



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% width
even when i add content on that div and resize the browser window
but 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 width
but i dont think that'd be proper? i know it should work with just width:100%


Thanks everyone for the help.
 
Status
Not open for further replies.
Back
Top