1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

I'd like to replace a table with floats for this, but am not sure how.

Discussion in 'CSS' started by Josh Inno, Jan 2, 2007.

  1. #1
    I am supposed to do the following, I know how to do it using tables, but would like to do so using css and floats if possible.

    paragraph here, yada yada yada

    Image Another paragraph to the left
    over which will continue on with
    here the bla ditty bla and
    continue down here, with all of the
    text in line, but not wrapping under
    the image.

    and another paragraph down here, clear of the divs.

    I know how to do the clearing of the divs part, but the part about not having the text on the paragraph to the right of the image wrapping is a different issue.
     
    Josh Inno, Jan 2, 2007 IP
  2. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I'd put the image and the paragraph in a DIV container, then float the image to the left, like so:
    
    <div>
        <img class="float" src="#" width="200" height="150" alt="Alternative Text">
        <p>
            Another paragraph to the left
            over which will continue on with
            here the bla ditty bla and
            continue down here, with all of the
            text in line, but not wrapping under
            the image.
        </p>
    </div>
    
    Code (markup):
    
    .float {
        float: left;
    }
    
    Code (markup):
     
    Dan Schulz, Jan 3, 2007 IP
  3. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I already tried floating the image to the left. Unfortunately, that causes the text to wrap under the image. I've also tried floating the text to the left, then clearing the floats below the two, still wrapped the text past the bottom of the image. I've also tried adding a large margin to the bottom of the picture, but this requires an individual ID for each picture (rather than a class), and any time I were to change the text, I'd need to change the margin.

    I guess there are some times when tables are better than divs+css.
     
    Josh Inno, Jan 3, 2007 IP
  4. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Provide me with an image mockup of what you want and I'll see what I can do. :)
     
    Dan Schulz, Jan 3, 2007 IP
  5. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I'll do you one better. I'll show you the page it's self.

    http://pioneergreensdentistry.com/

    The images should be off to one side, with text on the other, not wrapping around it.

    Sorry about the text wrapping in my opening post. I just noticed that it didn't stay formated as I was hoping.
     
    Josh Inno, Jan 8, 2007 IP
  6. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #6
    That's ok. I'm about to head to bed, so I'll take a look at your page once I wake up (and get cracking on the other threads I've negelected here and at SitePoint).
     
    Dan Schulz, Jan 9, 2007 IP
  7. DatR

    DatR Peon

    Messages:
    210
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #7
    heres some code I've used to achieve I think what you are going for... i remember having a hard time making it work in all browsers but this worked

    
    <style>
    div#photo {
    	width: 25%;
    	float:left;
    	padding: 0;
    	margin: 0;
    }
    
    div#photodesc {
    	margin: 0px;
    	padding: 0px;
    	font-size:small;
    	float:right;
    	width: 73%;
    }
    
    .photospace {
    	clear: both;
    	width:auto;
    	display:block;
    	line-height:20px;
    }
    </style>
    
    <div id="photo">
    	<img src="">
    </div>
    <div id="photodesc">
    	This is some random text ... random text ... random text ...
    	This is some random text ... random text ... random text ...
    	This is some random text ... random text ... random text ...
    	This is some random text ... random text ... random text ...
    	This is some random text ... random text ... random text ...
    	This is some random text ... random text ... random text ...
    	This is some random text ... random text ... random text ...
    	This is some random text ... random text ... random text ...
    	This is some random text ... random text ... random text ...
    	This is some random text ... random text ... random text ...
    </div>
    
    <div class="photospace">&nbsp;</div>
    
    
    Code (markup):
     
    DatR, Jan 9, 2007 IP
    Josh Inno likes this.
  8. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Thanks for the code DatR.

    I'm looking it over and already have a few questions. Is there a benefit, other than clarity, to specifying div before the #?

    Also, it seems that the widths add up to more than 100%. What was the purpose of that in the code.
     
    Josh Inno, Jan 9, 2007 IP
  9. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #9
    And thanks again for all the help Dan.
     
    Josh Inno, Jan 9, 2007 IP
  10. DatR

    DatR Peon

    Messages:
    210
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #10
    no real reason for the div before the #

    I would actually just take it out now that I am looking at it again

    the widths add up to 98%? where does it come to more than 100?
     
    DatR, Jan 9, 2007 IP
  11. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #11
    *Smacks face with hand* Sorry. I mis-read one of the widths. Never mind.
     
    Josh Inno, Jan 9, 2007 IP
  12. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Okay, looking the code over, it does look interesting, however as my images aren't a set width I'd have to have an individual style for each individual image. At least once that style is set, I wouldn't have to change it every time I make a change to the text, like I would with the bottom-margin on the image trick I was trying for a while, and I'd be able to avoid using the table tag for layouts.
     
    Josh Inno, Jan 9, 2007 IP
  13. DatR

    DatR Peon

    Messages:
    210
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #13
    no problem... if you need any more help or have more questions just ask
     
    DatR, Jan 9, 2007 IP
  14. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #14
    I will, thanks.
     
    Josh Inno, Jan 9, 2007 IP