Why can’t a div stand next to each other?

Asked

Viewed 307 times

-1

I have two divin a row, one of which has a width of 100px and the other 200px. Adding up the width of the two (300px) is well below the width of the viewport 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::

One div always stays below each other regardless of width or always use float to be next to each other? The div always forces a "line break" on the layout? Why is that if the width of the two summations does not exceed the width of the screen?

If I use float: left I would, but I didn’t want to float because if I want to center the two side by side the float will prevent this.

I have no advanced knowledge of CSS, and some situations seem confusing to me to understand, like this, for example.

html css

  • for this either you use bootstrap using the condener Row classes col-Xs-6, or in your css file puts absolute possibility and other things n know how to speak right

  • Thanks, but is that I do not use Bootstrap in this case and I do not intend to use. D

  • This is due to the box model of div, it is an element of the block type, the same happens with the tag P or H1 for example. If you have two P tags you will get one in each line, even if you only have one character. It’s more a matter of html than CSS, although with CSS vc changes this default feature of the element, whether with float, inline display, Flex or grid for example

  • @hugocsl I know, but even setting a small width?

  • I’m at my fiancée’s house and she’s here telling me to stop "playing" hahaha, but if I don’t have a more complete answer by tomorrow I’ll put something on it with a few examples

  • To complement Andrew’s response and Hugo’s comment: https://www.w3.org/TR/CSS2/visuren.html#block-formatting

  • @hugocsl This is called "addiction".. rss

Show 2 more comments

1 answer

1


One div always stays below the other regardless of width?

By default, yes! This is due to the fact that the default display of div is block. The block renders an entire line, as the friend @hugocsl commented.

It is necessary to always use float so that one is next to the other?

It is 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’ve helped.

Hugs.

  • Obg for the answer, very useful. But the problem with flexbox is that if I decrease the screen the second div does not fall down. Or it falls?

  • Falls yes. Just add the property flex-wrap: wrap; the flex container class.

  • It’s cool! Thanks for the help!

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.