On Sun, Sep 11, 2011 at 8:48 AM, Curtis Clark <jccl...@mockfont.com> wrote:
> 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<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/<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 > > Here is a solution: http://roughtech.com/t/leftheading/1.html It involves the non-semantic use of spans, therefore I recommend using javascript to create those elements. Regards, Chetan Crasta ______________________________________________________________________ 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/
