How do I do this in CSS?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • weberizeme
    New Member
    • Feb 2010
    • 2

    How do I do this in CSS?

    I have a problem trying to get text to behave the way I want it to.

    This is a rough diagram of what it is I am trying to do.


    Code:
    -----------------------------------------------------------------------------------------
     img  Post It:   Some, text, goes, here, and here and here,
                     wraps to here, then again at end of this line,
                     need it to stay here
    ----------------------------------------------------------------------------------------

    Problem is instead of doing the above it does

    -----------------------------------------------------------------------------------------
    img Post It:

    Some, text, goes, here, and here and here,
    wraps to here, then again at end of this line,
    need it to stay here
    -----------------------------------------------------------------------------------------

    OR it does


    -----------------------------------------------------------------------------------------
    img Post It: Some, text, goes, here, and here and here,
    wraps to here, then again at end of this line,
    need it to stay here
    -----------------------------------------------------------------------------------------

    I need this to work both in IE and Mozilla.

    img = an background image

    The top and bottom border lines are fine but sometimes the bottom border is not spaced the same as the top border, less or more padding between border and text.

    I don't really want to put code because obviously I have no clue what I am doing.
    Here is some sample though to give you idea what I have tried but you probably shouldnt base your samples on what I provide below.


    Code:
    <div id="tag-wrap">Post It:<div id="text-block">this, is, some, text, and, really, long, line, that, would, wrap to, next, line, and, on, and, on, and, on...</div></div>
    The inner div pushes the text block down a line. I tried replacing inner div with span but that doesn't keep the text block padded / margined over.


    CSS example not provided cause I don't know how to do this. If you know how to do this or can help pleae provide some CSS samples and explain if you can the proper elements to use in the html code, div, span or whatever and why.

    I am at a loss. Thank you for any help you can provide.
  • weberizeme
    New Member
    • Feb 2010
    • 2

    #2
    This is sample of CSS I have been playing with.

    Code:
    #tag-wrap {
    
     width:585px; 
    margin:0px 5px; 
    padding:5px 15px; 
    font-size:11px;
    }
    
    #text-block { 
    
     width:500px;
     margin-left:75px; 
    }

    Comment

    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434

      #3
      There are a number of ways to do this. This is one:
      <p style="float:le ft; margin:0">
      <img style="float:le ft" src="1.gif">
      Post It:
      </p>
      <p>this, is, some, text, and, really, long, line, that, would, wrap to, next</p>

      Comment

      • Ashwani Sharma
        New Member
        • Nov 2008
        • 46

        #4
        You have to use float in your both div's. That will work fine for you, I think

        Ashwani Sharma

        Comment

        Working...