More efficient way of coding this layout

[ohpayk]

Is there a more efficient way to code this? I want everything to be able to scale up to the max size. Here is a link to codepen: http://cdpn.io/xJmsD

#container {
width:90%;
max-width:960px;
margin 0 auto 0 auto;
background-color:yellow;
height:100%;
}
#nav {
float:right;
margin-right:10px;
}
#nav li {
list-style:none;
display:inline;
margin-left:15px;
}
#nav li a {
text-decoration:none;
color:black;
}
#logo {
float:left;
margin-left:10px;
margin-top:10px;
}
#banner {
clear:both;
width:100%;
background-color:green;
height:200px;
}
#pages {
width:100%;
height:600px;
}
#lineone {
width:100%;
height:300px;
}
#linetwo {
width:100%;
height:300px;
}
#one {
float:left;
width:40%;
background-color:#4F340B;
height:300px;
}
#two {
float:left;
width:35%;
background-color:#855A1A;
height:300px;
}
#three {
float:left;
width:25%;
background-color:#A67E41;
height:300px;
}
#four {
float:left;
width:25%;
background-color:#846E51;
height:300px;
}
#five {
float:left;
width:40%;
background-color:#B55811;
height:300px;
}
#six {
float:left;
width:35%;
background-color:#DDB83F;
height:300px;
}
#footer {
clear:both;
width:100%;
background-color:black;
height:120px;

Insert Logo Here

• What’s On
• Visit Us
• Shop

[Paulie_D]

I’ve stripped out a lot of repeated CSS into classes and generally tidied up a bit and switched out some divs for HTML5 elements such as `header`, `nav` & `footer`

http://codepen.io/Paulie-D/pen/cGfoD

You have a **lot** of IDs in there. They aren’t really necessary for **every** element unless you are actually planning on styling them individually.

You don’t need to state `width:100%` on divs…that is their default size.

Finally, you mentioned that you want this to scale up to the max size but you have listed a max-width of 960px. That’s fine if that is the maximum size you want to support…otherwise you can lose.

Naturally, you might want to consider media queries when scaling down.

[Author]

Posts