CODEWITHSUNDEEP
htmlcssimage
Andrei Vieru
Andrei Vieru

Reputation: 174

Div width height not diplaying properly

I have the following code, which displays chaotic the images . I want to display the images smaller(33.3%) in a row, all with the same width and height and below them a link, but i'm stuck . Any ideas?

<style>
h4 {
    direction:ltr;
    text-align:center;
}

.line {
    position:relative;
    width: 33%;
    height:33%;
    margin-right: 1%;
}

.row {
    clear:both;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
}
</style>

<div class="row">
    <div class="line">
        <img src="http://www.hdwallpapersmaza.com/wp-content/uploads/2014/03/Download-Space- Background-Images-4.jpg" />
        <h4><a href="#" target="_blank">www.asite.ro</a></h4>
    </div>

    <div class="line">
        <img src="https://static-secure.guim.co.uk/sys-images/Guardian/Pix/pictures/2013/3/13/1363178656076/Google-talking-shoe-011.jpg" />
        <h4><a href="#" target="_blank">www.asite.ro</a></h4>
    </div>

    <div class="line">
        <img src="http://www.wired.com/wiredenterprise/wp-content/uploads//2012/10/ff_googleinfrastructure_large.jpg" />
        <h4><a href="#" target="_blank">www.asite.ro</a></h4>
    </div>
</div>

Upvotes: 0

Views: 54

Answers (1)

ProllyGeek
ProllyGeek

Reputation: 15846

you just need to clean your code a bit 

h4{direction:ltr;
              text-align:center;}
       .line{   
    position:relative;
    width: 32%;
    height:33%;
    margin-right:1%;

    float:left;


    }

.row{
   width:100%;

  overflow:hidden;


}
img
{
    width:100%;
    height:auto;

}

http://fiddle.jshell.net/prollygeek/GsrFR/

Upvotes: 1

Related Questions