CODEWITHSUNDEEP
htmlcss
Serhii Bazavluk
Serhii Bazavluk

Reputation: 33

Why a button jumps to a new line after a div element?

Can you explain why a button jumps to a new line after a <div> element? It is inline element, right? why then doesn't it stay inline? I can't put that button inside the <div> because that <div> constantly updates with Jquery, so it will remove (overwrite) it. Is there a way to make the button not to jump to a new line after a <div> ? 

<div >some text</div>
<button>MyButton</button>

Upvotes: 2

Views: 1994

Answers (4)

MicroMatrix
MicroMatrix

Reputation: 47

button and span are inline elements. while div is a block level element.

1.) for <span>a</span><span>b</span>,

a will sit in the first line & normal document flow stays on the same line as a and b are enclosed within the span element which is an inline element. So, b follows the horizontal flow and sits after a in the same line.

giving output as,

ab

2.) for <div>a</div><span>b</span> & <div>a</div><div>b</div>,

a will sit in the first line & normal document flow goes to the next line because of the vertical stacking nature of the first div element. So, b follows the vertical flow and sits in the new line.

giving output as,

a
b

3.) for <span>a</span><div>b</div>,

a will sit in the first line & normal document flow goes to the next line because of the vertical stacking nature of the adjacent div element. So, b follows the vertical flow and sits in the new line.

giving output as,

a
b

*) Bonus:

Statement 1: Block level element starts on a new line.

Statement 2: Block level element takes the full width of its parent element no matter how small the content is.

Statement 3: By default block level elements will consume all of the space in the inline direction. If we give them a width, they will continue to lay out one below the other - even if there would be space for them to be side by side.

Now, all these three statements are defined to maintain the vertical stacking nature of the block level elements.

This is the prime logic behind the scenes...

Upvotes: 1

Alwaysblue
Alwaysblue

Reputation: 11830

div are not inline elements, they are block elements.

The best way to have a div element as an inline element is to give it a style display:inline in your stylesheet.

Also are you using Jquery on all div elements? How about using a class or an ID instead?

Upvotes: 1

sol
sol

Reputation: 22919

You could wrap both elements and add display: flex to the wrapper.

Guide to Flexbox 

.wrapper {
  display: flex;
}
<div class="wrapper">
  <div>some text</div>
  <button>MyButton</button>
</div>

Upvotes: 2

Farhan Haque
Farhan Haque

Reputation: 1011

why button jumps to a new line after a element?

that is because div by default is a block element (display:block) which means it starts on a new line and takes the whole width and hence the button next to it is displayed on the next line. To change this behavior, use css to change display property of the div to inline.

For more details see this

I hope it helps.

Upvotes: 1

Related Questions