I haven't been keeping up with the list recently, so my apologies if
something similar has already been covered.
I'm looking for a background for an <h1> that extends on the left to the
edge of the viewport, but stops on the right at the right edge of a
fixed-width centered block below. You can see the desired effect in a
comp at http://www.csupomona.edu/~jcclark/more/left-h1/mockup1.jpg. The
only way I've been able to figure how to do this is visible at
http://www.csupomona.edu/~jcclark/more/left-h1/; the HTML/CSS is:
<div style="width:50%; height:50px; background-color:#aaa;
padding-right:350px; text-align:right;">
<h1 style="color:#fff; font-size:1.5em; margin:7px 0 0 0;
text-align:left; width:326px; overflow:visible; white-space:nowrap;
display:inline-block;">This is the first-level header, which may run
long</h1>
</div>
I was pleased that adding a right padding with width in pixels could
increment a div with a width in percent (first time I've understood why
the box model is as it is). But is this the best approach? We'll be
feeding IE 6 and below a different stylesheet.
--
Curtis Clark
Cal Poly Pomona
______________________________________________________________________
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/
