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 9 of 9
  1. #1
    Regular Coder
    Join Date
    May 2005
    Posts
    235
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Layout of text and images

    Hi
    I have a three column layout and I'm wondering if there is ways of arranging my text around images within my centre (content) column. I realise I could insert a table within the centre <div> but I thought the whole idea of using CSS was to move away from layout cells and tables. There is a picture of the type of thing I'm trying to achieve here
    If I try and input text within a <div> that also contains an image the text only ever appears at the bottom and I cannot arrange it so it appears at the side.
    Thinking about solutions to this I would imagine that one way of doing this would be to place a new <div> within my centre <div> that could contain the image and in some way would align itself relative to the <div> that contains it.
    Am I making any sense?
    I fear not

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's certainly possible, you need to give the image a class like so -

    <img src="blah.jpg" class="image">

    Then in your CSS, float it to where you want - eg.

    img.image {
    float: right;
    margin: 10px
    }


  • #3
    Regular Coder
    Join Date
    May 2005
    Posts
    235
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Mark87,
    I'll give it a go now

  • #4
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No prob, so it should be like this with the image first -

    <div>
    <img class="image" src="blah.jpg">
    <p>Your text goes here.</p>
    </div>

  • #5
    Regular Coder
    Join Date
    May 2005
    Posts
    235
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thats the fella

    Cheers Mark87
    Tried it and it worked just fine
    how does giving the image a class change things
    (he say's knowing full well that it might be time to start looking at
    some of the many class tutorials he has seen around)
    Crowds

  • #6
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well you don't really need a class... but then all your images would be floating right ! - eg. if you used 'img { float: right }'.

    You need the class to define it as it's own thing - you could call the class 'floatr' or something so that whenever you want an image floating right you use -

    <img src="blah.jpg" class="floatr">

    img.floatr { float: right }

  • #7
    Regular Coder
    Join Date
    May 2005
    Posts
    235
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cool, and so I just create one for the right float and maybe a couple more for centre and left. And as long as its within the centre <div> the floats and any margins I apply will be relative to the containing <div>, in this case my centre <div>

  • #8
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Correct. Although you can only float left and right - if you want a center image with text wrapping around it it's a bit harder -

    http://alistapart.com/articles/crosscolumn/

  • #9
    Regular Coder
    Join Date
    May 2005
    Posts
    235
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's great, thanks for the link. I probably wont want to wrap text around a centred image though. Probably too distracting, maybe ok for an effect.
    Cheers again
    crowds
    Edit-
    Actualy from viewing some of the examples from the link, i can see that it would have its use's. Bookmarked for future use
    Last edited by Crowds; 05-26-2005 at 06:38 PM.


  •  

    Posting Permissions

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