CODEWITHSUNDEEP
htmlcss
ryan
ryan

Reputation: 6655

Text isn't wrapping underneath of itself

I have a collection of divs as rows that can be variable width as they are inside a resizable container. The div contains 4 groups of elements that I want to be displayed side by side. Of these 4 groups, 2 of the groups need to be variable width while the other 2 are fixed. I have it mostly working except the last group isn't wrapping the way I want it to. I can't put a margin-left on it because of the variable width sibling. I also tried setting each item as inline-block but that forced the last group to have a strange calculated width that was larger than the available space and always forced it below the other 3 groups.

Here's a live example/fiddle and the source is as follows:

HMTL:

<div class="row level-2 note subtype-new subtype-fancy">
    <div class="leading col"><a class="note-icon icon" href="javascript:void(0)"></a></div>
    <div class="padded">
        <div class="status-icon-wrapper col">
          <span class="new-icon icon"></span>
          <span class="modified-icon icon" title="Revised Code"></span>
        </div>
        <div class="codes-wrapper col">
          <span class="codes"><a href="javascript:void(0)" class="code ">XYZ</a></span>
        </div>
        <div class="icon-wrapper col">
          <span class="fancy-icon icon"></span>
          <span class="plain-icon icon"></span>
          <span class="disabled-icon icon"></span>
        </div>
        <div class="description">Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here.</div>
    </div>
</div>

CSS:

.row {margin: 3px 0 3px 2px; overflow: hidden; outline: 1px solid #000}
.col {float: left}
.icon {display: inline-block; height: 16px; width: 16px; line-height: 16px; outline: 1px dotted #0CC; background-color:}
.level-1 .padded {padding-left: 30px}
.level-2 .padded {padding-left: 60px}

.codes-wrapper,
.icon-wrapper {padding-right: 3px}

.status-icon-wrapper,
.icon-wrapper {width: 17px}

.row .icon {display:none}
.note-icon {background-color: #F0F}

.fancy-icon {background-color: #CC0}
.plain-icon {background-color: #C00}
.new-icon {background-color: #0CC}

.note .note-icon,
.subtype-new .new-icon,
.subtype-modified .modified-icon,
.subtype-fancy .fancy-icon,
.subtype-plain .plain-icon,
.subtype-disabled .disabled-icon
{display: inline-block}

Upvotes: 0

Views: 430

Answers (2)

Milche Patern
Milche Patern

Reputation: 20452

.description {
    overflow:hidden;
}

jsFiddled here

http://www.w3.org/TR/CSS2/visufx.html#propdef-overflow

hidden : This value indicates that the content is clipped ...

Upvotes: 4

Don
Don

Reputation: 4157

If I understand the question correctly you should add:

.description{
    overflow:hidden;
}

to your CSS

Upvotes: 0

Related Questions