Re: float problem

Sat, 10 Jun 2006 23:44:48 -0800 from darius <noone (AT) here (DOT) invalid>:

Hi

I want to have a title heading with really big letters, float left,
then content floated around it. much like what you see in many magazine
layouts. So far, I have this

div class="bigtitle">This is the title</div
h2>Introduction</h2

Don't use anonymous <div> when a proper tag is available. Use h1, and
then either style h1 in your style sheet or style h1.bigtitle in your
style sheet.

p>text here.............</p

.bigtitle {
font-size: 4.5em;

That type is so big that on many people's monitors it will take the
whole screen, unless your title is very short.

width: 40%;

Related problem: if the browser honors that width, in combination
with the huge type face it will probably wrap to several lines, or
overflow the 40%. (Think for a moment about hand-held displays, or
people with regular screens who don't run their browser full screen.)

margin-right: 30px;
margin-bottom: 20px;
padding-bottom:15px;

Change these to em or percent. It's very wrong to mix pixel and em
measurements as you're doing.

float:left;
}
[snip]

It works okay, except for one thing: the border of the h2 doesn't begin
under it but starts from the bigtitle div.

URL?

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you

Sun, 11 Jun 2006 14:29:54 -0800 from darius <noone (AT) here (DOT) invalid>:

It's not a publicly accessible site. I can't post the URL or the page's
content. I would have to do a test page and post it somewhere, which I
don't have time to do right now.

Oh, well, as long as you have a good reason ...

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you

Anyway, I worked around the problem by using span instead of div for the
heading with the border, but it's not a satisfactory solution.

Thank you for the response.

Perhaps you could try

h2{
display: inline;
}

if you want the bottom border to follow the text instead of the h2's box.

In article <MPG.1ef5f33713f71ed98a544 (AT) news (DOT) individual.net>, Stan Brown
<the_stan_brown (AT) fastmail (DOT) fm> writes

font-size: 4.5em;

That type is so big that on many people's monitors it will take the
whole screen, unless your title is very short.

How do you figure that? 4.5em means, AFAIK, 4.5 times larger than the
current font size. For a default piece of text, assuming the user hasn't
changed their default font size, nor resized the page, the base font
size is 16pt. 4.5 times that is 72pt, which whilst being large, is
hardly as huge as you make out. Sure, there will always be people using
tiny windows, or handheld devices, but these are very much the minority.
To claim that "many" people will have a problem implies a significant
percentage. I don't see who they would be.

--
Alan Silver
(anything added below this line is nothing to do with me)