Div with dynamic image size

Question

I have this struture: one main div and inside i have two div's. In the first one, i have an image with 60% of width. The other one have 35% of width. Inside this second div i have two more div's, with width of 100% and height of 50% (in each div). All div's inside the main div have image.

What i'm trying to do is that div's inside the main div, have size of the image. As you can see, in the fiddle, the first image (first div inside main div) is showned correctly. But the other div (inside main div) are not showned correctly.

This is waht i have so far:

FIDDLE DEMO

My div html:

<div class="features">
<div class="firstFeatureLine">
    <div class="firstLeft">
        <div id="cultureNews" class="outerbox">
            <img src="http://www.lookouch.com/www/assets/newImages/home/modulos/culturenews.jpg" />
            <div id="featuresTitle">
                Culture News
            </div>
        </div>
    </div>
    <div class="firstRight">
        <div id="firstRightUp">
            <div id="portfolio" class="outerbox">
            <img src="http://www.lookouch.com/www/assets/newImages/home/modulos/portfolio.jpg" />
                <div id="featuresTitle">
                    Portfolio
                </div>
            </div>
        </div>
        <div id="firstRightDown">
            <div id="culturenews1" class="outerbox">
            <img src="http://www.lookouch.com/www/assets/newImages/home/modulos/culturenews 1.jpg" />
                <div id="featuresTitle">
                    Culture News
                </div>
            </div>
        </div>
    </div>
</div>

<div class="secondFeatureLine">
    <div class="secondLeft">
        <div id="portfolio1" class="outerbox">
            <img src="http://www.lookouch.com/www/assets/newImages/home/modulos/portfolio.jpg" />
            <div id="featuresTitle">
                Portfolio
            </div>
        </div>
    </div>

    <div class="secondRight">
        <div id="school" class="outerbox">
            <img src="http://www.lookouch.com/www/assets/newImages/home/modulos/school.jpg" />
            <div id="featuresTitle">
                School
            </div>
        </div>
    </div>
</div>

Here's my css:

.features {
width: 100%;
height: 100%;
background-color: #1a1a1a;
margin-top: 10%;
margin-bottom: 10%;
}

#featuresTitle {
color: #ffffff;
background-color: #6000ff;
padding: 5px 5px 5px 5px;
position: absolute;
font-family: Montserrat;
font-size: 13px;
display: inline-block;
top: 0;
left: 0;
}

.firstFeatureLine { 
min-width: 20px;
min-height: 20px;
display: inline-block;
position: relative;
width: 100%;
height: 100%;
}

.firstFeatureLine .firstLeft {
width: 60%;
height: 100%;
display: inline-block;
position: relative;
}

.firstFeatureLine .firstLeft #cultureNews {}
.firstFeatureLine .firstLeft #cultureNews img { width: 100%; }

.firstFeatureLine .firstRight {
width: 35%;
height: 100%;
display: inline-block;
position: absolute;
}
.firstFeatureLine .firstRight #firstRightUp {
width: 100%;
height: 50%;
position: relative;
}
.firstFeatureLine .firstRight #firstRightUp #portfolio {}
.firstFeatureLine .firstRight #firstRightUp #portfolio img { width: 100%; }

.firstFeatureLine .firstRight #firstRightDown {
width: 100%;
height: 50%;
position: relative;
}
.firstFeatureLine .firstRight #firstRightDown #culturenews1 {}
.firstFeatureLine .firstRight #firstRightDown #culturenews1 img { width: 100%; }

.secondFeatureLine {
min-width: 20px;
min-height: 20px;
display: inline-block;
position: relative;
width: 100%;
height: 100%;
}

.secondFeatureLine .secondLeft {
width: 35%;
height: 100%;
display: inline-block;
position: relative;
}

.secondFeatureLine .secondLeft #portfolio1 {}
.secondFeatureLine .secondLeft #portfolio1 img { width: 100%; }

.secondFeatureLine .secondRight {
width: 60%;
height: 100%;
display: inline-block;
position: relative;
}

.secondFeatureLine .secondRight #school {}
.secondFeatureLine .secondRight #school img  { width: 100%; }

This is what i want to do, but dynamicly with the images sizes (but the height of the main div need to be the div on red):

[image]()

The error is in here: [image]()

Can you explain what you are trying to do a little better please — Adjit, May 23 '14 at 13:46
@ShashankSharma I think I figured it out... the divs containing the picture are bigger than the images so there is 'whitespace' — Adjit, May 23 '14 at 13:52
I have added the image i want to be, right now the right div's inst respecting the sizes i want. — user3629180, May 23 '14 at 13:52
ohhk.... @Adjit you are right ... i was also seeing the same thing in my browser. — Shashank, May 23 '14 at 13:54
Please, check again. I have added two pictures with what i want, and where is the problem — user3629180, May 23 '14 at 13:55
@user3629180 what is that error? how would you like it to look — Adjit, May 23 '14 at 13:59
@Adjit i want the main div with height of the left image. And the right div will need to be 100% of that height, not more, not less. — user3629180, May 23 '14 at 13:59
First... as usual... ID's MUST be unique. http://stackoverflow.com/questions/544010/css-div-id-vs-div-class — Adjit, May 23 '14 at 14:30

0xFK · Answer 1 · 2014-05-23T14:52:34.047

My recommendation for firstright and secondright is to do float:right; Also width 60% ,40%

Updated Fiddler Here..

Try this :

features {
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    margin-top: 10%;
    margin-bottom: 10%;
}

div {
    border: 0px;
}

.outerbox {
    background-color: #FFFF00;
}

#featuresTitle {
    color: #ffffff;
    background-color: #6000ff;
    padding: 5px 5px 5px 5px;
    position: absolute;
    font-family: Montserrat;
    font-size: 13px;
    display: inline-block;
    top: 0;
    left: 0;
}

.firstFeatureLine {
    min-width: 20px;
    min-height: 20px;
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: red;
}

    .firstFeatureLine .firstLeft {
        width: 60%;
        height: 100%;
        display: inline-block;
        position: relative;
    }

        .firstFeatureLine .firstLeft #cultureNews {
        }

            .firstFeatureLine .firstLeft #cultureNews img {
                width: 100%;
            }

    .firstFeatureLine .firstRight {
        width: 40%;
        height: 100%;
        display: inline-block;
        position: absolute;
        float: right;
    }

        .firstFeatureLine .firstRight #firstRightUp {
            width: 100%;
            height: 50%;
            position: relative;
        }

            .firstFeatureLine .firstRight #firstRightUp #portfolio {
            }

                .firstFeatureLine .firstRight #firstRightUp #portfolio img {
                    width: 100%;
                }

        .firstFeatureLine .firstRight #firstRightDown {
            width: 100%;
            height: 50%;
            position: relative;
        }

            .firstFeatureLine .firstRight #firstRightDown #culturenews1 {
            }

                .firstFeatureLine .firstRight #firstRightDown #culturenews1 img {
                    width: 100%;
                }

       .secondFeatureLine {
    min-width: 20px;
    min-height: 20px;
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: green;
      }

    .secondFeatureLine .secondLeft {
        width: 40%;
        height: 100%;
        display: inline-block;
        position: relative;
    }

        .secondFeatureLine .secondLeft #portfolio1 {
        }

            .secondFeatureLine .secondLeft #portfolio1 img {
                width: 100%;
            }

    .secondFeatureLine .secondRight {
        width: 60%;
        height: 100%;
        display: inline-block;
        position: relative;
        float: right;
    }

        .secondFeatureLine .secondRight #school {
        }

            .secondFeatureLine .secondRight #school img {
                width: 100%;
            }

Div with dynamic image size

1 Answers1