469,630 Members | 1,178 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,630 developers. It's quick & easy.

Positioning, Overlap, and greater than 100% height/width

Hello,

I have built a site that uses two divs, one verticle, and one horizontal as graphic style for the ite. The problem I am having is that if the browser is resized very small the divs are then smaller than the website is wide. I have tried fixed positioning but then i get the dreaded overlap when the browser is smaller than the website. Absolute positioning gets rid of the overlap but then brings on the width issue. Is there a way to fix this or am I done for? I have tried everything I know.

Specifically I am referring to the hstripe and vstripe parts of the code.

Here is my code:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  5. <title>Chris Livengood</title>
  6. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
  7. <link rel="stylesheet" type="text/css" href="css/index.css"/>
  8. <link rel="stylesheet" type="text/css" href="css/links.css"/>
  9. <link rel="stylesheet" type="text/css" href="css/universal.css"/>
  10. </head>
  11. <body>
  12. <div id="hstripe"></div>
  13. <div id="main">
  14. <div id="vstripe"></div>
  15. <div id="header"></div>
  16. <div id="headerright"></div>
  17. <div id="body">
  18. <div id="menu">
  19. <?php require("phpext/menu.php"); ?>
  20. </div>
  21. </div>
  22. <div id="content">
  23. <div class="right">
  24.  
  25. <img src="images/image1.jpg" alt="Chris Livengood" class="topphoto"/><br/>
  26. <img src="images/image2.jpg" alt="Chris Livengood" class="photo"/>
  27. </div>
  28. <h2>Chris Livengood's Racing Blog</h2>
  29. <?php require("blog/08_20_08_blog.php"); ?>
  30.  
  31.  
  32. <div id="clear"></div>
  33. </div>
  34. </div>
  35.  
  36. </div>
  37.  
  38. </body>
  39. </html>
  40.  
Here is my CSS:

Expand|Select|Wrap|Line Numbers
  1.  
  2. #hstripe {
  3.     width: 100%;
  4.     height: 55px;
  5.     left: 0px;
  6.     margin: 200px 0px 0px 0px;
  7.     position: absolute;
  8.     background: url("../images/hstreamer.gif") no-repeat left #ff0000; }
  9. #main {width: 780px;
  10.     height: 100%;
  11.     padding: 0px;
  12.     margin: 0px auto 0px auto;
  13.     border: 0px solid #ff0000;}
  14. #vstripe {
  15.     padding-top: 2px;
  16.     width: 30px;
  17.     min-height: 700px;
  18.     height: 200%;
  19.     background-color: white;
  20.     margin: 0px 0px 0px 160px;
  21.     padding-right: 25px;
  22.     position: absolute;
  23.     top: 0px;
  24.     display: inline;
  25.     z-index: 1000;
  26.     background-image: url("../images/streamer.gif");
  27.     background-repeat: no-repeat; }
  28. #header {
  29.     position: absolute;
  30.     height: 200px;
  31.     width: 160px;
  32.     margin: 0px 55px 57px 0px;
  33.     background-image: url("../images/header_left.jpg");}
  34. #headerright {
  35.     float: right;
  36.     height: 200px;
  37.     width: 565px;
  38.     border: 0px solid white;
  39.     margin: 0px 0px 55px 215px;
  40.     background-image: url("../images/header_right.jpg");}
  41. #menu {
  42.     position: absolute;
  43.     width: 160px;
  44.     top: 260px;
  45.     padding: 0px;
  46.     margin: 0px 0px 0px 0px; }
  47. #sponsors {
  48.     background-color: white;
  49.     padding: 0px 2px 2px 2px;
  50.     width: 152px;
  51.     color: black; }
  52. #content {
  53.     float: right;
  54.     margin: 0px 5px 0px 0px;
  55.     width: 555px;
  56.     border: 0px solid white; }
  57. .right{
  58.     max-width: 300px;
  59.     padding: 0px 2px 2px 2px;
  60.     color: black;
  61.     float: right;
  62.     background-color: white;
  63.     margin: 7px -5px 7px 7px; }
  64. .topphoto {
  65.     background-color: white;
  66.     padding: 10px 10px 0px 10px; }
  67. .photo {
  68.     background-color: white;
  69.     padding: 10px 10px 10px 10px; }
  70. .clear {
  71.     border: 0px solid white;
  72.     clear: both;
  73.     width: 100%;
  74.     height: 1px; }
  75.  
I don't believe you can see the verticle error on my live test site but this is only becuase i haven't added content.

The Live test version can be found here: Click

The home page validates but I haven't check the rest of them resently. They all appear to display correctly excluding the error I have mentioned.

Thanks for your help,
Chris
Aug 1 '08 #1
4 3978
I hope all of the geniuses around are just struggling too, otherwise nobody cares.
Aug 1 '08 #2
drhowarddrfine
7,435 Expert 4TB
You may need to reposition the div in the markup to do what you want. Using 'absolute' is causing the div to collapse as it should.
Aug 2 '08 #3
Which div? I have tried various combinations but may have not found the right combination.
Aug 4 '08 #4
Well i did a complete code rewrite. I was able to achieve a the same exact look but removed all of the erros I discussed in this post.

I will post a link and the follow up code once I transfer all of the information over to the new code base.
Aug 6 '08 #5

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Frances Del Rio | last post: by
reply views Thread by dag | last post: by
6 posts views Thread by | last post: by
7 posts views Thread by GaryDean | last post: by
6 posts views Thread by sooshi | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.