CODEWITHSUNDEEP
htmlcss
Salvador Dali
Salvador Dali

Reputation: 222561

Why is my text below the element?

I am trying to make responsive design with CSS. Everything works great, with one problem: I can not put few divs with text in the needed location. It is hard to understand what I mean, so here is a fiddle.

As you see a text Filename Some descr is shown in the bottom and I want it to appear inside of the ligth-grey box.

<div class="OD-grid">
    <span class="OD-template">
        <span class="OD-template-folder">Folder</span>
    </span>
    <span class="OD-template">
        <span class="OD-template-file">
            <img src="public/img/image.png"/>
            <span class="OD-template-info">
                <div> Filename</div>
                <div> Some descr</div>
            </span>
        </span>
    </span>
</div>


.OD-grid > .OD-template{
    display: block;
    float: left;
    height: 90px;
    width: 33.333333%;            // this should be responsive. 50%, 25%, 33.33333%
}

.OD-template-folder{
    display: block;
    margin: 5px;
    cursor: pointer;
    height: 70px;
    background-color: #9FB9CA;
    padding: 10px 0 0 10px;
    background: #0072c6;
    color: white;
    font-size: 17px;
}

.OD-template-file {
    display: block;
    margin: 5px;
    cursor: pointer;
    height: 80px;
    background-color: #eaecee;
}

.OD-template-file > img{
    padding: 16px;
    width: 48px;
    height: 48px;
    background: #b1b1b1;
}

in such a way that if I change the line before // this should be responsive. 50%, 25%, 33.33333% to any of these numbers, it should work properly.

Upvotes: 0

Views: 110

Answers (4)

qtgye
qtgye

Reputation: 3610

I have updated your fiddle.

I used inline-table and tabledisplays so that their widths are relative to its content. Having vertical-align:top makes the text align to top, similar to the other ones.

.OD-template-info {
    display: inline-table;    
    vertical-align: top;
}

.OD-template-info > * {
    display: table;
}

Upvotes: 1

jtorrescr
jtorrescr

Reputation: 627

I dont now how did you decide to use that labels in that way, but you could add float:left; to .OD-template-file > img

Upvotes: 1

jpsonic10
jpsonic10

Reputation: 31

You can add float: left style to .OD-template-file > img and .OD-template-file > .OD-template-info.

Upvotes: 1

Dola
Dola

Reputation: 1483

Give the .OD-template-info class the style display:inline-block This shall make the text go inside the light grey area

Demo: jsFiddle

Upvotes: 1

Related Questions