...

View Full Version : Text width within blog post



FuxiAdmin
11-16-2011, 09:55 PM
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.

Excavator
11-16-2011, 10:37 PM
Hello FuxiAdmin,
Those images are floated next to the text.
See a float tutorial here (http://css.maxdesign.com.au/floatutorial/).

Does that help?

FuxiAdmin
11-17-2011, 09:30 PM
Yeah, I already have my image floating;
http://www.sugartreelondon.com/2011/11/12/euro-2012-play-off-estonia-0-4-republic-of-ireland/

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

Excavator
11-18-2011, 12:22 AM
Yeah, I already have my image floating;
http://www.sugartreelondon.com/2011/11/12/euro-2012-play-off-estonia-0-4-republic-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 -



.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 -


.audioInStoryC, .videoInStoryC {
clear: both;
display: inline;
float: right;
margin: 0 -160px 16px 16px;
overflow: hidden;
position: relative;
}

FuxiAdmin
11-19-2011, 01:25 AM
Ah, putting the image into negative positioning, I can't believe it was that easy! Thanks again Excavator.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum