0

I have a div that I would like to keep inline-block but I want to keep any other elements from appearing on the same line as it.

  • I know that display:block will clear all the elements after it.
  • I know that adding a BR tag will clear all the elements after it.

But I would rather use a style such as clear:both except that only works for floating elements.

Is there a CSS style that I can use to clear all the elements after it while continuing to use inline-block?

I've seen another similar question here but no one actually answered the question. I'm 100% not interested in alternatives such as using floats. There was one answer using CSS using content after but it does not work (link). 

#Container:after {
    content:"\a ";
    white-space:pre;
}

Here is a link to an example on JSFiddle. I want to add a break after BorderContainer20016.

Let me repeat. I'm 100% not interested in alternatives such as using floats.

Community
  • 1
  • 1
1.21 gigawatts
  • 16,517
  • 32
  • 123
  • 231
  • The point of `inline`(and `inline-block`) is to keep elements on 1 line. It might help to add why you need `inline-block` to help others answer your question – Mark Perera Jul 28 '16 at 06:30
  • I use inline-block to keep things on one line but also for setting explicit width. I use block to clear the line (stack items on top of each other) but it does not center horizontally. So I need something to stack vertically but also center. Check the example in the description. Using a BR after inline-block will work but it will cause other problems which is why I'm looking for a CSS solution. – 1.21 gigawatts Jul 28 '16 at 07:02

0 Answers0