Clickable Background Float Issue

HTML & CSS
1

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;
2

sorted it thanks after reading your post again.

Cheers

3

If you are trying to make a link active over the whole area of a div then all content must be in the anchor and must all be inline content n(not an h1 as Stomme mentioned). You just need to set the anchor to display:block and dimension it accordingly.

I guess you are wanting something like this demo:

http://www.pmob.co.uk/temp/link-hover.htm

4

Hi,
you have some code in there that needs fixing (<a href=“/”><h1>anchors cannot wrap a block here</h1></a>) but mostly, I want to understand what you are trying to build, because I can’t tell.

5

Thanks for the quick response.

Yes I do want a clickable background however I have tidy the code up and still no luck. Any ideas?

CSS

@charset "utf-8";

#optionHolder	{
	float:left;
	width:100%;
	border:0px solid red;
	margin-top:10px;
	margin-bottom:25px;
}


.listoption {
	float:left;
	border:1px solid red;
	width:300px;
	height:62px;
	background:url(../images/common/a-z-option-background.gif) no-repeat;
	margin-right:12px;
	margin-bottom:12px;
	
	}
	
.listoption a {
	display:block;
	background:1px solid red;
	cursor:pointer;
	}

#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;


}

HTML

    <div id="optionHolder">
       
    	<div class="listoption">
			<div class="listoptiontitle"><a href="#">Administration / Secretarial</a></div>
		</div>
   
    	<div class="listoption">
			<div class="listoptiontitle"><a href="#">Administration / Secretarial</a></div>
    	</div>

	</div>