I want to have
- a longish but not extremely long
<h1>
title, and as usual, I want it to align to left edge of page; and then, - I want a single normal word (so as first approximation, I’ve put it as
<span>
) on the same row, but I want it aligned right (i.e. so it sticks to right edge of the page; so essentially, it takes up the width it takes, and the rest of the row is filled by the heading); and finally - below that I want a paragraph. Something like:
<div id="dhead">
<h1 id="htitle">Some longish title</h1>
<span id="extra">Extra</span>
<div>
<p>
Hello. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis consequat blandit ultrices. Nullam tincidunt eu tortor vitae
pretium. Vestibulum nec ultrices ipsum. Nulla tempus vitae eros
varius rutrum. Sed condimentum convallis dui id interdum ...
</p>
… except in the above example, the heading and the word "extra" are not even on the same line.
I’ve tried the following flex approach as in CSS two divs next to each other :
#dhead {
display: flex;
}
#extra {
/* width: 200px; // don't want to set width of this explicitly; it should take the width of its content, the word) */
}
#htitle {
flex: 1; /* Grow to rest of container (?) */
}
<div id="dhead">
<h1 id="htitle">Some longish title</h1>
<span id="extra">Extra</span>
<div>
<p>
Hello. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis consequat blandit ultrices. Nullam tincidunt eu tortor vitae
pretium. Vestibulum nec ultrices ipsum. Nulla tempus vitae eros
varius rutrum. Sed condimentum convallis dui id interdum ...
</p>
… and it is now even worse — actually, awful — since now the heading and the word AND the paragraph are on the same line (?!)
So, how can I align heading (to left) and word (to right) on the same line, with a paragraph below? And can I keep on using <h1>
, <span>
and <p>
, or do I have to replace them with styled <div>
to achieve something like this?
2
Answers
You can simply use
flexbox
to achieve your purpose andjustify-content: space-between;
will push the elements to the edges.Option 1. Place
span
inside yourh1
Even though
span
is an inline element, because it directly follows a block-level elementh1
, it sits below the heading block.If it’s semantically a part of
h1
, you might want to put it inside the heading and style theh1
element. Like the code snippet below.Option 2. Use a
::after
pseudo selectorIf the
#extra
doesn’t serve a semantic, document-level purpose and solely an extra notation, you could simply use CSS::after
and do without a separate HTML markup. Like the snippet below.