learningbyexample learningbyexample - 1 month ago 6
CSS Question

How do I place divs side by side?

What I want to do is to place the divs next to each other rather than how they are that they stack over each other.

side note:

I want the divs to be side by side but start from the top right of the screen adding a new lists div or taking out some depending on the screen size, but to always start the divs from right to left at the top of the screen.



li {
list-style-type: none;
padding: 0;
margin: 0;
}

<div class="lists1">
<ul>
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
<li>option 4</li>
</ul>
</div>
<div class="lists2">
<ul>
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
<li>option 4</li>
</ul>
</div>
<div class="lists3">
<ul>
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
<li>option 4</li>
</ul>
</div>




Answer

Give div containers same class and add float:right on them in CSS like so: https://jsfiddle.net/q6c34sqk/1/

EDIT: for more elegant solution use Flexbox: https://jsfiddle.net/q6c34sqk/2/

<div class="main-contain">
  <div class="lists">
    <ul>
      <li>option 1</li>
      <li>option 2</li>
      <li>option 3</li>
      <li>option 9</li>
    </ul>
  </div>
  <div class="lists">
    <ul>
      <li>option 1</li>
      <li>option 2</li>
      <li>option 3</li>
      <li>option 4</li>
    </ul>
  </div>
  <div class="lists">
    <ul>
      <li>option 1</li>
      <li>option 2</li>
      <li>option 3</li>
      <li>option 4</li>
    </ul>
  </div>
  <div class="lists">
    <ul>
      <li>option 1</li>
      <li>option 2</li>
      <li>option 3</li>
      <li>option 7</li>
    </ul>
  </div>
</div>

CSS

li {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.main-contain{
  display: flex;
  justify-content: flex-end;
}

.lists {
  display: inline-block;
}
Comments