Problem with floats in grid layout

Hi guys, im new to the forum. Just started experimenting with web design and am really interested in the grid style layout for responsive web design.

I am having a little trouble at the moment with getting the contents in my grid to float… they seem to be stuck in their original block state almost.
HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/normalize.css"/>
<link rel="stylesheet" href="css/grid.css"/>
<link rel="stylesheet" href="css/style.css"/>
<title>North &amp; Sons</title>
</head>

<body>
	<div class="nav-bar">
      <div class="grid-container">
        <a href="index.html"><img src="images/excavator-ico.gif" alt="excavator logo" class="excavator" /></a>
        <h3 class="logo">D C North &amp; Sons</h3>    	
        <form method="get" action="/search" id="search" placeholder="Search...">
        <input name="q" type="text" size="40"/>
        </form>
      </div>
    </div>

    <div class ="grid-container">
    	<div class="grid-8 main-content">
        <h2>Lorem Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mollis velit magna, mattis porttitor sem volutpat in. Sed sodales elit dictum velit 		posuere mattis ut nec ante. Pellentesque at interdum tortor. Phasellus nec justo ac sapien fermentum cursus. Praesent tristique orci vitae quam semper, egestas convallis urna faucibus. Donec ultrices nulla et diam adipiscing condimentum. Sed luctus quam est, non ultricies magna hendrerit ac. Proin tristique tempus sapien id placerat. Suspendisse pretium, ipsum sit amet vehicula varius, nulla ipsum auctor purus, et eleifend risus magna gravida justo.</p>
        <p>Praesent gravida orci id nibh auctor consequat. Phasellus neque dolor, luctus id justo ut, sollicitudin ultricies ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer ultricies venenatis accumsan. Duis mollis ante quis rutrum posuere. Mauris dignissim risus viverra, viverra dui eget, bibendum tellus. Vivamus malesuada libero at sagittis cursus. Vestibulum lacinia aliquam mi sit amet volutpat. Proin viverra ultricies dui, eu luctus velit porttitor a. Praesent a lorem non dui fringilla dignissim a a mi. Donec vestibulum iaculis est, a condimentum dui semper sit amet. Duis dapibus varius hendrerit. Pellentesque viverra et turpis sit amet accumsan. Vestibulum a nulla a elit vulputate sagittis. Donec pellentesque, felis at laoreet sollicitudin, orci dui scelerisque neque, commodo suscipit nunc arcu pellentesque odio.</p>
        <p>Nam augue sem, egestas cursus viverra quis, volutpat interdum sem. Sed vitae pretium turpis. Sed sodales ac dui sed tristique. Proin sed mauris id odio pretium bibendum nec vel erat. Donec lorem felis, faucibus feugiat ultrices ac, sollicitudin ac tortor. Morbi posuere et diam vitae dictum. Nam vestibulum tempus mauris, quis pellentesque dolor. Vivamus vel nisl et sapien tempor dapibus. Fusce quis odio lobortis, tincidunt nunc nec, dictum arcu. Curabitur arcu sapien, semper lacinia scelerisque ut, blandit sed mi. Quisque convallis mauris vel porttitor tristique. Fusce pellentesque vestibulum sem, eget euismod ante congue ac. Aenean consequat ante quis tellus convallis imperdiet. Vivamus vestibulum fringilla congue. Nam dignissim tincidunt consectetur. Suspendisse vel mollis est, a feugiat purus.</p>
        </div>
        <div class="grid-4">
        <h2>Donec commodo</h2>
        <p>Donec commodo, libero sed pellentesque sollicitudin, ante neque porttitor justo, sit amet adipiscing velit ligula nec lectus. Fusce at tortor at magna auctor feugiat in sit amet metus. In volutpat ac lacus ut posuere. Nam et libero dui. Morbi in metus in velit tristique dapibus vel non turpis. Suspendisse non ante et erat ultricies varius non a quam. Donec ut tempus metus. Nulla eget blandit velit, id imperdiet arcu. In hac habitasse platea dictumst. Ut ultrices aliquam diam ut cursus. Morbi elementum, orci id pretium pulvinar, felis ligula euismod orci, ac porttitor augue tellus ut elit. Phasellus felis eros, condimentum id facilisis id, ultrices quis tortor. Vivamus tristique hendrerit arcu, non aliquet erat venenatis id. Sed pretium euismod dignissim. Suspendisse quis aliquam nunc, at commodo tortor. Donec dui ante, volutpat non vulputate ac, rhoncus ut nibh.</p>
        <p>Vivamus est elit, vulputate vel volutpat vel, luctus nec elit. Integer sapien magna, commodo eu velit ut, mollis dictum est. Aenean sagittis justo sed augue condimentum, et laoreet arcu sodales. Nullam aliquam placerat tincidunt. Donec varius, mi et ullamcorper varius, est elit posuere dolor, quis laoreet risus velit vitae mauris. Suspendisse sit amet quam rutrum, feugiat est a, sodales nisl. In eget sem vel sapien accumsan tempor. Aliquam malesuada aliquet sem, ultrices pulvinar nisl cursus sit amet. Curabitur id nisi enim. Etiam dolor neque, varius vitae porta nec, euismod quis ipsum. Curabitur ipsum erat, vulputate nec adipiscing a, euismod tincidunt lacus. Etiam interdum lectus vel rhoncus rutrum. Nullam at metus iaculis, scelerisque leo a, euismod ligula. Nulla id viverra quam, nec ullamcorper risus. Vivamus gravida tristique leo, ut vehicula enim euismod eget. Phasellus consectetur leo vitae ornare ornare.</p>
        </div>
    </div>
</body>
</html>

grid.css



/* Global
================================ */

.grid-container {
	padding-left: 10px;
	padding-right: 10px;
	margin-left: auto;
	margin-right: auto;
}
/* Media Queries
================================ */

@media (min-width: 1px) and (max-width: 767px)  {
	.grid-container > [class^="grid-"] {
		padding-top: 5px;
		padding-bottom: 5px;
	}
	.hide-mobile {
		display: none;
	}
}

@media (min-width: 768px) {

	/* Columns
	================================ */

	.grid-container > [class^="grid-"] {
		float: left;
		min-height: 1px;
		padding-left: 10px;
		padding-right: 10px;
		margin-left: 2%;
	}
	.grid-container > [class^="grid-"]:first-child {
		margin-left: 0;
	}
	.grid-container > [class^="grid-"]:last-child {
		float: right;
	}

	/* Columns are 65px wide, with 20px gutters
	=========================================== */

	.grid-1 {
		width: 6.5%;
	}
	.grid-2 {
		width: 15%;
	}
	.grid-3 {
		width: 23.5%;
	}
	.grid-4 {
		width: 32%;
	}
	.grid-5 {
		width: 40.5%;
	}
	.grid-6 {
		width: 49%;
	}
	.grid-7 {
		width: 57.5%;
	}
	.grid-8 {
		width: 66%;
	}
	.grid-9 {
		width: 74.5%;
	}
	.grid-10 {
		width: 83%;
	}
	.grid-11 {
		width: 91.5%;
	}
	.grid-12 {
		width: 100%;
	}

	/* Clearfix
	================================ */

	.grid-container:after,
	.group:after {
	  content: " ";
	  display: table;
	  clear: both;
	}
}
@media (min-width: 1200px) {
	.grid-container {
		max-width: 1100px;
	}
}


style.css


@charset "utf-8";

/* Nav Bar*/

.nav-bar {
	background: #45484d; /* Old browsers */
	background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #45484d 0%,#000000 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #45484d 0%,#000000 100%); /* IE10+ */
	background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	height: 4em;
	width: 100%;
	position: fixed;

}

.excavator {
	height: 40px;	
	margin-top: 10px;
	margin-left: 10px;
	float: left;
}

.logo {
	display: none;	
}

/* Search Bar */
#search input[type="text"] {
    background: url(../images/search-white.png) no-repeat 10px 6px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #777;
    width: 120px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
	margin-top: 20px;
	margin-right: 20px;
	float: right;
    }

/* .logo {
	position: relative;
	top: 10px;
	color: #fff;
	font-weight: bold;
	font-size: 1.6em;
		
} */

/* Columns */
.main-content {
	margin-top: 45px;
 }

Hope thats everything you need,
Thanks in advance.

Hi Welcome to Sitepoint :slight_smile:

The problem is that you have added padding to the widths thus making then too big to fit side by side. You could change the border-box model and that will allow the content to stack side by side as padding and borders will be contained on the inside.


/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

More info here.

Thanks a lot Paul, that link was super helpful.