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 can I find the css error when I run a jquery plugin on IE8?

    .show() not working on page load

    How to inherit the background color of textarea from parent element in Internet Explorer?

    How to to make a gap between rows in FlowPanel in Css in Gwt?

    How to make a disabled select box look like a normal text box(css only)

    How to solve css issue to display image caption?

    How to override CSS style during hover in a table row?

    How to hide and show a separate div with CSS

    How to make text and icons black in sticky header?

    How to make right-side triangle in CSS ribbon menu?

    How to style a list so that it looks like a table, with various line height?

    Rails - how to add css to a helper method

    how to reference background image urls in css through config entrys

    How do I display an image over a table cell that's larger than the cell?

    How to concat js/css files and replace in html using gulp?

    How do I display image flush with other images after a clear?

    How to override CSS style assigned to element

    how to use both fixed and relative position property in same page using css?

    How to have anchors to the side of the page? [closed]

    How to hide classes on some pages in WordPress?

    How to add styles to wordpress default menu

    How to make a vector background image in css instead of using jpg or png

    How can I use d3.js filter to assign different css classes to elements?

    How to centre a div vertically and horizontallly?

    How to show the width of an element in the content of an ':after' pseudo-element?

    How to put textarea in div with CSS

    How create an overlay button on different containing div

    How to select the first occurrence of an HTML element in CSS that does not have a specific class?

    How to get CSS selectors to work in the Developer Tools for Chrome 17?

    How to show “…” when there's not enough space to view all the text