I’m trying to get a clickable background for my ‘listoption’ divs but am having issues as I want them to float next to eachother as well but can’t seem to get them to float. Any ideas?
<div id="optionHolder">
<div class="listoption">
<a href="/" ><h1>Title</h1></a>
<div class="listoptiontitle">Administration / Secretarial</div>
<div class="listoptionlinkbutton"></div>
</div>
<div class="listoption">
<a href="/" ><h1>Title</h1></a>
<div class="listoptiontitle">Administration / Secretarial</div>
<div class="listoptionlinkbutton"></div>
</div>
<div class="listoption">
<a href="/" ><h1>Title</h1></a>
<div class="listoptiontitle">Administration / Secretarial</div>
<div class="listoptionlinkbutton"></div>
</div>
<div class="listoption">
<a href="/" ><h1>Title</h1></a>
<div class="listoptiontitle">Administration / Secretarial</div>
<div class="listoptionlinkbutton"></div>
</div>
</div>
@charset "utf-8";
#optionHolder {
float:left;
width:100%;
border:0px solid red;
margin-top:10px;
margin-bottom:25px;
}
#optionHolder .listoptiontitle {
font-size:18px;
color:#00498f;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
width:150px;
float:left;
padding-left:23px;
padding-top:10px;
}
.listoptionlinkbutton {
float: right;
background:url('../images/common/a-z-option-button.gif') no-repeat;
width:34px;
height:34px;
border:0px solid red;
margin-right:20px;
margin-top:12px;
}
#optionHolder a {
position:absolute;
top: 0;
left: 0;
width: 311px;
height: 62px;
border:0px solid red;
}
#optionHolder a h1 {
display:none;
}
.listoption {
position: relative;
width:311px;
height:62px;
background:url(../images/common/a-z-option-background.gif) no-repeat;
margin-right:12px;
margin-bottom:12px;
background-color: transparent;
background-repeat: no-repeat;
background-position: left top;