470,568 Members | 1,535 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,568 developers. It's quick & easy.

forcing two hr on the same line

I'm trying to have several <hr>, all on the same line, even if this can
seem a nonsense, with the shortest code.
So, I do not want to use abolute positioning and virtual div.

Is it possible to obtain such for the following html code:

<hr style="width: 20px;">
<hr style="width: 20px;">
<hr style="width: 20px;">
<hr style="width: 20px;">

with some css? The following css does not work:

hr {
display: inline;
float: left;
}

and the same for the following one:

hr {
line-height: 0;
}

Thanks for your help.

Jan 5 '07 #1
3 9759

co***@mailinator.com wrote:
I'm trying to have several <hr>, all on the same line
Just floating them ought to work. As is well known, IE wants to see an
explicit width on floated things, but you already have that. You
shouldn't need the display:inline;, floating alone is adequate.

As it clearly doesn't work under IE7, I think it's another IE bug. It's
known to be weird with <hr>. If it matters to you, I suggest
pragmatically replacing the <hrwith <divand making them tiny but
with a visible top border.

You'll want somethign after them to clear the float too
..hr {
float: left;
width: 20px;
/* If you don't have some margin too,
what's the difference from using a single 80px wide <hr? */
margin: 0 10px;
}

div.hr {
border-top: thin solid black;
}

[...]

<div class="hr" </div>
<div class="hr" </div>
<div class="hr" </div>
<div class="hr" </div>
<div style="clear: both; float: none; height: 0; margin: 0; padding:
0;" ></div>

Jan 5 '07 #2
Scripsit co***@mailinator.com:
I'm trying to have several <hr>, all on the same line, even if this
can seem a nonsense, with the shortest code.
The structural meaning of <hr>, if any, is 'change of topic'. Why would
would you change topic several times on the same line? And why would the
shortness of code matter? If this is a stupid contest, you should have told
that. (In that case, I might have wished to help you win it. But now you
asked it as if it were a serious question.)

I suspect what you actually want is a particular visual effect. Why don't
you describe the effect, illustrate the context with a URL, and ask in
c.i.w.a.stylesheets then?
So, I do not want to use abolute positioning and virtual div.
That's your privilege (or contest rules?), but by excluding possibilities,
you're not making things any easier.
Is it possible to obtain such for the following html code:
- -
with some css?
This group is about HTML, not CSS.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Jan 5 '07 #3
Andy Dingley wrote:
co***@mailinator.com wrote:
I'm trying to have several <hr>, all on the same line

Just floating them ought to work. As is well known, IE wants to see an
explicit width on floated things, but you already have that. You
shouldn't need the display:inline;, floating alone is adequate.

As it clearly doesn't work under IE7, I think it's another IE bug. It's
known to be weird with <hr>. If it matters to you, I suggest
pragmatically replacing the <hrwith <divand making them tiny but
with a visible top border.
Or drop the DIV border and put HR elements inside (appropriately
positioned) DIVs.

[...]

--
Rob

Jan 9 '07 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by Bernard Cosell | last post: by
reply views Thread by Hugh Lutley | last post: by
3 posts views Thread by William Park | last post: by
4 posts views Thread by Christopher Finke | last post: by
5 posts views Thread by Nikola Skoric | last post: by
5 posts views Thread by David Thielen | last post: by
1 post views Thread by livre | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.