Css: How to Have to Divs Side by Side with Height 100%

How to show two Divs side by side with 100% height?

You do like this :

CSS

.right{
    float:right;
    width:200px;
    height:100%;
    background:red;
}
.left{
    overflow:hidden;
    background:green;
    height:100%;
}

html, body{
    height:100%;
}

Check this http://jsfiddle.net/RDyY5/

CSS: How to have to divs side by side with height 100%?

I have ran in the same problem so many times, until I found this: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

It is a valid CSS solution for making your colums share the height. Then both will be the height of the largest column.

If you want to make your colums fill the whole screen you could use something like

.innerLeft {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 50%; 
}

.innerRight {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    right: 0; 
}

two divs side by side with each having 100% width off the screen

Using the white-space CSS property, you can achieve this with nowrap. From white-space on MDN

nowrap: Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within the source

.parent {
    white-space: nowrap;
}

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>

Align two divs side by side covering entire page width

No have problem with your code... Divs are aligned side by side...

.container {  width: 100%;}
.left,.right {  float: left;  width: 50%;    border: 1px solid red;  box-sizing: border-box;}

<div class="container">  <div class="left">    (an image)  </div>  <div class="right">    (some divs and other text)  </div></div>

Two divs side by side, one centered, the other's height dependent on the first

You would need to but the 2nd div inside the first and positionin it absolutely

JSfiddle Demo

HTML

<div class="main">
    <div class="sidebar"></div>
</div>

CSS

.main {
    width:50%;
    margin:0 auto;
    background-color: lightblue;
    position: relative;
    height:250px;
}

.sidebar {
    position: relative;
    width: 100px;
    top:0;
    left:100%;
    height:100%;
    background-color: lightgreen;
}

how to put two divs side by side in css?

HTML:

    <div id="wrapper">
        <div id="leftcolumn">
            Left
        </div>
        <div id="rightcolumn">
            Right
        </div>
    </div>

CSS:

    body {
        background-color: #444;
        margin: 0;
    }    
    #wrapper {
         width: 1005px;
         margin: 0 auto;
    }
    #leftcolumn, #rightcolumn {
        border: 1px solid white;
        float: left;
        min-height: 450px;
        color: white;
    }
    #leftcolumn {
         width: 250px;
         background-color: #111;
    }
    #rightcolumn {
         width: 750px;
         background-color: #777;
    }

CSS: How to get two DIVs side by side with automatic height, to the height of their container?

Your problem is that the outer div is sizing automatically by the inner content, which is sizing automatically by its content.

You have couple of options:

Use the background solution mentioned in the @R0MANARMY answer to create the visual ilusion of two equally tall columns.
Set the height of the two inner divs to be the same exact number (using px or em)
Set the height of the outer div to an exact number.
Play with the display attribute and try couple of different values like table-cell and so on. Keep in mind that this one is not going to work in some older browsers. (Not only IE, but some old Firefox and Chrome releases as well)
Use simple table with one row and two columns.

I realize that the last one is the most controversial of all. Yet it is a possible solution for your problem and there's no reason why you shouldn't at least evaluate.

([groan] please, please, nobody mention the words "semantic HTML"! there's no such thing in our universe.)

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;
}