473,241 Members | 1,485 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,241 software developers and data experts.

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 4299
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

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

Similar topics

8
by: Asad | last post by:
Hi, I am basically trying to accomplish drop down menus for navigation on a site. And I'm pretty much done except I am having one problem. The z-index is not working with relative positioning! ...
1
by: Frances Del Rio | last post by:
don't know if I'll succeed, have spent a lot of time already trying to figure this out: I would like to position a footer (co. name, address, etc..) at the bottom of browser page, in such a way...
0
by: dag | last post by:
Hi! I would like to do an overlap window, over my main window (of my application), with a Progress Bar. Exactly when I push a button of my application I want show a window, with a Progress bar,...
6
by: | last post by:
I just installed VS 2005. Was working with 2003 and .Net 1.1. Trying to get the feel for a master page and I'm having some issues. I'm looking for a pretty basic setup. Standard header with an...
7
by: GaryDean | last post by:
In my old 1.1 apps the default was MS_POSITIONING="GridLayout" and Textboxes and labels and such always had POSITION: absolute; and I never had any distortion when the page was rendered. Life was...
2
by: nino9stars | last post by:
Hello, I have just started messing with absolute positioning on webpages, and it definitely let's you do some creative things. Well, after much searching and help, I got the images I was using...
0
by: sknonline | last post by:
Greetings. I am having troubles using absolute positioning in IE6. When I establish the width as 100%, it's not spanning the entire width of the browser. It works in Firefox, Safari, and IE7.......
6
by: sooshi | last post by:
Hi all, The height of my page needs to be flexible as the page contains columns with lists which can vary in length. I also have a footer which needs to be stuck to the bottom. I managed to do...
8
by: webster5u | last post by:
Hi, I'm encounter a problem here. I hope somebody able helping me. i'm put a "log out" hyperlink overlap a image and that particular image is inside a table cell. I also try align the hyperlink on...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.