CODEWITHSUNDEEP
htmlcss
Andreas
Andreas

Reputation: 23968

CSS word wrap second line of text

How can I make the text stay "on it's own side" when it's overflowing the first row?

I have a section that holds two divs. The two divs are positioned side by side but if the first row is full it starts on a new line below the first div. (and that is the problem)

The first div is 120px wide because that is the widest text that can be printed there. The second div is/should be the rest of the screen.

I created a link to jafiddle also in case the one on the page does not make it clear. The problem occures when you have a smal window (phones etc.).

The page is generated from php.

http://jsfiddle.net/tL2fkLhq

.section{
        display: inline-block;
        width: 100%;
        float: left;
    }
    .pTrans1{
        float: left;
        width: 120px;
        color: red;

    }
    .pTrans2{
        display: inline;
        
    }
<section><div class='pTrans1'>15<font color='blue'>1120Z</font></div> <div class='pTrans2'><b>Meterologisk observation från den 15e kl 12:20 svensk tid.<font color=green> (32 minuter sedan)</font></b></div></section><br>

Upvotes: 6

Views: 6217

Answers (7)

Sivadass N
Sivadass N

Reputation: 927

Change second div like this

.pTrans2{
        width: calc(100% - 120px);
        margin-left: 120px;
}

Upvotes: 1

Pjetr
Pjetr

Reputation: 1382

I prefer using the new flex-box spec over display: table. This is strictly personal, but I have a deep hatred for the CSS table system which always seems to act in a way that I don't want it to.

So, to copy Nenad Vracars answer with a slight modification:

You can use display: flex;

DEMO

section{
   display: flex;
}
.pTrans1{
   width: 120px;
   color: red;
 }
.pTrans2 {
  flex: 1;
}

<section>

    <div class='pTrans1'>15<font color='blue'>1120Z</font></div>
    <div class='pTrans2'><b>Meterologisk observation från den 15e kl 12:20 svensk tid.<font color=green> (32 minuter sedan)</font></b></div>

</section>

Upvotes: 1

ketan
ketan

Reputation: 19341

Just use display: table-cell; in .pTrans2 instead of display: inline;.

.pTrans2{
    display: table-cell;
}

Updated Fiddle

.section{
    display: inline-block;
    width: 100%;
    float: left;
}
.pTrans1{
   float: left;
   width: 120px;
   color: red;

}
.pTrans2{
    display: table-cell;
      
}
<section>
    <div class='pTrans1'>15<font color='blue'>1120Z</font></div>
    <div class='pTrans2'><b>Meterologisk observation från den 15e kl 12:20 svensk tid.<font color=green> (32 minuter sedan)</font></b></div>
</section><br>

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122085

You can use display: table;

DEMO

.section{
   display: table;
}
.pTrans1{
   width: 120px;
   color: red;
   display: table-cell;
 }
.pTrans2 {
  display: table-cell;
}

<section>

    <div class='pTrans1'>15<font color='blue'>1120Z</font></div>
    <div class='pTrans2'><b>Meterologisk observation från den 15e kl 12:20 svensk tid.<font color=green> (32 minuter sedan)</font></b></div>

</section><br>

Upvotes: 4

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

You can do this:

CSS

.section {
  display: block;
  width: 100%;
}

.pTrans1 {
  float: left;
  width: 120px;
  color: red;
}

.pTrans2 {
  display: block;
  margin-left: 120px;
}

DEMO HERE

Upvotes: 1

KittMedia
KittMedia

Reputation: 7466

Use .pTrans2 as block element with a margin-left:

.section{
    display: inline-block;
    width: 100%;
    float: left;
}
.pTrans1{
    float: left;
    width: 120px;
    color: red;

}
.pTrans2 {
    display: block;
    margin-left: 120px; 
}

Demo: JSFiddle

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167220

I have already done a similar example, which I would like to share. You need to use positioning for this case. This is a case of fixed-fluid:

+-------+-----------+
| FIXED | FLUUUUUID |
+-------+-----------+

Or

+-------+-----------+
| FIXED | FLUUUUUID |
|       | FLUUUUUID |
+-------+-----------+

Fixed-Fluid Model. In my snippet, I have demonstrated two kinds of examples. In the first case, the fluid is less in size. And the next has too long content.

Snippet

.parent {position: relative; margin: 0 0 15px; border: 1px solid #999; padding: 5px; padding-left: 100px;}
.parent .fixed {position: absolute; left: 5px; width: 90px; background-color: #99f;}
.parent .fluid {background-color: #f99;}
<div class="parent">
  <div class="fixed">Fixed</div>
  <div class="fluid">Fluid</div>
</div>

<div class="parent">
  <div class="fixed">Fixed</div>
  <div class="fluid">Fluid Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque animi placeat, expedita tempora explicabo facilis nulla fuga recusandae officia, maiores porro eaque, dolore et modi in sapiente accusamus id aut.</div>
</div>

Upvotes: 1

Related Questions