13 replies [Last post]
phaedo5
phaedo5's picture
Offline
newbie
Last seen: 11 years 33 weeks ago
Timezone: GMT-6
Joined: 2010-02-23
Posts: 4
Points: 5

I have an issue. The issue is that if I set a div at 100% wide with a background color or image then everything works fine upon page load. If i shrink my window in width it still works. If I shrink my window to the point where there is a scrollbar at the bottom then I get an issue when I scroll to the far right. My 100% background is not 100% anymore.

It makes sense to me that it's 100% of the loaded window. What I don't understand is what could be the workaround on something like that. Any thoughts?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 32 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

don't declare a width. it's

don't declare a width. it's auto by default for block level elements (divs) and will take up all available width anyway.

phaedo5
phaedo5's picture
Offline
newbie
Last seen: 11 years 33 weeks ago
Timezone: GMT-6
Joined: 2010-02-23
Posts: 4
Points: 5

That's true. But it sill

That's true. But it sill only goes as wide as the window. It doesn't stretch past the scroll bars as you move right.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 32 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

post a link

post a link

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 50 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Wolf, I have seen this, you

Wolf, I have seen this, you can do it with any simple box. Somee browsers (I know FF is one) when you scroll to the right, does not continue the background colour of a 100% wide box as you scroll to the right.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="content-language" content="en">
    <title>F00</title>
    <meta name="description" content="div colour does not scroll right">
<style type="text/css">
* {
  margin: 0;
}
 
#red {
  width: 100%; /*you can comment out, same problem*/
  height: 200px; /*fill div up a bit*/
  background-color: #f00;
}
#red p {
  width: 700px;
  background-color: #0f0;
}
 
</style>
  </head>
<body>
  <div id="red">
    <p>me me me me meee....</p>
  </div>
</body>
</html>

Here, p stretches across when you've shrink to scroll-bar, but #red does not.

I'm no expert, but I fake one on teh Internets

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote: does not continue the

Quote:

does not continue the background colour of a 100% wide box as you scroll to the right.

Well it wouldn't and shouldn't Puzzled

It's asked to be 100% of the viewport, scrolling the screen to the right doesn't redraw the screen no further calculations are made?

Simply don't declare a width at all and watch what widths other elements may have by way of mins and maxs

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 32 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

SP, you're right of course.

SP, you're right of course. But this is why I asked to see the code, so we could recommend a wrapper or a min-width on the parent...

phaedo5
phaedo5's picture
Offline
newbie
Last seen: 11 years 33 weeks ago
Timezone: GMT-6
Joined: 2010-02-23
Posts: 4
Points: 5

Ok. I've made a super simple

Ok. I've made a super simple html example of what I am talking about. If you resize your browser window to have a horizontal scrollbar and then scroll left to right, then you will notice that the 100% is not working. I get why that may be. I just don't get what the workaround for this would be.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>Website</title>
        <style type="text/css">
		body {
			margin: 0; 
			padding: 0; 
			border: 0; 
			font-size: 76%; 
			color: #e2eaee; 
			background: #364850; 
			text-align: left;
			font-family: Arial, Helvetica, sans-serif;
			}
 
		#beta_banner {
			height: 110px; 
			margin: 0 auto; 
			background: red url(<a href="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" rel="nofollow">http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif</a>) top left repeat-x; 
		}
		</style>
    </head>
    <body>
 
        <div id="beta_banner">
            <div style="width: 960px; height: 50px;">HEADER</div>
        </div>
 
        <div style="margin: 0 auto; width: 1200px; min-height: 870px; background: green; color: #e2eaee;">
            Cras dictum. Maecenas ut turpis. In vitae erat ac orci dignissim eleifend. Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra. Sed pulvinar, felis id consectetuer malesuada, enim nisl mattis elit, a facilisis tortor nibh quis leo. Sed augue lacus, pretium vitae, molestie eget, rhoncus quis, elit. Donec in augue. Fusce orci wisi, ornare id, mollis vel, lacinia vel, massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        </div>
 
 
    </body>
</html>

pocketbikeMike
pocketbikeMike's picture
Offline
newbie
FL
Last seen: 11 years 33 weeks ago
FL
Timezone: GMT-5
Joined: 2010-02-24
Posts: 2
Points: 2

Stomme poes wrote: Wolf, I

Stomme poes wrote:

Wolf, I have seen this, you can do it with any simple box. Somee browsers (I know FF is one) when you scroll to the right, does not continue the background colour of a 100% wide box as you scroll to the right.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="content-language" content="en">
    <title>F00</title>
    <meta name="description" content="div colour does not scroll right">
<style type="text/css">
* {
  margin: 0;
}
 
#red {
  width: 100%; /*you can comment out, same problem*/
  height: 200px; /*fill div up a bit*/
  background-color: #f00;
}
#red p {
  width: 700px;
  background-color: #0f0;
}
 
</style>
  </head>
<body>
  <div id="red">
    <p>me me me me meee....</p>
  </div>
</body>
</html>

Here, p stretches across when you've shrink to scroll-bar, but #red does not.

Where exactly does this go? Still new at this.

Mod edit: Don't post links to your own site if it is unrelated to the discussion.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 1 week 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

Fluff spam.

Fluff spam.

phaedo5
phaedo5's picture
Offline
newbie
Last seen: 11 years 33 weeks ago
Timezone: GMT-6
Joined: 2010-02-23
Posts: 4
Points: 5

Is my post being called spam?

Is my post being called spam? It's just a really basic html page illustrating the issue i'm having. Should be easy to past that code into a text document and see the rendered html. I just don't know how else to show what i'm talking about. And code was asked for.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 1 week 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2050
Points: 2282

phaedo5 wrote:Is my post

phaedo5, if nothing is quoted you can assume that it is intended for the post above. pocketbikeMike looks like a fluff spammer to me. Just getting his link in where it doesn't belong.

Fluff spamming is when someone posts a non-sense post to either pad their post count, because some forums disallow posting of links by new members, or quotes a previous posts to get their spam link in.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 32 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

phaedo5, you've given the

phaedo5, you've given the green div a width of 1200px. you could either give the header div (or beta_banner) the same width or wrap the whole page in a div and simply give the wrapper a width (probably the best method).

I should mention, (assume viewport width to be <800px) the beta_banner will be full width of viewport, even though it's child div is longer - it overflows it's parent, which is correct behavior.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 50 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

widths

Hugo wrote:

Simply don't declare a width at all and watch what widths other elements may have by way of mins and maxs

Simply don't declare a width? Sorry, try again, that doesn't help the OP at all. Or read my code comments.

I'm no expert, but I fake one on teh Internets