ansaurus

Question

Answer 1

+1 A:

well, you have #header set to 100% of it's containing block (which would be the body). When you shrink the body, the header's width shrinks. If the body's width is less than the container's width, the black bar will not extend the whole way.

What exactly would you rather it did?

-not have a scroll bar: take out the container, center the text using #header

-the black bar expands the whole distance: The easiest way to solve that is to give the container a background-color.

cofiem 2009-01-16 05:25:31

"give the container a background-color" is exactly what I thought of.

strager 2009-01-16 05:30:35

Though this works for the example I provided, it doesn't work within the context of my website. The reason for this is that I use the container class multiple times throughout my code. However, it isn't supposed to have a gray background multiple times.

John 2009-01-16 05:42:52

What do you do when it doesn't have a background? If it's different colours, you could just use multiple css classes.

cofiem 2009-01-16 06:20:36

Cofie, that's what I ended up doing =/Wanted to know if there was a better way.

John 2009-01-16 06:32:13

Answer 2

A:

Change:

width: 978px;

to:

max-width: 978px

That seemed to do the trick in FF3, IE7 and chrome.

Chris Missal 2009-01-16 05:28:30

Though this works for the example I provided, it doesn't work within the context of my website. The reason for this is that setting my "wrapper" to have a max-width and not a width causes parts of my page to shrink when I don't want them too if the browser window is too small to contain them.

John 2009-01-16 05:40:04

A better way to word that: the page never scrolls if max-width is set... it just keeps shrinking. I want it to scroll.

John 2009-01-16 05:51:32

@John, Perhaps set min-width as well?

strager 2009-01-16 05:56:48

No other acceptable min width would help.

John 2009-01-16 06:05:58

ansaurus

tags:

views:

answers:

CSS: Liquid Bar with Text Won't Expand

related questions