Why is not one div next to the other?

Question

Why is not one div next to the other?

Navigation

#1 by (1 votes)

0

I have two div s followed, one has width 100px and the other 200px . Adding the width of the two (300px) is well below the viewport width of the screen (on a desktop screen, for example), but the second appears below the first:

body{
   margin: 0;
}

#lateral{
   width: 100px;
   background: red;
}

#main{
   width: 200px;
   background: blue;
}

<div id="lateral">
   lateral
</div>
<div id="main">
   main
</div>

My doubts are as follows:

Does a div always fall below the other regardless of the width, or do you always have to use float so that one side is next to the other? Does div always force a "line break" in the layout? Why does not the width of the two sums exceed the width of the screen?

If I use float: left it would solve, but I did not want to use float because if I wanted to centralize both side by side float would prevent this.

I do not have advanced knowledge in CSS, and some situations seem confusing to understand, such as this, for example.

html css

asked by anonymous 20.07.2018 / 02:37

1 answer

Error in mat-select when I try to choose an item appendChild is not working

score 1 · Accepted Answer

Does one div always stay below the other regardless of width?

By default, yes! This is because the default display of the div is block. The block renders a whole line, as the friend @hugocsl commented.

Is it always necessary to use float so that one stands next to the other?

It's one of the ways. There are "n" ways to do this, for example flex box.

To illustrate with flex, for example:

.flex-container {
  display: flex;
}
<div class="flex-container">
  <div style="width: 200px;"></div>
  <div style="width: 100px;"></div>
</div>

I hope I have helped.

Hugs.