Two divs side by side with percentage width

Question

I'm trying to float two divs next to each other. They're both setup inside a parent div (wrapper). I want the wrapper to be 90% width of page, while the other two are both percentage widths that fill up that 90%. Advice tips etc?

https://jsfiddle.net/655qtmav/

CSS

#wrapper {
margin: 0 auto;
background:none;
width:90%;
}
.content {
top: 0;
left:0;
font-size:14px;
color:#000;
font-weight: 100;
font-family:tahoma;
padding: 20px;
background-color:rgba(255, 255, 255, 0.3);
margin: 0 auto;
width:40%;
margin-bottom:20px;
float: left;
position:relative;
}

.sidebar {
top: 0;
left:0;
font-size:14px;
color:#000;
font-weight: 100;
font-family:tahoma;
padding: 20px;
background-color:rgba(255, 255, 255, 0.3);
margin: 0 auto;
width:60%;
margin-bottom:20px;
float: right;
position:relative;
}

Answer 1

that is happened because your padding :20px; the padding property will add extra space your div.in the below code I'm just commented it and it's working. you can use **calc()**to adjust the value of your width as given below when you operating with percentage and pixel.

#wrapper {
	margin: 0 auto;
	background:none;
	width:90%;
}
.content {
	/*top: 0;
	left:0;*/
	font-size:14px;
	color:#000;
	font-weight: 100;
	font-family:tahoma;
	padding: 20px;
	background-color:rgba(255, 255, 255, 0.3);
	margin: 0 auto;
	width:calc(40% - 40px);
	margin-bottom:20px;
	float: left;
	position:relative;
  background-color:red;
}

.sidebar {
	/*top: 0;
	left:0;*/
	font-size:14px;
	color:#000;
	font-weight: 100;
	font-family:tahoma;
	padding: 20px;
	background-color:rgba(255, 255, 255, 0.3);
	margin: 0 auto;
	width:calc(60% - 40px);
	margin-bottom:20px;
	float: left;
	position:relative;
    background:yellow;
}
.header {
	width: calc(100% - 40px);
	background-color:rgba(255, 255, 255, 0.5);
	margin: 0 auto;
	padding: 20px;
	margin-top:-10px;
}

<div id="wrapper">
	<div class="header">
	<h1>Title Here </h1>

	
	<ul class="topnav" id="myTopnav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Icons</a></li>
  <li><a href="#">Wallpapers</a></li>
  <li><a href="#">Textures</a></li>
  <li><a href="#">Stock Photos</a></li>
  <li><a href="#">Contact</a></li>
  <li class="icon">
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
  </li>
	</ul>
	<script>
	function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>
	
	</div>
	
	
	<div class="content">
	
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus vitae lectus vel pharetra. Suspendisse potenti. Pellentesque ornare et magna porta semper. Morbi eget risus ut sem ultrices vestibulum vel posuere massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum in luctus diam. Vestibulum at libero sapien. Praesent cursus rhoncus nibh, et ullamcorper neque aliquet tempus. Morbi at luctus nisl. Nunc scelerisque sit amet urna nec malesuada.</p>

<p>Aliquam tempor porta tristique. Donec laoreet iaculis odio in volutpat. Nam lacus leo, cursus in sem eu, sodales ultricies sapien. Ut tincidunt faucibus ligula, in tempus ante pellentesque sit amet. Donec id pellentesque sapien. Nulla feugiat blandit aliquet. Praesent a dui libero.</p>

<p>Phasellus ac purus pretium, imperdiet dui eget, eleifend sem. Etiam ac justo ac lorem ultricies venenatis. Proin porta eget nunc sed maximus. Phasellus ornare dictum purus, nec rhoncus tellus suscipit at. Suspendisse a convallis tellus, a tincidunt odio. Curabitur in augue eu arcu sodales rutrum. Sed erat ipsum, accumsan nec laoreet in, vulputate et metus. Ut posuere diam purus, mattis varius dolor eleifend bibendum. Aenean pharetra euismod felis sit amet porta.</p>

<p>Phasellus rhoncus malesuada justo id viverra. Pellentesque sagittis sollicitudin lorem mattis malesuada. Maecenas vehicula vestibulum rhoncus. Etiam auctor dapibus ipsum. Nam eleifend aliquet dui et laoreet. Aenean convallis nec sem sit amet commodo. Donec nibh ipsum, lacinia eget mollis nec, facilisis in sem.</p>

<p>Aenean ac finibus metus, nec sollicitudin ex. In hac habitasse platea dictumst. Proin iaculis dolor et velit facilisis, sed tristique turpis facilisis. Nunc purus lorem, scelerisque non est sed, iaculis fringilla lorem. Vestibulum a tempor est. Aenean semper nibh erat, et dignissim quam fringilla quis. Duis euismod tristique fringilla. Etiam sed lobortis nisi. Aliquam quis velit vehicula, dapibus dui quis, elementum mi. Nullam ultricies, neque sit amet suscipit tempor, sapien libero condimentum risus, eget posuere enim lorem eu lacus. Nunc pulvinar arcu sit amet tellus finibus sodales.</p>
	
	</div>
	
	<div class="sidebar">
	
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus vitae lectus vel pharetra. Suspendisse potenti. Pellentesque ornare et magna porta semper. Morbi eget risus ut sem ultrices vestibulum vel posuere massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum in luctus diam. Vestibulum at libero sapien. Praesent cursus rhoncus nibh, et ullamcorper neque aliquet tempus. Morbi at luctus nisl. Nunc scelerisque sit amet urna nec malesuada.</p>

<p>Aliquam tempor porta tristique. Donec laoreet iaculis odio in volutpat. Nam lacus leo, cursus in sem eu, sodales ultricies sapien. Ut tincidunt faucibus ligula, in tempus ante pellentesque sit amet. Donec id pellentesque sapien. Nulla feugiat blandit aliquet. Praesent a dui libero.</p>

<p>Phasellus ac purus pretium, imperdiet dui eget, eleifend sem. Etiam ac justo ac lorem ultricies venenatis. Proin porta eget nunc sed maximus. Phasellus ornare dictum purus, nec rhoncus tellus suscipit at. Suspendisse a convallis tellus, a tincidunt odio. Curabitur in augue eu arcu sodales rutrum. Sed erat ipsum, accumsan nec laoreet in, vulputate et metus. Ut posuere diam purus, mattis varius dolor eleifend bibendum. Aenean pharetra euismod felis sit amet porta.</p>

<p>Phasellus rhoncus malesuada justo id viverra. Pellentesque sagittis sollicitudin lorem mattis malesuada. Maecenas vehicula vestibulum rhoncus. Etiam auctor dapibus ipsum. Nam eleifend aliquet dui et laoreet. Aenean convallis nec sem sit amet commodo. Donec nibh ipsum, lacinia eget mollis nec, facilisis in sem.</p>

<p>Aenean ac finibus metus, nec sollicitudin ex. In hac habitasse platea dictumst. Proin iaculis dolor et velit facilisis, sed tristique turpis facilisis. Nunc purus lorem, scelerisque non est sed, iaculis fringilla lorem. Vestibulum a tempor est. Aenean semper nibh erat, et dignissim quam fringilla quis. Duis euismod tristique fringilla. Etiam sed lobortis nisi. Aliquam quis velit vehicula, dapibus dui quis, elementum mi. Nullam ultricies, neque sit amet suscipit tempor, sapien libero condimentum risus, eget posuere enim lorem eu lacus. Nunc pulvinar arcu sit amet tellus finibus sodales.</p>
	
	</div>

</div>

Answer 2

You can try this trick also calc() function in css. If you are using padding:20px property then div width will increase (20x2)px so we can reduce 40px in increased width like calc(40% - 40px). Hope helps you.

#wrapper {
	margin: 0 auto;
	background:none;
	width: 90%;
}
.content {
	top: 0;
	left:0;
	font-size:14px;
	color:#000;
	font-weight: 100;
	font-family:tahoma;
	padding: 20px;
	background-color:rgba(0, 0, 0, 0.3);
	margin: 0 auto;
	width: calc(40% - 40px);
	margin-bottom:20px;
	float: left;
	position:relative;
}
.sidebar {
	top: 0;
	left:0;
	font-size:14px;
	color:#000;
	font-weight: 100;
	font-family:tahoma;
	padding: 20px;
	background-color:rgba(0, 0, 0, 0.1);
	margin: 0 auto;
	width:calc(60% - 40px);
	margin-bottom:20px;
	float: right;
	position:relative;
}
.header {
	width: 100%;
	background-color:rgba(255, 255, 255, 0.5);
	margin: 0 auto;
	padding: 20px;
	margin-top:-10px;
	box-sizing: border-box;
}

<div id="wrapper">
	<div class="header">
		<h1>Title Here </h1>
		<ul class="topnav" id="myTopnav">
		  <li><a href="#">Home</a></li>
		  <li><a href="#">Blog</a></li>
		  <li><a href="#">Icons</a></li>
		  <li><a href="#">Wallpapers</a></li>
		  <li><a href="#">Textures</a></li>
		  <li><a href="#">Stock Photos</a></li>
		  <li><a href="#">Contact</a></li>
		  <li class="icon">
		    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
		  </li>
		</ul>
	</div>
	
	<div class="content">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus vitae lectus vel pharetra. Suspendisse potenti. Pellentesque ornare et magna porta semper. Morbi eget risus ut sem ultrices vestibulum vel posuere massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum in luctus diam. Vestibulum at libero sapien. Praesent cursus rhoncus nibh, et ullamcorper neque aliquet tempus. Morbi at luctus nisl. Nunc scelerisque sit amet urna nec malesuada.</p>
		<p>Aliquam tempor porta tristique. Donec laoreet iaculis odio in volutpat. Nam lacus leo, cursus in sem eu, sodales ultricies sapien. Ut tincidunt faucibus ligula, in tempus ante pellentesque sit amet. Donec id pellentesque sapien. Nulla feugiat blandit aliquet. Praesent a dui libero.</p>
		<p>Phasellus ac purus pretium, imperdiet dui eget, eleifend sem. Etiam ac justo ac lorem ultricies venenatis. Proin porta eget nunc sed maximus. Phasellus ornare dictum purus, nec rhoncus tellus suscipit at. Suspendisse a convallis tellus, a tincidunt odio. Curabitur in augue eu arcu sodales rutrum. Sed erat ipsum, accumsan nec laoreet in, vulputate et metus. Ut posuere diam purus, mattis varius dolor eleifend bibendum. Aenean pharetra euismod felis sit amet porta.</p>
		<p>Phasellus rhoncus malesuada justo id viverra. Pellentesque sagittis sollicitudin lorem mattis malesuada. Maecenas vehicula vestibulum rhoncus. Etiam auctor dapibus ipsum. Nam eleifend aliquet dui et laoreet. Aenean convallis nec sem sit amet commodo. Donec nibh ipsum, lacinia eget mollis nec, facilisis in sem.</p>
		<p>Aenean ac finibus metus, nec sollicitudin ex. In hac habitasse platea dictumst. Proin iaculis dolor et velit facilisis, sed tristique turpis facilisis. Nunc purus lorem, scelerisque non est sed, iaculis fringilla lorem. Vestibulum a tempor est. Aenean semper nibh erat, et dignissim quam fringilla quis. Duis euismod tristique fringilla. Etiam sed lobortis nisi. Aliquam quis velit vehicula, dapibus dui quis, elementum mi. Nullam ultricies, neque sit amet suscipit tempor, sapien libero condimentum risus, eget posuere enim lorem eu lacus. Nunc pulvinar arcu sit amet tellus finibus sodales.</p>
	</div>
	
	<div class="sidebar">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus vitae lectus vel pharetra. Suspendisse potenti. Pellentesque ornare et magna porta semper. Morbi eget risus ut sem ultrices vestibulum vel posuere massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum in luctus diam. Vestibulum at libero sapien. Praesent cursus rhoncus nibh, et ullamcorper neque aliquet tempus. Morbi at luctus nisl. Nunc scelerisque sit amet urna nec malesuada.</p>
		<p>Aliquam tempor porta tristique. Donec laoreet iaculis odio in volutpat. Nam lacus leo, cursus in sem eu, sodales ultricies sapien. Ut tincidunt faucibus ligula, in tempus ante pellentesque sit amet. Donec id pellentesque sapien. Nulla feugiat blandit aliquet. Praesent a dui libero.</p>
		<p>Phasellus ac purus pretium, imperdiet dui eget, eleifend sem. Etiam ac justo ac lorem ultricies venenatis. Proin porta eget nunc sed maximus. Phasellus ornare dictum purus, nec rhoncus tellus suscipit at. Suspendisse a convallis tellus, a tincidunt odio. Curabitur in augue eu arcu sodales rutrum. Sed erat ipsum, accumsan nec laoreet in, vulputate et metus. Ut posuere diam purus, mattis varius dolor eleifend bibendum. Aenean pharetra euismod felis sit amet porta.</p>
		<p>Phasellus rhoncus malesuada justo id viverra. Pellentesque sagittis sollicitudin lorem mattis malesuada. Maecenas vehicula vestibulum rhoncus. Etiam auctor dapibus ipsum. Nam eleifend aliquet dui et laoreet. Aenean convallis nec sem sit amet commodo. Donec nibh ipsum, lacinia eget mollis nec, facilisis in sem.</p>
		<p>Aenean ac finibus metus, nec sollicitudin ex. In hac habitasse platea dictumst. Proin iaculis dolor et velit facilisis, sed tristique turpis facilisis. Nunc purus lorem, scelerisque non est sed, iaculis fringilla lorem. Vestibulum a tempor est. Aenean semper nibh erat, et dignissim quam fringilla quis. Duis euismod tristique fringilla. Etiam sed lobortis nisi. Aliquam quis velit vehicula, dapibus dui quis, elementum mi. Nullam ultricies, neque sit amet suscipit tempor, sapien libero condimentum risus, eget posuere enim lorem eu lacus. Nunc pulvinar arcu sit amet tellus finibus sodales.</p>
	</div>
</div>

Answer 3

Your code are right, just add box-sizing:border-box inside both child elements as you are using padding in both to align them in one line, as below,

#wrapper {
margin: 0 auto;
background:none;
width:90%;
}
.content {
font-size:14px;
color:#000;
font-weight: 100;
font-family:tahoma;
padding: 20px;
background-color:rgba(25, 255, 255, 0.3);
margin: 0 auto;
width:40%;
margin-bottom:20px;
float: left;
position:relative;
box-sizing:border-box;
}

.sidebar {
font-size:14px;
color:#000;
font-weight: 100;
font-family:tahoma;
padding: 20px;
background-color:rgba(25, 255, 255, 0.3);
margin: 0 auto;
width:60%;
margin-bottom:20px;
float: right;
position:relative;
box-sizing:border-box;
}

<div id="wrapper">
<div class="content"></div>
<div class="sidebar"></div>
</div>