CODEWITHSUNDEEP
htmlcsslayout
Hristo
Hristo

Reputation: 46467

how would I set up this layout?

I'm trying to put together this layout...

enter image description here

... 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.

Upvotes: 0

Views: 80

Answers (2)

Hristo
Hristo

Reputation: 46467

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;
}

Upvotes: 0

mkuk
mkuk

Reputation: 300

this would require a lot of styling on your behave and would need to float a lot of elements. Currently busy right now but would have rigged it up for you. Put float left and float right and make sure those 

<Music icon + info>
 <Music icon img>
  <info>
<read>
 <readytext>

that is my pseudo code for it.

Upvotes: 1

Related Questions