- This topic is empty.
July 16, 2011 at 6:14 am #33520
When writing articles for my website, I find that it’s much nicer to have pictures that go with the text, to break it up. But I’ve always used tables, seeing as I’ve only recently learned CSS from this website.
The only way that I’ve managed to place an image on one side of the text with the text wrapping around it (rectangular image) is using absolute positioning and left-margins. I can’t get my image to align to the right either.
So could anyone please post a way to both align the picture on one side or another (with CSS) and by placing it within the text (without absolute positioning and text above, beneath and to one side).July 16, 2011 at 8:18 am #83476Paulie_DMember
Depends on your level of knowledge of HTML/CSS but basically the answer is to ‘float’ the ‘image’ using css.July 16, 2011 at 9:29 am #83478kMistMember
If you have an image that you want shown to the left you would have:
Paragraph goes here
This would make the image to to the left side of whatever container you have it in (div) and the text would wrap around it.
Now once you progress in your knowledge of css you will come to avoiding putting inline styling in your code and you will use css for these things but search for info on “float” and you will find a ton of info out there for you to digest.July 16, 2011 at 9:41 am #83479
Thanks. Whenever I’d used float, I’d made the text float as well, which must have been a mistake.July 16, 2011 at 10:03 am #83480kMistMember
If you use CSS you would likely mark it up like this:
margin: 0 10px 10px 0; /*give it some space around the right and bottom of the image so the text does not touch*/
}July 16, 2011 at 10:20 am #83482chrisburtonParticipant
It would be helpful if you posted your HTML for this. Usually it’s something like..
Are you using WordPress? Maybe we can make it easier with a little PHP.July 16, 2011 at 11:33 am #83486
These examples are perfect, thanks (kMist mostly).
@ChristopherBurton: No, I’m using Coda, and only use PHP for calling header, footer and sidebar, but I’d be interested in what you’ve got.July 16, 2011 at 11:45 am #83487chrisburtonParticipant
When you said, “articles”, I automatically assumed this was for a blog which in most cases WordPress is used and things are pre-defined.
- The forum ‘CSS’ is closed to new topics and replies.