CODEWITHSUNDEEP
css
Nathan Ridley
Nathan Ridley

Reputation: 34396

In CSS, what is a better way of forcing a line break after an element than making it a block element?

I have an H3 heading that I'd like to style as having a particular background color, but without having the element's background take up the full width of the parent element. Seeing as H3 is by default a block element, my style would need to change the element to an inline-block element, or just an inline inline element like so:

h3 {
    background-color: #333;
    color: white;
    display: inline-block;
}

This will work fine, but only if it is immediately followed by a block element. I do not want to change the markup just to cater for this style, so I was wondering if there is a way to cause any adjacent element, irrespective of how it displays, to start on the next line?

Assume I can use CSS3.

Upvotes: 16

Views: 16598

Answers (6)

David Rutherford
David Rutherford

Reputation: 81

I come across this all the time in my code, usually for div's that are inline-block'ed. The best way I've seen is to force a new line is to wrap your code in an additional div. Your original html gets the formatting you expected and the div wrapper forces a new line.

Assuming this is your h3 styling,

h3 {
  display: inline-block;
}

Then just wrap it in a div.

<div>
   <h3>My heading</h3>
</div>

Upvotes: 1

Rotareti
Rotareti

Reputation: 53853

If you don't need to center h3, this may help:

h3 {
  background-color: #333;
  color: white;
  display: inline-block;
  float: left;
  clear: left;
}

Upvotes: 0

user1010892
user1010892

Reputation: 1189

I've had to do something similar with inline nav items that need breaking at certain points. Does this work?

h3:after {
  content: "\A ";
  line-height: 0;
  white-space: pre;
  display:inline-block;
}

I seem to remember IE7 having an issue with it.

Upvotes: 0

PeterWong
PeterWong

Reputation: 16011

try this:

h3:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

Upvotes: 13

Stephan Muller
Stephan Muller

Reputation: 27610

How often does it happen that the element after the <h3> is an inline element? (Usually after a header there should be like a <p>, <ul> or other block elements, although this totally depends on your html. Is it predictable? Is it an option to just turn every element that directly follows a <h3> into a block element?

h3 ~ * { display: block }

The only other way I know to have a block-element not take up all the space is floating it, but this leaves another problem.

Upvotes: 2

fredley
fredley

Reputation: 33911

display:block;
width:auto;

This will make the width as small as possible (not filling the whole parent element) and make other elements appear below.

Upvotes: 2

Related Questions