My goal is to design a menu that spans the entire width of the page with some margin on the left and right sides. Here is the layout:
<div class="parent">
<div class="content">
<div class="element">
<a><p>Text1</p></a>
</div>
<div class="element">
<a><p>Text2</p></a>
</div>
<div class="element">
<a><p>Text3</p></a>
</div>
<div class="element">
<a><p>Text4</p></a>
</div>
</div>
</div>
Here is the CSS code for this design:
.parent
{
width:100%;
float:left;
}
.content
{
width:auto;
margin:0 20px;
float:left;
border-top:1px solid;
border-left:1px solid;
border-right:1px solid;
}
.element
{
width:100%;
float:left
}
.element a
{
width:auto;
padding:10px;
border-bottom:1px solid;
text-align:center;
display:block;
}
The intention is to have a full-width div with margins on the sides, while the bordered content inside fills the remaining space.
You can view an example here on jsfiddle.