force headline to next line if longer than 'x' px?

[achenn]

I've run into an issue of needing to force a phrase, in this case a headline, to the next line if it's longer than 150px.
I've looked at word wrap, but it seems to me that is for one long word, url, or set of numbers(ie- without a break).

I'm using the following code to no avail:

#main article .postinfo {
	list-style-type: none;
	margin-left: ;
	width: 150px;
	word-wrap:break-word;
}

Suggestions?

[chrishirst]

You cannot have a space in a identifier name or you have missed a '#' or a '.' before 'article'.

Also you should not leave empty values in your ruleset.

Is the container used a block or an inline element?

[achenn]

Mistakes corrected, problem persists. Also, I've tried both inline and block.. didn't seem to make a difference.

#main {
	float: left;
	margin-left: 315px;
	margin-top: 310px;
}
#main #article .postinfo {
	list-style-type: none;
	width: 150px;
	word-wrap:break-word;
}

#main #article p {
	float: right;
	margin-top: -85px;
	margin-left: 230px;
	width: 403px;
}

[chrishirst]

So do we get to see the HTML that the CSS is applied to?


One is of no use without the other AND to diagnose display or visual problem we need to SEE the problem, preferably in situ.

[achenn]

Ah, everything has been broken down into php- it will function as a Wordpress theme when all is said and done.

Here is the corresponding php, though I'm not sure what good it'll do.

PHP Code:

<div id="main">
    <div id="article">
        <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
        
        <div id="headline">
            <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></h1>
        </div><!-- end headline -->
        
        <div class="postinfo">
            <ul>
                <li>Posted by <?php the_author(); ?></li>
                <li><?php the_date(); ?></li>
                <li>tags: <a href="#">cool</a>, <a href="#">awesome</a></li>
            </ul>
        </div><!-- end postinfo -->
        
        <?php the_content(); ?>
        <?php endwhile; ?>
        
        <?php else :?>
            <p>I'm not quite sure what you're looking for.</p>
        <?php endif; ?>
        
    </div><!-- end article -->        
</div><!-- end main -->

I've been trying to find a way to make all of this live so that I can better receive help. Can't seem to find anything that works, though..?

[chrishirst]

If it is for wordpress why not set up an account on wordpress.com and upload the theme there.

or if you are testing locally copy and paste the rendered source code and put it on a free host somewhere.

[achenn]

Thanks for the rendered source tip, I didn't know that was an option.

Anyway, here is the live site using the rendered source code.

http://www.achenn.byethost7.com/

[chrishirst]

First off, the problem is being created by not understanding positioning fully.

By using fixed positioning and trying to correct the natural flow by using margins, you throw the rest of the document out.
If you really must have the fixed sidebar put it in a positioned element (relative) that is as wide as or wider than the sidebar, the fixed elements will still work as they should but the normal flow will be left intact.

[achenn]

Sorry to have to do this to you, but I guess I don't fully understand what you mean. Could you give an example?

[chrishirst]

I explain, hopefully clearly, how fixed position elements can break out of their positioned parent that remains in the document flow and display elsewhere on the page.

If you are going to use positioning it is important that you understand how it actually works first, so that it doesn't 'mess up' the rest of the layout.