Div Side by Side Without Float

Div side by side without float

The usual method when not using floats is to use display: inline-block: http://www.jsfiddle.net/zygnz/1/

.container div {
  display: inline-block;
}

Do note its limitations though: There is a additional space after the first bloc - this is because the two blocks are now essentially inline elements, like a and em, so whitespace between the two counts. This could break your layout and/or not look nice, and I'd prefer not to strip out all whitespaces between characters for the sake of this working.

Floats are also more flexible, in most cases.

How align 2 adjacent divs horizontally WITHOUT float?

Use Position properties when your height and width are fixed

<div style="width:200px;height:100px;position:relative;background:#ccc;">    <div style="background:Blue; position:absolute; left:0%; width:50%; height:100%;">   </div>    <div style="background:red; position:absolute; left:50%; width:50%; height:100%;">   </div></div>

Is that possible to display divs next to each other without floating?

Depends, on what you want to do.
You can use display: inline-block;

http://jsfiddle.net/sygL9/

Divs side by side without floats or position:absolute

I'm a little confused that you mention dragging elements, but your title states you do not want to use position:absolute as a solution... most scripts I am aware of use that for the dragging process, so why would you not use it for the positioning of it to place them side-by-side?

How to place div side by side

There are many ways to do what you're asking for:

1. Using CSS float property:

 <div style="width: 100%; overflow: hidden;">
     <div style="width: 600px; float: left;"> Left </div>
     <div style="margin-left: 620px;"> Right </div>
</div>

Two divs side by side, without container

Given the fact you already use Flexbox, I suggest you do it for this too, like this.

If you don't want the container, just drop its markup and move its CSS properties to the body

Fiddle demo

Stack snippet

.container {  display: flex;                  /*  added  */  flex-wrap: wrap;                /*  added  */}
.heading {  flex: 0 0 100%;                 /*  added, behaves like a block  */  text-align: center;  margin-bottom: 35px;}
.section-one {  flex: 0 0 100%;                 /*  added, behaves like a block  */  text-transform: uppercase;  display: flex;  flex-wrap: wrap;  text-align: center;  justify-content: space-between;}
.item {  position: relative;  flex-shrink: 0;  margin: 0 auto;  margin-bottom: 15px;}
.section-left {  flex: 1 0 66.666%;              /*  added, behaves like an inline-block but fill when on single line  */  min-width: 400px;  text-transform: uppercase;  margin-top: 80px;  padding-right: 80px;  box-sizing: border-box;         /*  added, make padding be included in set width  */  border: 1px dotted gray;        /*  demo purpose  */}
.section-right {  flex: 1 0 33.333%;              /*  added, behaves like an inline-block but fill when on single line  */  min-width: 200px;  box-sizing: border-box;         /*  added, make border be included in set width  */        border: 1px dotted gray;        /*  demo purpose  */}

<div class="container">  <div class="heading">    <h2>Lorem ipsum dolor</h2>    <p>Morbi posuere mi condimentum dui suscipit vulputate. Donec lectus diam.</p>  </div>  <!--- /.heading -->  <div class="section-one">    <div class="item">Praesent eu elementum.</div>    <div class="item">Praesent eu elementum.</div>    <div class="item">Praesent eu elementum.</div>    <div class="item">Praesent eu elementum.</div>    <div class="item">Praesent eu elementum.</div>  </div>  <!--- /.section-one -->  <div class="section-left">    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed.  </div>  <!--- /.section-left -->  <div class="section-right">    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed.  </div>  <!--- /.section-right --></div>

Two divs side by side - Fluid display

Using this CSS for my current site. It works perfect!

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
} 

How to arrange many div elements side by side with no wrap

Change float: left to display: inline-block; and add white-space: nowrap to the container.

Align div to right, without using float

Use display:inline-block your child element on section

add text-align:right :nth-child(2n+2) to your .javascript section element

.javascript:nth-child(2n+2) {
  text-align:right;
}

.js-wrapper {
    background-color: #8E8ABC;
    border-bottom-right-radius: 12em;
    border-top-right-radius: 12em;
    width: 40%;
    display:inline-block;
}
.js-wrapper2 {
    background-color: #8AACBA;
    border-bottom-left-radius: 12em;
    border-top-left-radius: 12em;
    width: 40%;
    display:inline-block;
}
.js-wrapper3 {
    background-color: #76B783;
    border-bottom-right-radius: 12em;
    border-top-right-radius: 12em;
    width: 40%;
    display:inline-block;
}

https://jsfiddle.net/lalji1051/qgfLnd1s/21/

---

Related Topics