Issue
I have a 3 div with their display property set to table-cell. Div 1 is fixed width (22px). Div 2 needs to take up the rest of the available space. Div 3 needs to be pinned to the right side and only take up as much as the text that is in it.
So the issue I am having is when the contents of Div 2 are too big it pushes Div 3 off the screen.
This is a mobile web application. Ideally what would happen is the text in Div 2 would clip if it was going to push the bold totals of the screen. I could do it in javascript, but don't think I should have to.
Here is the template code for the list item:
<div class="liContainer">
<div class="cell a"><img src="badge.png" width="20px"/></div>
<div class="cell b">{title}</div>
<div class="cell c"><b>{total}</b></div>
</div>
Here is the css:
.cell{
display: table-cell;
vertical-align: middle;
}
.a{
width: 22px;
padding-right: 15px;
}
.b{
width: 100%;
}
.c{
text-align: right;
}
.liContainer{
width: 100%;
display: table-row;
}
EDIT: The result of employing the technique Jithesh describes below
Solution
You can do it with floats and it works perfect.
- Give float(left or right) to the elements that has fixed width or width of its contents.
- And
overflow: hidden
to the element that should take up the remaining width.
Important: The cells have to be in the order a > c > b as the floating cells must preceed the div that takes up the remaining space.
Here is the html:
<div class="liContainer">
<div class="a cell"><img src="https://www.google.co.in/images/srpr/logo4w.png" width="20px"/></div>
<div class="c cell"><b>197</b></div>
<div class="b cell">Hey, This is the long long long title</div>
</div>
And the CSS
.cell{
padding: 20px 10px;
}
.a{
width: 22px;
padding-right: 15px;
float: left;
background: #ccc;
}
.b{
overflow: hidden;
background: #eee;
text-overflow: ellipsis;
white-space: nowrap;
}
.c{
float: right;
background: #ccc;
}
.liContainer{
width: 100%;
//display: table-row;
}
More improvements
Add text-overflow: ellipsis
and white-space: nowrap;
to the block 'c' to clip the overflowing text with '...' that looks cool than normal clipping.
See it here: http://jsfiddle.net/Y3JEr/
Answered By - Jithesh
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.