A link not behaving as expected

HTML & CSS
1

I have 3 nested div’s in a row and want them to all be a link on hover - the left and right div (box in css) work fine yet the center one does’nt behave in the same way.

I’ve tried debugging and can only think that this line is the casue;

#right-box {
    float: right;
}
#left-box {
    float: left;
}
#center-box {
    margin: 0 auto;
}

An example is here - http://jsfiddle.net/valleysboy/wkH5S/

Update - Okay the problem lies in the center-box not having a float property. Yet I want the center box to be dead center on the page?

2

Oh, you’re gonna love this…

This: #right-box, #left-box, # #center-box

Needs to be this: #right-box, #left-box, #center-box

One other comment - you’re using the a element to wrap those divs. While technically legal in html5, it’s not a good idea as you’re using an inline element as if it’s a block level element, and if you use this, you can’t have links inside the divs at all.

3

Okay typo removed - the a element is the issue then… thanks Dave i’ll work on that…
I’ve worked a hack using a float and adjusted the margin http://jsfiddle.net/valleysboy/VvHdb/ will attempt the wrapper now.

4

stephen_, is this close to what you want to do?


<!DOCTYPE html>
<html lang="en">
<!--
http://www.sitepoint.com/forums/showthread.php?1027406-a-link-not-behaving-as-expected
Thread: a link not behaving as expected

-->
<head>
    <meta charset="utf-8">
    <title>template</title>
    <style type="text/css">

html, body, div, span, h1, h2, h3, h4, p, blockquote, a, img, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    border:0 none;
    font-family:inherit;
    font-style:inherit;
    font-weight:inherit;
    outline:0 none;
    vertical-align:top;
    padding:0;
    margin:0;
}
body {
    color:#000;
    margin:20px;
}

#nested-content {
    text-align:center;
}

#nested-content a {
    text-decoration:none;
    border:2px solid #ccc;
}

#nested-content a#left-box,
#nested-content a#right-box,
#nested-content a#center-box {display:inline-block;}

#nested-content a#left-box {float:left;}
#nested-content a#right-box {float:right;}

#nested-content a:hover {
    background-color:#ddd;
}
#nested-content a:active {
    border:2px solid #f00;
}
#nested-content div {
    width:160px;
    padding:20px;
}
#nested-content h3 {
    margin:0;
    padding:10px;
}
#nested-content p {
    font-size:14px;
}
#nested-content img {
    border:none;
}
@media (max-width:448px) {
    #nested-content a#left-box,
    #nested-content a#right-box {float:none;}
}
    </style>
</head>
<body>
<div class="content">
    <div id="nested-content">
        <a id="left-box" href="#" target="_blank">
            <div>
                <h3 id="action-plan">(Left)</h3>
                <img src="images/icon.gif" alt="icon">
                <p>Download</p>
            </div> <!--/left-box-->
        </a>
        <a id="right-box" href="#" target="_blank">
            <div>
                <h3 id="stats">(Right)</h3>
                <img src="images/icon/statistical-icon.gif" alt="statistics icon">
                <p>View the report</p>
            </div> <!--/right-box-->
        </a>
        <a id="center-box" href="#" target="_blank">
            <div>
                <h3 id="maps">(Center)</h3>
                <img src="images/icon/.gif" alt=" icon">
                <p>View our</p>
            </div> <!--/center-box-->
        </a>
    </div>
</div>
</body>
</html>
5

This is perfect Ronpat - thanks for your time and help - I managed to do a quick hack previous to your example (an example of is here - http://www.cypsp.org/belfast.htm)

I’ll work on your idea above, i like the media queries - i’m actually looking to put everything into the foundation framework to make it reponsive - trouble so far is that I have to cater for IE and the top line and main navigation’s dont play ball!

Cheers for this!