CSS Side by Side Div's Auto Equal Widths

CSS side by side div's auto equal widths

It's not impossible. It's not even particularly hard, with the use of display: table.

This solution will work in modern browsers. It won't work in IE7.

http://jsfiddle.net/g4dGz/ (three divs)

http://jsfiddle.net/g4dGz/1/ (two divs)

CSS:

#wrapper {
    display: table;
    table-layout: fixed;

    width:90%;
    height:100px;
    background-color:Gray;
}
#wrapper div {
    display: table-cell;
    height:100px;
}

HTML:

<div id="wrapper">
    <div id="one">one one one one one one one one one one one one one one one one one one one one one</div>
    <div id="two">two two two two two two</div>
    <div id="three">three</div>
</div>

How do I set equal widths for two divs side by side in a flexbox?

To solve that one need to position the right as absolute and make the outer display inline.

As inline, the outer will size by its content, which is the left, which, as a flex item, also is sized by its content, and the right will not affect that, since it is positioned absolute and taken out of the normal flow.

Then, by simply push the right to the end of the left, it will render exactly how you want.

Fiddle demo

Stack snippet

#outer {  position: relative;    height: 300px;    display: inline-flex;  justify-content: center;  align-items: center;  }.inner {  border: 1px solid red;}.inner:nth-child(2) {  position: absolute;  left: 100%;  width: 100%;}
/* this is for styling purpose only, and produce a blue border */#outer::after {  content: '';  position: absolute;    left: 0; top: 0;  height: 100%;  width: 200%;  border: 1px solid blue;}

<div id="outer">  <div class="inner">   Inner HTML content has larger natural width than the other </div>    <div class="inner">   This has a smaller natural width  </div></div>

Two auto-width divs side by side

I believe you're looking for something like flexbox, which is not supported real well yet, I don't think.

An alternative is to configure the two as display: table-cell with a wrapping element using display: table and a width: 100%. See this question for a similar case:

https://stackoverflow.com/a/12650502/451969

What it would give you is something along the lines of:

<div id='wrapper'>
  <div id='div_1'></div>
  <div id='div_2'></div>
</div>

#wrapper
{
    display: table;
    width: 100%;
}

#div_1
{
    display: table-cell;
}

#div_2
{
    display: table-cell;
}

http://jsfiddle.net/mDyjE/

How to display the equal width of the div using CSS?

Use flex: 1 100% and remove the width:

 #container1  {    width: 100%;    display: inline-flex;  }#container1 div{      color: #fff;    display: inline-block;    height: 100%;    flex: 1 100%;    background: #24252A;    text-align: center;    cursor: default;    padding: 2em 0;}
#container1 div:nth-of-type(2) {    background: red;    }

<div id="container1">  <!--div depanding upload database-->  <div></div>  <div></div>  <div></div></div>

How do I keep two side-by-side div elements the same height?

Flexbox

With flexbox it's a single declaration:

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

Divs side by side, width auto adjust

Try this fiddle

If you need to use position fixed (really I didn't understand why) you could use percentage for main div, and pixels for sidebars.

In main div to set the width use this:

width: calc(100% - 400px);
Where 400px is the sum of the width of your both sidebars

HTML

 <div clas="container">
  <div class="top">top</div>
  <div class="left">left</div>
  <div class="main">main</div>
  <div class="right">right</div>
</div>

CSS

.container {width: 100%; height: 100%;}
.top {
  position: fixed;
  clear: both;
  width: 100%;
  height: 20%;
  background-color: #d5d5d5;
}

.left {
  position: fixed;
  top: 20%;
  width: 40px;
  float: left;
  height: 80%;
  background-color: green;
}
.main {
  width: calc(100% - 80px);
  height: 80%;
  position: fixed;
  top: 20%;
  left: 40px;
  background-color: grey;

}
.right {
  width: 40px;
  height: 80%;
  position: fixed;
  top: 20%;
  right: 0;
  background-color: green;
}

Three divs with different width side by side, those left and right fixed

You can use the position: sticky; property, although the browser support isn't the best: https://caniuse.com/#search=sticky

html, body {  margin: 0;  padding: 0;}.container {  display: flex;  align-items: flex-start;  justify-content: space-between;}.left, .right {  width: 30%;  background-color: rgba(0, 0, 0, .2);  position: sticky;  top:0;}
.center {  height: 2000px;  width: 30%;  background-image: linear-gradient(to bottom, rgba(255, 0, 0, .2) 0, rgba(255, 255, 0, .2) 100%);}

<div class="container">  <div class="left">    Left  </div>  <div class="center">    Center  </div>  <div class="right">    Right  </div></div>

How to place div side by side

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

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>

CSS Side by Side Div's Auto Equal Widths