> I'm building a website using
> responsive design and HTML5 and would
> like the content not to exceed the width of the banner in
> the header.
>
> The banner was provided by the client, and I am using the
> following
> code to implement it:
>
> background: url("../images/banner.png")
> left no-repeat;
>
> Now if the window becomes large, the text in the content
> becomes wider
> than the banner on the right side.
>
> If I use:
>
> background: url("../images/banner.png")
> center no-repeat;
>
> the banner gets cut on the left side if the window is small,
> and an
> important section of it gets cut off, which I don't want to
> happen. I
> already tried max-width for the content, but that doesn't
> work either.
>
> How do I make sure that the content becomes not wider than
> the width
> of the banner, preventing the banner gets cut on the left
> side?
>
Without knowing your HTML structure, I can only give you the outline of how it
could be done:
<div id="container">
<div id="header">Banner/Header</div>
<div id="wrapper">
<div id="left">Left</div>
<div id="content">Content</div>
<div id="right">Right</div>
</div>
<div id="footer">Footer</div>
</div>
Now you can set the width of the container and everything falls into line with
it. Set the width to match the width of the banner taking account of any
paddings, borders and margins of other elements.
Hope this gives you the idea.
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
