HTML overflow:hidden doesn't format text correctly

Posted by Rens Groenveld on Stack Overflow See other posts from Stack Overflow or by Rens Groenveld
Published on 2012-11-02T10:35:46Z Indexed on 2012/11/02 11:00 UTC
Read the original article Hit count: 300

Filed under:
|
|

I'm working on a website for an American Football team. They have these newsitems on their front page which they can manage through a CMS system. I have a problem with alligning the text inside those news items. Two of the news items look like this:

enter image description here

As you can see, the right newsitem text are displayed nicely. But the left cuts it off really bad. You can only see the top half of the text at the last sentence. I use overflow: hidden; to make sure the text doesn't make the div or newsitem bigger. Does anyone have any idea how to solve this through HTML and CSS or should I cut it off serverside with PHP?

Here's my code (HTML):

<div class="newsitem">
        <div class="titlemessagewrapper">
            <h2 class="titel" align="center"><?php echo $row['homepagetitel']; ?></h2>
            <div class="newsbericht">
                <?php echo $row['homepagebericht']; ?>
            </div>
        </div>
        <div class="newsfooter">
            <span class="footer_author"><a href=""><?php echo get_gebruikersnaam_by_id($row['poster_id']); ?></a></span> <span class="footer_comment"><a href="">Comments <span>todo</span></a></span>
            <a href="" class="footer_leesmeer">Lees meer</a>
        </div>
    </div>

And here is the CSS:

.newsitem{
float: left;
height: 375px;
width: 296px;
margin: 20px 20px 0px 20px;
background-color: #F5F5F5;

}

.newsitem .titel{
color:#132055;
font-size:1.2em;
line-height:1.3em;
font-weight:bold;
margin:10px 5px 5px 5px;
padding:0 0 6px 0;
border-bottom:1px dashed #9c0001;
}

.titlemessagewrapper{
height: 335px;
overflow: hidden;
}

.newsitem .newsbericht{
padding:5px 5px 5px 5px;
font-size: 0.8em;
margin-bottom: 5px;
}

.newsitem .newsfooter{
width: 100%;
height: 25px;
background-color: #132055;
margin: 0px auto;
font-size: 0.8em;
padding-top: 5px;
margin-top: 10px;
border: 1px solid #9c0001;
}

© Stack Overflow or respective owner

Related posts about php

Related posts about html