How can I size these spans so that the pictures don't extend past them?


Tags: html,css

Problem :

jsFiddle

In this HTML/CSS, I am trying to create some containers which will hold some text, a profile picture (which can have different sizes) and name.

CSS

#fb_status_10150163932662967{
    background:url(http://www.pixel2life.com/twodded/staff/stu/Tutorials/BrickTexture/bricks_zigzag_texture_6190218.JPG) #C0DEED; padding:20px;
}
#fb_status_10150163932662967 p{
    background:#fff;
    padding:10px 12px 10px 12px;
    margin:0;
    min-height:48px;
    color:#000;
    font-size:18px !important;
    line-height:22px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px
}
#fb_status_10150163932662967 p span.metadata{
    display:block;
    width:100%;
    clear:both;
    margin-top:8px;
    padding-top:12px;
    height:40px;
    border-top:1px solid #fff;
    border-top:1px solid #e6e6e6
}
#fb_status_10150163932662967 p span.metadata span.author{
    line-height:19px
}
#fb_status_10150163932662967 p span.metadata span.author img{
    float:left;
    margin:0 7px 0 0px;
}
#fb_status_10150163932662967 p a {
    color: #0084B4;
    text-decoration:none;
}
#fb_status_10150163932662967 p a:hover{
    text-decoration:underline
}
#fb_status_10150163932662967 p span.embedly_timestamp{
    font-size:12px;
    display:block
}

HTML

<div id="fb_status_10150163932662967" class="fb_status">
    <p>
        text1
        <span class="metadata">
            <span class="author">
                <img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-snc4/48898_565722966_3090_t.jpg">
                <strong>
                    Ben
                </strong>
                <br>
            </span>
        </span>
    </p>
    <br>
    <p>
        text2
        <span class="metadata">
            <span class="author">
                <img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-snc4/187486_564261187_2838929_t.jpg">
                <strong>
                    Kirsty
               </strong>
                <br>
            </span>
        </span>
    </p>
    <br>
    <p>
        text3
        <span class="metadata">
            <span class="author">
                <img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-snc4/48898_565722966_3090_t.jpg">
                <strong>
                    Ben
                </strong>
                <br>
            </span>
        </span>
    </p>
</div>

As you can see from the jsFiddle, the profile picture extends past the container. How can I make it so that they are contained fully within the container?



Solution :

@ben; just wirte overflow:hidden in your p tag

check this http://jsfiddle.net/sandeep/Tu5Y5/7/


    CSS Howto..

    how to position two image as a background image on div by css

    jQuery - How to revert css changes when using slideToggle()?

    How to remove a css class using jquery in a certain screen size

    how to convert this site to a mobile site or make it liquid?

    How to read this hover syntax in css?

    How to highlight a row in a table on certain occasions

    Adding a description to a css image slideshow

    Preload all CSS images while showing a preloader

    How should I use `position` and other properties correctly to position my web page?

    Jquery-How to grey out the background while showing the loading icon over it

    how to define multiple classes' hover event in css?

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

    how do i suppose to make the 4 box be responsive?

    How to dynamically modify