How to make text wrap when resizing in a inline div, without the div moving onto a new line first?


Tags: css,html,text,resize,wrap

Problem :

I'm trying to layout a comments board for a site I'm doing and am having some trouble with resizing.

Example: http://jsfiddle.net/kvDr3/2

HTML:

<body>
<div class="container">

<div class="post">
<div class="number">1.</div>
<div class="message">
<div class="title">Bla bla bla bla blaaaaaaaa bla bla bla sheep bla chair bla bla bla foo bla bla bla </div>
<div class="info">Post by JoshuaESummers</div>
</div>
</div>

<div class="post">
<div class="number">2.</div>
<div class="message">
<div class="title">Bla bla bla bla blaaaaaaaa </div>
<div class="info">Post by JoshuaESummers</div>
</div>
</div>

</div>
</body>

CSS:

.container {
width: 70%;
background-color: yellow;
}

.post {
padding-bottom: 10px;
padding-top: 10px;
}

.number {
width: 40px;
margin-right: 10px;
display: inline-block;
text-align: center;
}

.message {
display: inline-block;
}

.title {
color: black;
}

.info {
color: #999;
}

I want to keep the space between my 'number' and 'message' constant even when the page resizes. I'm not sure how the jsfiddle loads - but when the Results tab is made wide enough the there is space to the right of the number on both comments.

When the page is made smaller the top div jumps down a line before the text starts to wrap - whilst leaving the shorter post in it's proper place - and this all looks rather ugly!

Hacker News does not have this problem - but avoids this by laying things out in a table. I don't want to use tables!! So I would love to find another solution!

Thanks Stackoverflowers.

Joshua



Solution :

http://jsfiddle.net/kvDr3/7

.post {
    white-space: nowrap;
}
.number {
    float: left;
}
.title, .info {
    white-space: normal;
    margin-right: 60px;
}

You probably also want to put a min-width or overflow-hidden on .container. Eventually stuff pushes out as you shrink it.


    CSS Howto..

    How to persist local CSS change to server record?

    How to make text input in table cell grow beyond the limits of the table when selected?

    How to jump to a tab position (or equivalent) in html or css

    how to use css to display multiple posts in inline-block like google+

    How to create a circle with divided borders in CSS and Javascript?

    Angular show / hide with animation

    How to handle long string where characters stick together

    How to wrap text in a element in IE

    CSS and jQuery - how to force 2 rules to work together

    How to display a background image with a:hover

    How to put text over img on hover - width and height are variable

    How to Auto set the height of a div using the height of another div

    bootstrap modal disappear immediately after showing

    How to create a mobile navigation toggle using pure CSS?

    Ionic 2.0.0-beta.24 how can i import node_module css files without ionic.config.js

    Showing refresh button when animation is complete?

    How to make jQuery css affect upcoming elements

    How to apply gradient to the border of a div?

    How to add formatting to my pagination

    How to transform to <%= link_to %> with css?

    In order to output in erb exactly what you have in your original html, you could use the following: <li> <%= link_to user_path do %> <span>User</span> <% end %> </li>...
    Read more

    How to accomplish onHover event without a second image

    How to Join HTML with CSS in NSString in iOS?

    How to change both fill and stroke in svg with css

    How to make divs re-arrange when another div is positioned between existing?

    How to create a web page with 4 rectangurlar splits?

    How to add css into .scss file or theme

    How to go about containing a float within a div with variable space

    How to animate all except one feature with CSS

    How to Add a Vertical Line inside a texbox using html and css

    How to make a square button