Question

I am creating an image gallery and need a bit of help pn positioning.

i have the html code:

    <div id="gal">
        <h3 class="title">"Picture title."</h3>
            <a href="" title=""><img class="picture" src="" alt="" /></a>
            <p class="description">content...</p>
    </div>

    <div id="gal1">
        <h3 class="title">"Picture title."</h3>
            <a href="" title=""><img class="picture" src="" alt="" /></a>
            <p class="description">content...</p>
    </div>  

with ths css:

#main
{

    margin-top:42px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    background:rgba(16,16,17,0.70);
    width:90%;
    box-shadow: 3px 3px 2.5px #888888;
    border-radius:5px;
}   
div#gal
{
    position:absolute;
    display:inline;
/*Decorations*/
    background:rgba(16,16,17,0.70);
    border-style:solid;
    border-width:3px;
    border-color:#464646;
    border-radius:5px;
}   

div#gal1
{
    margin-left:155px;
    position:absolute;
    display:inline;
/*Decorations*/
    background:rgba(16,16,17,0.70);
    border-style:solid;
    border-width:3px;
    border-color:#464646;
    border-radius:5px;
}

My problem is that i have to seperately position each div, is there a work around for this?

Thanks 🙂

Answer 1

You can change your CSS to read:

div.gal {
    float:left;

    /*Decorations*/
    background:rgba(16,16,17,0.70);
    border-style:solid;
    border-width:3px;
    border-color:#464646;
    border-radius:5px;
}

Your html can than be:

 <div class="gal">
    ...
 </div>

 <div class="gal">
    ...
 </div>

You can read more about a gallery using floats here: http://css.maxdesign.com.au/floatutorial/tutorial0407.htm