mbomb007 mbomb007 - 3 months ago 9
CSS Question

CSS - Long text bumps down content

I'm using nested

div
elements styled to be like a table with rows and cells. In each one, there will be a checkbox, an image, and some text content. If the text content is longer than the image is wide, then the div containing the image and content is bumped such that it is no longer inline with the checkbox.

I'd like the text to wrap before that happens instead.

The content is actually dynamic (using ASP.NET), so I cannot fix the width of the containers or use JavaScript.

enter image description here

I created a JSFiddle that replicates the problem I'm having:

https://jsfiddle.net/L1h0y7yn/



.table {
display: table;
width: 800px;
height: 100%;
table-layout: fixed;
}

.row {
display: table-row;
}

.cell {
display: table-cell;
padding-top: 24px;
border: 1px solid red;
overflow: hidden;
}

input {
display: inline-block;
vertical-align: top;
margin-right: 10px;
}

.right {
display: inline-block;
vertical-align: top;
}

.image {
width: 120px;
height: 120px;
background-color: darkcyan;
}

.content {

}

<div id="table" class="table">
<div id="row_1" class="row">
<div id="cell_1" class="cell">
<input type="checkbox" />
<div class="right">
<div class="image"></div>
<div class="content">
This is some text
</div>
</div>
</div>
<div id="cell_2" class="cell">
<input type="checkbox" />
<div class="right">
<div class="image"></div>
<div class="content">
This is some text
</div>
</div>
</div>
<div id="cell_3" class="cell">
<input type="checkbox" />
<div class="right">
<div class="image"></div>
<div class="content">
This is some text
</div>
</div>
</div>
<div id="cell_4" class="cell">
<input type="checkbox" />
<div class="right">
<div class="image"></div>
<div class="content">
This is some longer block of text content.
</div>
</div>
</div>
</div>
</div>




Answer

If you're decided on a width of 120px on your image then you can set your content to the same to "wrap it" within the table-cell.

.content {
    width: 120px;
}

.table {
    display: table;
    width: 800px;
    height: 100%;
    table-layout: fixed;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
    padding-top: 24px;
    border: 1px solid red;
    overflow: hidden;
}

input {
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
}

.right {
    display: inline-block;
    vertical-align: top;
}

.image {
    width: 120px;
    height: 120px;
    background-color: darkcyan;
}

.content {
	width: 120px;
}
<div id="table" class="table">
    <div id="row_1" class="row">
        <div id="cell_1" class="cell">
            <input type="checkbox" />
            <div class="right">
                <div class="image"></div>
                <div class="content">
                    This is some text
                </div>
            </div>
        </div>
        <div id="cell_2" class="cell">
            <input type="checkbox" />
            <div class="right">
                <div class="image"></div>
                <div class="content">
                    This is some text
                </div>
            </div>
        </div>
        <div id="cell_3" class="cell">
            <input type="checkbox" />
            <div class="right">
                <div class="image"></div>
                <div class="content">
                    This is some text
                </div>
            </div>
        </div>
        <div id="cell_4" class="cell">
            <input type="checkbox" />
            <div class="right">
                <div class="image"></div>
                <div class="content">
                    This is some longer block of text content.
                </div>
            </div>
        </div>
    </div>
</div>

Comments