I have 3 pictures in a line on my page, and clicking each one will open a larger view of it.
I have another div to the right of this one that will contain only text.
My issue is the clickable area for the 3rd picture is overlapping and causing the text in the next div to also be clickable and open the larger picture for the 3rd image.
How can I separate these so the 2nd div on the right is not clickable?
When looking at the page in Dreamweaver, there is no overlap and both divs are separate so Im not sure why it is causing the text to be a link.
CSS for the divs
#pressure {
width: 400px;
border: 0px;
float: left;
margin: 10px;
overflow-x: hidden;
}
#cpk {
width: 400px;
border: 0px;
float: right;
margin: 10px;
}
Here is a fiddle setup of basically what im experiencing, the bottom div (on my site its on the right side but you get the picture) is clickable and links to one of the pictures, even though they're seperate divs
<a href="#"/><img src="images/image.jpg" alt="LCD" width="200" height="100" />
Looks like you're closing the tag off the link too early.
dont put the '/>' at the end of the anchor, rather put > and put an </a> after the image.
<a href="#"><img src="images/image.jpg" alt="" width="200" height="100"/></a>