Hey every one, I need some advice on creating the markup for a page I am working on. Right now I think I have a case of div-itus going on and I am at a loss for how to make this better.
Here is a fiddle of what I have:
[URL=“http://jsfiddle.net/cyBMa/12/”]http://jsfiddle.net/cyBMa/12/
Or if you prefer this is what it needs to look like:
Address
12345 Street Name | VIEW MAP BUTTON |
City, ST 12345
Contact Us
email@example.com | E-MAIL US BUTTON |
_____________________________________________ <-border under contact info
Here is my current mark-up:
<div class="column_wrapper">
<div class="item_row">
<div class="column_one">
<span class="title">Store Name</span>
<address>
123 Street Name<br />
City, ST 12345
</address>
</div>
<div class="column_two">
<a class="small_button" href="http://maps.google.com/m?address">view map</a>
</div>
</div>
<div class="item_row">
<div class="column_one">
<span class="title">Contact Us</span><br />
email@example.com
</div>
<div class="column_two">
<a href="mailto:email@example.com" class="small_button">E-Mail Us</a>
</div>
</div>
</div>
CSS:
.column_wrapper {
padding: 0.9em 0em;
border-bottom: 0.12em solid #000;
}
.item_row:first-child,
.column_wrapper:first-child{
padding-top:0em;
}
.item_row {
overflow:hidden;
clear:both;
padding-top: 0.9em;
}
.column_one,
.column_two {
width:50%;
}
.column_one {
float:left;
}
.column_wrapper .column_two {
float:right;
}
.title {
color:#7a1820;
font-weight:bold;
}
body {
font: 13px/1.231 sans-serif;
}
.small_button {
display:block;
float:right;
width:30%;
padding: .5em 0em;
background-color:#7a1820;
color:#fff;
text-transform:uppercase;
text-align:center;
}
Can this be trimmed down any more or am I stuck with this?