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 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Floating several images

    I'm bugging myself with the following:

    I have a column on a page, which contains a lot of text and a number of pictures. For the pictures, I want some of them to float left and some to float right.

    I have no problems assigning the float property to the img element in the column, but this is very general, and I have to float either to the left or the right. I've also considered using IDs, but using an ID is only allowed once on a page, if I understand it right.

    How can I CSS some code where I specify e.g. img a {... float: left ...} and img b {... float: right ...}. I've found that if I box an image, the text won't float below it.

    I've actually been able to do this, by using CSS:
    ...
    column {...}
    columnimgleft img {float: left}
    columnimgright img {float: right}

    and HTML:
    <div class="column">
    Text
    <div class="columnleftt"><img src=... />
    Text
    <div class="columnright"><img src=... />
    Text
    </div>

    but I have the feeling there might be some easier way to achieve this. If not, then fine, but if so, I'd like to know if anybody could help.

    Thanks,
    Kim.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Float the images

    There's no need to wrap the images in boxes; you can simply float them by themselves. If you need to float a number of images either left or right, you can set up two classed rules and assign the appropriate class to the images directly.

    A simple example using your "column" div:
    Code:
    CSS:
    
    .column {...}
    .picleft {float: left;}
    .picright {float: right;}
    and
    Code:
    HTML:
    
    <div class="column">
      <img src="..." class="picleft">
      <p>Some text wrapping around the left floated image.</p>
      <img src="..." class="picright">
      <p>Some other text wrapping around the right floated image.</p>
      ...
    </div>
    Since the images are classed, there's no problem whatsoever to have any number of images using these classes.
    Last edited by ronaldb66; 03-08-2005 at 10:07 AM. Reason: Typo...
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Perfect, exactly what I was looking for. Although it does the same as I outlined above, it is much tidier. Thanks Ronaldb66.

    Kim.


  •  

    Posting Permissions

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