SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    multiline text in span

    Hi,

    I have a page which is designed using CSS layout. It has a simple form where two spans are used as columns. In the 1st span, i have used float:left and width to create width of the 1st column. In the second span when i have more data (say more than 3 lines) then the third line is coming from the extreme left instead of confining to the second column.

    If i specify width and float for the second column(span) also then it works. But i don't want to do that in that way.

    Using display:block is also not solving the problem completely. Please help me in resolving this problem.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It doesn't sound like a span is the right use for a column but the technique would be the same as this.

    Float the left column and then just give the second column a margin-right equal (or greater) to the width of the left column.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .sidebar {
        float:left;
        width:200px;
    }
    .content {
        margin-left:210px;
    }
    </style>
    </head>
    <body>
    <div class="sidebar">
        <p>Sidebar</p>
    </div>
    <div class="content">
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
    </div>
    </body>
    </html>
    However if you are going to be putting floats and other content in that main content column you will need to read this first.

    (You will also get the 3px jog in ie6 unless you use the method in the link above)

  3. #3
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Acutally i have used div for the layout and p for row and span for a column.

    I have data in both the spans. So, i cannot go with this.

  4. #4
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    margin-left in % is working fine if i have data in both the columns. But i am not restricting the second columns width and using this column to span the complete length where ever required in the page.

    The length of data is decided on runtime in my case. So, i can't go for another CSS class for second column when i have more data in second column.

    PFB the sample code:
    <html>
    <head>
    <style>
    #col1{background-color: green; float: left; width: 20%;}
    #col2{background-color: yellow; margin-left:20%;display: block;}
    </style>
    </head>
    <body>
    <p>
    <span id="col1" >sample data</span>
    <span id="col2">
    sample data sample data sample data sample data sample data sample data sample data
    sample data sample data sample data sample data sample data sample data sample data
    sample data sample data </span>
    </p>
    <p>
    <span id="col2">
    sample data sample data sample data sample data sample data sample data sample data
    sample data sample data sample data sample data sample data sample data sample data
    sample data sample data </span>
    </p>
    </body>
    </html>

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Sorry you lost me there half way through

    margin-left in &#37; is working fine if i have data in both the columns
    What is the problem you are seeing when there is only data in one column? Why is this a problem or perhaps what is it that you do want to happen?

    The code will make two columns as required. The first column has to have a width set but the second column doesn't need a width at all.

    If you can show a test cases where it's not doing what you want I might be able to understand the effect you want. It's probably just me not seeing the obvious as I'm sure you know what you mean

  6. #6
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for all the confusion that i have created.

    Let me try to explain you clearly what my requirement is.

    There is a simple form designed in div layout with span used as columns.

    The structure of the form is pre-defined with two columns. So, when ever i want to place a data to span complete row then i am using 2nd column (Where i have not specified any width).

    The suggestion which you gave is to use margin-left in %. If i want to display data in two columns, then i don't have any problem. Now, when i want to span a data which covers complete row then i can't go with this as this will create left margin.

    So, i want a solution with following requirement.
    1. If data is more in 2nd column then it should not come in 1st column(This was the problem mentioned in the 1st post)
    2. I should be able to use 2nd column for placing a data which should span complete row without any left margin.

    Please suggest something for this.

  7. #7
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    I assume you are getting
    Code:
    111|222
    111|222
    222
    and you want
    Code:
    111|222
    111|222
       |222
    Can I ask why you are using spans to make a column?
    Ryan B | My Blog | Twitter

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Did you mean something like this instead?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #col1{background-color: green; float: left; width: 20&#37;;}
    #col2{background-color: yellow;overflow:auto;display:block}
    * html #col2{zoom:1.0}
    </style>
    </head>
    <body>
    <p>
    <span id="col1" >sample data</span>
    <span id="col2">
    sample data sample data sample data sample data sample data sample data sample data
    sample data sample data sample data sample data sample data sample data sample data
    sample data sample data </span>
    </p>
    <p>
    <span id="col2">
    sample data sample data sample data sample data sample data sample data sample data
    sample data sample data sample data sample data sample data sample data sample data
    sample data sample data </span>
    </p>
    </body>
    </html>
    If there is no float in the left column then column2 will start at the left edge. The overflow and haslayout ensure that if a float is present in column one then the column 2 forms a rectangular block to the side.


    Can I ask why you are using spans to make a column?
    lol - I already asked that

  9. #9
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Issue got resolved.

    Thanks a lot Paul.

    You are a Genius man.

  10. #10
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    lol - I already asked that
    bah, figured asking again couldn't hurt...
    Ryan B | My Blog | Twitter


Bookmarks

Posting Permissions

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