CODEWITHSUNDEEP
cssfluid
Kelvin Chow
Kelvin Chow

Reputation: 11

responsive inline block enquiry

I need some advice on this issue i'm having. In the jsfiddle below, I'm trying to create a responsive grid layout. The issue with what i have is, i would like the text to be in the middle of each individual grid. I've tried bumping it using margin-top but instead of the images stacking onto each other while resizing, the images are overlapping each other. The end result desired will be to have the text aligned center onto the image and have no gaps on all sides of the grid when resizing according to various screen resolution.

Link: http://jsfiddle.net/kelvinchow/VaDS9/

<style type="text/css">
#wrapper {
    display: block;
    width: 100%;
    height: auto;
    background: green;
}
.box {
    display: inline-block;
    float: left;
    width: 50%;
    height: auto;
    vertical-align: baseline;
    background: red;
}
.box-img img {
    width: 100% !important;
    height: auto;
}
.box-title {
    display: block;
    background: grey;
    height: 25px;
    font-size: 20px;
    font-family: helvetica, san serif;
    color: blue;
    text-align: center;
    margin-top: -100px;
}
</style>

<div id="wrapper">
    <div class="box">
        <div class="box-img">
            <img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
        </div>
        <p class="box-title">howdy</p>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
        </div>
        <p class="box-title">howdy</p>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
        </div>
        <p class="box-title">howdy</p>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
        </div>
        <p class="box-title">howdy</p>
    </div>
</div>

Upvotes: 1

Views: 711

Answers (1)

Esteban
Esteban

Reputation: 3139

You'll get this:

enter image description here

Fiddle here: http://jsbin.com/osazav/1.

With this markup:

<body>
    <div id="tl" class="box">
        <p class="box-title">howdy</p>
    </div>
    <div id="tr" class="box">
        <p class="box-title">howdy</p>
    </div>
    <div id="bl" class="box">
        <p class="box-title">howdy</p>
    </div>
    <div id="br" class="box">
        <p class="box-title">howdy</p>
    </div>
</body>

And this css:

div.box {
    background: url('http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png');
    position: absolute;
    height: 50%;
    width: 50%;
    background-size: cover;
    background-position: center;
}
div.box p.box-title {
    color: red;
    background-color: black;
    padding: 5px;
    position: absolute;
    margin: -10px -20px;
    top: 50%;
    left: 50%;
}
div.box#tl { top: 0%; left: 0%; }
div.box#tr { top: 0%; left: 50%; }
div.box#bl { top: 50%; left: 0%; }
div.box#br { top: 50%; left: 50%; }

Upvotes: 1

Related Questions