CODEWITHSUNDEEP
htmlcss
KingNestor
KingNestor

Reputation: 67960

How can I make the text of this div wrap?

I have a simple HTML structure that looks like:

<div class="container">
    <div class="caption">
        <div class="title">This is a very, very long title!!!</div>
        <div class="details">Details</div>
    </div>
    <div class="content"></div>
</div>

I've styled this very simply: 

.container {
    min-width: 200px;
}
.caption {
    overflow: hidden;
}
.title {
    float: left;
}
.details {
    float: right;
}
.content {
    height: 200px;
    background-color: #c0c0c0;
}

Which looks like:

css-example

If I shrink the window enough eventually the "details" div will wrap to the next line:

css-example2

What I would like to happen is the text inside the "title" div wrap to the next line but keep both "title" and "details" at the same line (not wrapping).

Something like:

This is a very, very         Details
long title!!!
+----------------------------------+

With the title only wrapping once there isn't enough space as the window is resized.

Can anyone point me in the right direction for achieving this?

Here is a jsFiddle of the above code if anyone is interested.

Edit: To clarify, I'd like to not specify a fixed width for .title if possible. In most cases I'd like to let this div get as wide as it needs.

Upvotes: 6

Views: 407

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 105893

Use display for your layout:http://jsfiddle.net/3nBDd/15/ 

.caption {
    display:table;
    width:100%;
}
.title {
    display:table-cell;
    text-align: left;
}
.details {
    display:table-cell;
    text-align right;
}

Upvotes: 1

bob
bob

Reputation: 1097

this should work:

http://jsfiddle.net/KV8UW/

<div class="container">
<div class="caption">
    <div class="details">Details</div>
    <div class="title">This is a very, very long title!!!</div>
</div>
<div class="content"></div>


.container {
    min-width: 200px;
}
.caption {
    overflow: hidden;
}
.details {
    float: right;
}
.content {
    height: 200px;
    background-color: #c0c0c0;
}

Upvotes: 2

Guanxi
Guanxi

Reputation: 3131

Upate your div Title as below and it will wrap the text.

.title
{
    float: left;
    width: 100px; //or whatever you want
}

or

.title
{
    float: left;
    width: 20%; //or whatever you want
}

Upvotes: 0

Related Questions