CODEWITHSUNDEEP
htmlcss
srysry
srysry

Reputation: 173

Why doesn't these two div widths equal 100%?

Here's the jsfiddle: http://jsfiddle.net/dazakip/u7d59901/

.nav {
    float: left;
    width: calc(100% - 75px);
    height: 10px;
    padding-left: 5px;
    padding-bottom: 10px;
    background-color: green;
}

.checkout{
    float: right;
    width: 75px;
    height: 10px;
    padding-bottom: 10px;
    background-color: red;
}

Specifically this code. Want the two divs to sit next to each other, and remain regardless of resizing. The preview will show what I mean.

Thanks!

Upvotes: 0

Views: 42

Answers (1)

Mathijs Rutgers
Mathijs Rutgers

Reputation: 815

You have a padding-left of 5px, which is taken in account with the calculation. If you remove or calculate the 5px it should be fine!

.nav {
	float: left;
	width: calc(100% - 80px); /* add 5px */
	height: 10px;
	padding-left: 5px; /* or remove padding */
	padding-bottom: 10px;
	background-color: green;
}

.checkout{
	float: right;
	width: 75px;
	height: 10px;
	padding-bottom: 10px;
	background-color: red;
}


.lol {
	
	height:111110px;
	background-color:grey;
}
<body>
	
	<div class="nav">HOME | MENS | WOMENS</div>	
	<div class="checkout">Checkout</div>
	
	<div class="lol"></div>
</body>

Upvotes: 5

Related Questions