Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Text width within blog post

    Hi

    I brought this topic up before but don't think that I explained it particularly well. Does anybody know how the BBC manages to limit the text width in their news items without affecting the images and tables too?

    See example;
    http://www.bbc.co.uk/news/business-15755835

    I thought first of all that perhaps they had set up too different columns but then the images appear to dent the text, so they must be in the same column.

    Can this be achieved using CSS? I'd like to use it in a wordpress blog.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello FuxiAdmin,
    Those images are floated next to the text.
    See a float tutorial here.

    Does that help?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yeah, I already have my image floating;
    http://www.sugartreelondon.com/2011/...ic-of-ireland/

    What I want to do is shorten the width of the text without effecting the image.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by FuxiAdmin View Post
    Yeah, I already have my image floating;
    http://www.sugartreelondon.com/2011/...ic-of-ireland/

    What I want to do is shorten the width of the text without effecting the image.

    This will move it over a bit, adjust that right margin highlighted in red to suit -
    Code:
    .alignright {
        display: inline;
        float: right;
        margin: 0 0 10px 50px;
        overflow: hidden;
    }

    ---------------------------
    The page you're linking as an example has images wrapped in an extra containing element named .videoInStoryC that is styled with this -

    Code:
    .audioInStoryC, .videoInStoryC {
        clear: both;
        display: inline;
        float: right;
        margin: 0 -160px 16px 16px;
        overflow: hidden;
        position: relative;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    FuxiAdmin (11-19-2011)

  • #5
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ah, putting the image into negative positioning, I can't believe it was that easy! Thanks again Excavator.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •