div width not stretching 100% on lower resolutions

views:

answers:

div width not stretching 100% on lower resolutions

I'm working on a website for a client, and I'm not excellent at css... still in the process of learning a lot about divs. I made a div that is supposed to stretch 100% of the page, and it works, unless a user is browsing from a lower resolution (1024 x 768 for example) and has to scroll horizontally, the div will then only extend to the original length of the browser window.

That coupled with the fact that my footer is behaving the same way, and is not sticking to the bottom of the page.

The code/website can be found at: http://cliqthis.com/temp/roadhouse/index.php

Thank you for any assistance, or an explanation of why this is happening would be helpful as I am still in the process of learning.

Set up a minimum width for the div.

div.class { /* ... */ min-width: ___px !important; /* ... */ }

Alan 2010-10-02 18:41:56

That should be min-width, I believe...

ClarkeyBoy 2010-10-03 03:44:08

Yes, my mistake

Alan 2010-10-03 16:28:18

+3 A:

You see the scrollbar for resolution 1024x768 because <div id='container'> has a width of 1064 pixels set on it. The parent div will have a minimum width of 1064 due to this.

Jey Balachandran 2010-10-02 18:43:01

well, actually #container isn't the parent div of .top_menu (which is the div that should stretch to 100%) it's actually .container_12 which is also set to a fixed px rate, but if I change that to 100% too it still doesn't fix the problem.

2010-10-02 23:21:49

+1 A:

Are we talking about the black bars not extending all the way to the right?

You need to make sure not only that those divs' widths are 100%, but that all their ancestors' widths are also 100%. With normal (static) positioning, the 100% width means 100% of the element's parent's width.

Using the Web Developer addon in Firefox, with Outline Current Element turned on should prove very helpful in determining which elements aren't as wide as they need to be. (Move your mouse around the page and it will outline the element you're over, and tell you the css selector path to it).

Also you might want to compare the structure to the original template you used. It seems odd to me that, for example, you have an empty div.#footer element, and then a table.foot element after it, rather than inside of it. Perhaps you accidentally broke something there?

bemace 2010-10-02 21:08:41

Yes, I understand your suggestions (except for maybe the minimum-width one), so I went to see which divs were the parent div of the black bars (yes, I'm speaking about the black bars on the page... they stretch to 100% but if the resolution is lower then they only fit to the browser window size). The div which is supposed to stretch 100% is .top_menuthe parent of that div is .container_12however,

2010-10-02 23:12:56

even if I give container_12 a definition of width: 100%, the .top_menu div still behaves in the same manner...I could possibly be making an error, but even following your suggestions doesn't seem to have any effect on the behavior of the div.

2010-10-02 23:12:59

I can't tell, but some of your fancy javascript may be rearranging the DOM so that elements are rendered in a different hierarchy than they appear in the html source. Using Web Developer Toolbar's "View Generated Source" option may help. It's also possible for javascript to alter style settings. If you can't find anything there you narrow it down using trial and error. Keep commenting stuff out until it stops happenning and then you'll know where to focus your attention.

bemace 2010-10-02 23:54:47

I have just been doing some fiddling in Google Inspect Element tool. I removed all the content from the div in question, and removed the class from the div. Apparently the computed style is 938px. I have scoured all the css files but cant find 938, although I have to admit I didnt look for 90% or anything like that. I too think it could be JavaScript stuff. It does seem very odd, since I set the div to 100% and no other styles were being applied to it. I also gave the body position: relative too, but it didnt help. Will have another look at some point if you are still suck later.

ClarkeyBoy 2010-10-03 00:04:02

I will check the javascript, I think you may be on to something. Thank you very much!

2010-10-03 00:11:40

No probs. Let us know what you find out, and if you solve it or not...

ClarkeyBoy 2010-10-03 00:36:31

I don't know, I tested something without the javascript etc. It is located at:http://www.cliqthis.com/temp/rh2/there is no javascript, and there is only two divs. One that is width: 100%; and one that is width: 1900px;if you notice, the same problem is occurring on the one that is width: 100%; when you view the page on a lower resolution and you scroll horizontally. the div which is supposed to stretch 100% stays put at the length of the browser window, where as the div that is 1900px stretches to it's length regardless of the browser window size.

2010-10-03 00:36:42

not sure if this is just the normal behavior of divs?

2010-10-03 00:37:02

This shouldnt be the normal behaviour I have certainly not seen this kinda thing before. The body should expand with the 1900px div. Let me have a butchers - will post back in a few minutes.

ClarkeyBoy 2010-10-03 03:30:05

Well I have had a look - and created a page in Dreamweaver. I tried creating a div, then nesting two divs within that div. One was set to relative 100% and the other to absolute 1900px, as in your example. It was then that I realised that anything set to absolute is taken out of the document flow (is that the correct term?). Anyway the result is that absolute elements are ignored when the browser works out what the width of each parent element should be - it is, in fact, the correct behaviour you are seeing on the example page. Let me have a look at your original problem again...

ClarkeyBoy 2010-10-03 03:43:32

I have taken another look and notice that it is the background image which is causing the scrollbar, and you know the width of the image anyway. Since you therefore know the minimum width of the entire page, why not set the width of the body to the current image width and then your problem will be solved..? You could set the image width to be 100% then (limiting the absolute widths (px, not %) to **just** the body tag). I havent experimented with this but it should work fine.

ClarkeyBoy 2010-10-03 03:50:36

ansaurus

tags:

views:

answers:

div width not stretching 100% on lower resolutions

related questions