A display:table Trick
When a border is put under an HTML header tag, the border extends all the way across the content width. The same with a border under other HTML content tags.
Here is a header tag (<h3>) with a CSS border-bottom:3px double #999; definition to serve as an illustration.
My Text
That may be what the page designer wants.
However, if border only under the text is preferred, then display:table; can be added to the style.
Here is an illustration with the border only under the text, not extended all the way across.
My Text
Unless constrained, the box that contains the header extends all the way across. The display:table; CSS definition constrains the box like it would if the header was within an HTML table. The width of the box is the width occupied by the text.
Here is the source code of the two examples above.
<h3 style="border-bottom:3px double #999;">My Text</h3>
<h3 style="display:table; border-bottom:3px double #999;">My Text</h3>
For the second illustration, the CSS display:table; definition was added to the style.
The display:table; trick can be used for any type of border under, over, or around HTML containers — header, code box div, paragraph, …
(This content first appeared in Possibilities newsletter.)
Will Bontrager
Was this blog post helpful to you?
(anonymous form)
All information in WillMaster Blog articles is presented AS-IS.
We only suggest and recommend what we believe is of value.
As remuneration for the time and research involved to provide quality links,
we generally use affiliate links when we can.
Whenever we link to something not our own, you should assume
they are affiliate links or that we benefit in some way.
Recent Articles in the Library
Image Hue Shift
Shift the hues of an entire image with this CSS rule.
Inspecting HTML Tags
Software to inspect meta and link tags that might have changed after the web page was loaded.
Linked Images in Facebook
Post a URL on Facebook. Facebook pulls in an image and links to that URL. (Probably similar on other social media sites.)
Real Download Link
A download link can tell the browser to download the file for saving on the user's hard drive — instead of displaying it in a browser window.
Characters for Hyphenation
The CSS hyphenate-character property can be used to tell the browser an alternate character or set of characters should be used where a hyphen would be inserted at end of lines.
Automatic Wrap Balancing for Headlines
Use the CSS text-wrap:balance; property to better balance the line lengths of multi-line headlines.
Redirect With Method POST
When you can't use method POST, but you must, read this.
