Kevin Kevin - 15 days ago 4
CSS Question

Responsive 4 Column web layout HTML CSS DIVs

I am looking to build a simple website but I cannot seem to get the layout correct. Below are some images of what I am shooting for as well as my code.
This is the labeled picture of what I am trying to create.

Here is the wire frame I mocked up.

Question: Does every column(4 total) become its own div. Is each row a div? Is each item a div? I am confused on that. Also wondering how containers and wrappers would apply here.

Code below.

<!DOCTYPE html>
<html lang="en-us">
<head>
<style>

/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}

/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }


/* GRID OF FOUR */
.span_4_of_4 {
width: 100%;
}
.span_3_of_4 {
width: 74.6%;
}
.span_2_of_4 {
width: 49.2%;
}
.span_1_of_4 {
width: 23.8%;
}

/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%; }
.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}








.header, .footer {
padding: 5px;
color: white;
background-color: black;
clear: left;
text-align: center;
}
.aboutus {
float:right;
margin: 5px;
padding: 5px;
width: 25%;
height: auto;
border: 1px solid black;
background-color:#123;
}
.aboutimage {
float:left;
margin: 5px;
padding: 5px;
width: 25%;
height: auto;
border: 1px solid black;
background-color:#123;
}
.about {
margin: 5px;
padding: 5px;
width: 100%;
height: 25%;
border: 1px solid black;
background-color:#989
}
.specials {
float: left;
margin: 10px;
padding: 10px;
width: 100%;
height: 300px;
border: 1px solid black;
background-color:#800;
}
.special1, .special2, .special3, .special4 {
margin: 1px;
padding: 1px;
width: 25%;
height: 50px;
border: 1px solid black;
background-color:#800;
}
.hours, .location {

margin: 5px;
padding: 5px;
width: 50%;
height: 150px;
border: 1px solid black;
background-color:#950;
}
.container{
float: center;
margin: auto;
padding: 10px;
width: 100%;
max-width: 1500px;
height: 1068px;
border: 1px solid red;
}
.logistics{
margin:1px;
padding:1px;

}

</style>
</head>
<body>

<div class="container">

<div class="header">
<p>Restaurant</p>
<p>A family restaurant</p>
<span>This is some text that is going to span this div.</span>
</div>


<div class="about">
<div class="aboutus">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget risus nibh. Aenean imperdiet ex ac viverra porta. Nulla tempor lorem nec augue tristique, sed molestie ante mattis. Donec et lorem non nibh eleifend auctor. Mauris congue metus in suscipit tincidunt. Pellentesque sem ligula, viverra eu sem a, bibendum convallis dolor. Fusce viverra mattis lobortis.
</p>
</div>
<div class="aboutimage">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget risus nibh. Aenean imperdiet ex ac viverra porta. Nulla tempor lorem nec augue tristique, sed molestie ante mattis. Donec et lorem non nibh eleifend auctor. Mauris congue metus in suscipit tincidunt. Pellentesque sem ligula, viverra eu sem a, bibendum convallis dolor. Fusce viverra mattis lobortis.
</p>
</div>
</div>


<div class="specials">
<div class="chicken">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget risus nibh. Aenean imperdiet ex ac viverra porta. Nulla tempor lorem nec augue tristique, sed molestie ante mattis. Donec et lorem non nibh eleifend auctor. Mauris congue metus in suscipit tincidunt. Pellentesque sem ligula, viverra eu sem a, bibendum convallis dolor. Fusce viverra mattis lobortis.
</p>
</div>
<div class="pork">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget risus nibh. Aenean imperdiet ex ac viverra porta. Nulla tempor lorem nec augue tristique, sed molestie ante mattis. Donec et lorem non nibh eleifend auctor. Mauris congue metus in suscipit tincidunt. Pellentesque sem ligula, viverra eu sem a, bibendum convallis dolor. Fusce viverra mattis lobortis.
</p>
</div>
</div>


<div class="section group">
<div class="col span_1_of_4">
<p>This is some text</p>
</div>
<div class="col span_1_of_4">
<p>This is some text</p>
</div>
<div class="col span_1_of_4">
<p>This is some text</p>
</div>
<div class="col span_1_of_4">
<p>This is some text</p>
</div>
</div>



<div class="logistics">
<div class="hours">
<h2>Hours of operation</h2>
<p>Monday through Sunday</p>
<p>7:00 AM - 7:00 PM</p>
</div>

<div class="location">
<h2>Location</h2>
<p></p>
<p></p>
</div>
</div>
<div class="footer">Copyright © KR</footer> </div>

</body>
</html>

Answer

Yes. To accomplish the responsive behavior the columns must be each one an independent div. But, why don't you use Bootstrap or Foundation or some other CSS framework. Instead of trying to reinvent the wheel just use an existing one. Those frameworks will do the work for you.