div stacks images vertically

Question

I was making an image gallery using possition:inherit; which put each image one after the other. this was working fine until i had to add a div to each image. Which then caused all the images to stack like this this is an example

I tried adding position:inherit; to all of the div s but it didn’t fix the issue. and there is no other way of doing that I have to do without the divs.

Any Help would be Appreciated.

<div>
<div>
<a href="http://google.com"><img BORDER="0" SRC="files/1.jpg" style="width:304px;height:228px; position:inherit;" ></a>
</div>
</div>

<div>
<div>
<a href="http://google.com"><img BORDER="0" SRC="files/1.jpg" style="width:304px;height:228px; position:inherit;" ></a>
</div>
</div>

<div>
<div>
<a href="http://google.com"><img BORDER="0" SRC="files/1.jpg" style="width:304px;height:228px; position:inherit;" ></a>
</div>
</div>

i also have this hover function which i need the text to apear underneath the image when the image gets hovered on. usingdiv{float: left;} it makes the text come to the right of the image.

#main {




}

a {
    color: blue;
    position:inherit;
}

#hidden {
    display:none;
    color: orange;


 }

#main:hover #hidden {
    display:block;

    
    
    
}

div{float: left;}

<div id="main">
<a href="http://google.com"><img BORDER="0" SRC="files/1.jpg" style="width:304px;height:228px; " ></a>
<div id="hidden">
<p>hi how are you</p>
</div>
</div>

Answer 1

Adding to your edit, just put the text (<p/>) inside the div and make sure the image element inside the div is float:none;

EDIT: Don't make all your div's floating by using div{float:left;} RATHER: do #img_div_id{float:left} (unless you want every div on the whole page to float left of coure :) )