multiple divs responsive with css - css

Question

I have searched high and low for days and trying to get two divs side by side (50% wide each) and a second div below at 100% wide...also the two top divs need to change with responsive vieing. i.e right div falls under the left div when screen size is at say 960px wide.
I have tried this code, but the right div displays smaller when you start to reduce the browser size.
I'm sure I have this all wrong, but it's a learning stage for me, so sorry for a basic question! Any help would be so great!!!
Sorry...I can post an image to explain, but to help clear it up, I need in one row, two divs side by side (50% wide each) and in row 2, 1 div that takes up 100% width.
OK! I can add an image now of what I need to achieve! Images 1, 2, 3 will be different sizes along with the amount of text below the image. The layout (example) image is not to scale, and on the site will need a clear background (no colour) The background colours are just to show different the divs in the example.
And this is how it should look in responsive...
HTML:
<div class="custom_div">
<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>
</div>
CSS:
.custom_div {
overflow:hidden;
}
.custom_div div {
min-height: 100%;
padding: 10px;
text-align: center;
}
#one {
background-color: gray;
float:left;
margin-right:0px;
width:50%;
}
#two {
background-color: white;
overflow:hidden;
margin-right: 20px;
margin: 1px;
width:auto;
min-height: 50%;
}
#three {
background-color: yellow;
margin-right:auto;
margin-left:auto;
width: 100%;
}
#media screen and (max-width: 600px) {
#one {
float: none;
margin-right:0;
width:auto;
}
}

Answer 1

UPDATE:
Demo Fiddle
The only foolproof way to do this to ensure correct sizing on differing levels of content:
HTML
<div class='table'>
<div class='cell'></div>
<div class='cell'></div>
<div class='caption'></div>
</div>
CSS
.table {
display:table;
width:100%;
}
.cell {
display:table-cell;
}
.caption {
display:table-caption;
caption-side:bottom;
}
.cell, .caption {
height:20px;
border:1px solid black;
}
#media screen and (max-width: 960px) {
.table .cell, .caption {
display:block;
}
}
Original Answer
How about the below?
Demo Fiddle
HTML
<div class="left">left</div>
<div class="right">right</div>
<div class="full">content</div>
CSS
div {
border:1px solid black;
box-sizing:border-box;.
-moz-box-sizing:border-box;
}
.left, .right {
width:50%;
}
.left {
float:left;
}
.right {
float:right;
}
#media screen and (max-width: 600px) {
.left, .right {
width:auto;
float:none;
}
}

Answer 2

You can try below code:
Working Demo
html, body{height:100%;}
.custom_div{width:100%;}
.custom_div div {
background:#ccc;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
#one, #two {
width:50%;
float:left;
height:100%;
}
.clearfix{clear:both; display:block;}
#media screen and (max-width: 960px) {
#one, #two {
width:auto;
float:none;
}
}

Answer 3

Checkout the Updated Fiddle : http://jsfiddle.net/PEvLt/3/
I've removed unnecessary properties.
The problem was with the padding and margins.
The thing you should add is always use BOX-SIZING Property.
It'll help you when you are using padding with the widths/heights defined in %
More about Box-Sizing.
http://css-tricks.com/box-sizing/
UPDATE : You need to wrap the first column into one single div or need to clear floats after first 2 columns to avoid overlapping of the third column.
HTML :
<div class="first_two">
<div id="one">
<img src="http://lorempixel.com/500/200/" width="100%"/>
</div>
<div id="two">
<img src="http://lorempixel.com/300/200/" width="100%"/>
</div>
<div class="clear"></div>
</div>
<div id="three">three</div>
CSS :
*{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
.first_two {
background:#3498db;
overflow:hidden;
}
#one {
float:left;
width:50%;
height:100%;
}
#two {
width:50%;
float:left;
height:100%;
}
#three {
background-color:#8e44ad;
width: 100%;
}
.clear{
clear:both;
}
#media screen and (max-width: 600px) {
#one,#two {
width:100%;
}
}

Answer 4

you can set the width of body tag using javascript
<script>
document.getElementsByTagName("body")[0].style.width=screen.width+"px";
</script>