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 8 of 8
  1. #1
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question tab/indent in CSS - NO tables

    OK, I am trying to do the following:


    column one................column two
    ------------------------------------------
    entry number one......entry two
    entry three.................entry x


    you see what I mean, I want the columns to align. Dead easy with a table... but using just CSS...? Hmmmm... Is it even possible???

    I have tried using width and left properties, but this HAS to be an inline solution, and I want to avoid tables if possible!!!

    Cheers

    ::] krycek [::
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."

  • #2
    Senior Coder joh6nn's Avatar
    Join Date
    Jun 2002
    Location
    72° W. 48' 57" , 41° N. 32' 04"
    Posts
    1,887
    Thanks
    0
    Thanked 1 Time in 1 Post
    have you tried using floats?
    bluemood | devedge | devmo | MS Dev Library | WebMonkey | the Guide

    i am a loser geek, crazy with an evil streak,
    yes i do believe there is a violent thing inside of me.

  • #3
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yeah I guess I could do that...

    by the way, I re-read what I put, and just to make it clear, setting the width property of each column does work, however, the wrapping goes weird.

    ::] krycek [::
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."

  • #4
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, done it... thanks john

    a combination of width and float worked, except I have to use separate paragraphs instead of line breaks between rows now... probably better like that though

    ::] krycek [::
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."

  • #5
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, so I said this was solved... it's NOT...

    the text aligns for two lines, but then the next line wraps back again. like this:

    sdfg...............sdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgdsfg
    ......................dfsgsdfgsdfgsdfgsdfgsdfgdsfgsdfgsdfg
    dsgsdfgsdfgsdfgsdfgdsfgdfgdsgdsfgdsfgsdfgsdfgdfg
    xcvbxcvbxcvbxcvbxcvb

    where dots = space

    any ideas, anyone? I need that straight left!

    ::] krycek [::
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this, for a change:

    <!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" xml:lang="en">
    <head>
    <title></title>
    <style type="text/css">
    <!--
    #main {
    width:50%;
    margin:10% 25%;
    }
    #left {
    float:left;
    width:49%;
    border:1px solid #000;
    }
    #right {
    float:right;
    width:49%;
    border:1px solid #000;
    }
    br.break {
    clear:both;
    }
    -->
    </style>
    </head>
    <body><div id="main">

    <div id="left">
    text left<br />
    more text<br />
    more<br />
    text</div>

    <div id="right">
    I added the<br />
    borders<br />
    to show<br />
    how<br />
    it<br />
    looks<br />
    like</div><br class="break" />

    </div>
    </body>
    </html>

  • #7
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts
    um I don't think that solves my problem.

    perhaps I had better explain again.

    I am trying to format some text, inline, like I would in a table.

    So far I am using float left and width 150 to specify that the colum is 150px wide etc. etc.

    column two needs to be open width.

    here is some code:

    Code:
    .indent {
    	float: left;
    	width: 150px;
    }
    
    <p><span class="indent">column one text</span> lots and
     lots and lots and lots and lots and lots and lots and lots and lots
     and lots and lots and lots and lots and lots and lots and lots and
     lots and lots and lots and lots and lots and lots and lots and lots
     and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots and lots of text</p>
    I need the second column to align its left side. The width needs to be automatically sizeable so I cannot set it to any property.

    Ideas?

    ::] krycek [::
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."

  • #8
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmmm, looks as if i was nearly there.

    by setting a second class for the rightmost column and telling it to be 100% wide, it worked fine.

    ::] krycek [::
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."


  •  

    Posting Permissions

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