Question

I’m trying to put together this layout…

… but I’m having issues with the middle section.

The left section (with the MP3 icon) is ALWAYS aligned left and has fixed width of 72px… the right section (with the READY text) is ALWAYS aligned right BUT but its width may vary, i.e. it is not fixed.

I want the middle section to be aligned to the left and span the width between the left & right sections without overlapping the right section. So if the text is obscenely long, it will wrap around to a second line instead of overlapping or pushing the right section down.

This is my basic structure so far…

<div id="files">
    <div class="file">
        <div class="file-icon"></div>
        <div class="file-status">
            <span class="file-status-text">READY 100%</span>
        </div>
        <div class="file-info">
            <div class="file-name">
                <span class="file-name-text"></span>
            </div>
        </div>
    </div>
</div>

How would I get this layout? Feel free to modify my HTML structure… it’s just what I have so far, nothing is set in stone.

Answer 1

I figured it out. Here’s a fiddle:

Here’s the code:

HTML

<div class="file">
    <div class="file-icon"></div>
    <div class="file-status">
        <span class="file-status-text"></span>
    </div>
    <div class="file-info">
        <div class="file-name">
            <span class="file-name-text"></span>
        </div>
        <div class="file-size">
            <span class="file-size-text"></span>
        </div>
    </div>
</div>

CSS

.file {
    border-top: 1px solid #c4c4c4;
    border-bottom: 1px solid #c4c4c4;
    height: 100px;
    margin-top: -1px;
    position: relative;
    z-index: 100;
}
.file-icon {
    height: 100%;
    width: 72px;
    margin: 0px 16px;
    float: left;
}

.file-status {
    height: 100%;
    min-width: 72px;
    margin: 0px 16px;
    float: right;
    text-align: center;
}

.file-status-text {
    font-size: 24px;
    color: #666666;
    line-height: 100px;
}

.file-info {
    position: relative;
}

.file-name {
    position: relative;
    overflow: hidden;
    margin-top: 36px;
}

.file-name-text {
    font-size: 24px;
    color: #666666;
    line-height: 32px;
}

.file-size {
    position: relative;
    overflow: hidden;
}

.file-size-text {
    font-size: 12px;
    color: #727272;
    position: relative;
}