SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    May 2005
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS: A not so simple question ;)

    So I have created a 2 column layout with divs, and a header, i have also created a nested float http://glish.com/css/1.asp but now I need to get my form to sit correctly.

    I was able to create a form layout as show below with the shoes :

    But my problem arose when I tired to have a layout as show below

    i wanted

    area: [ ] (-----> tabed over) number: [ ] (------> tabed over) ext: [ ]

    This would look like form1 attachment, but the form i have is form at the lower part of the attachment

    But I want these to all be seperated according to the page I want them to be seperated like the first form attachment below but able to have 3 on a page. The problem I am runnign into is that it puts them on a new line, i would rather not change program to add extra div and span tags. I wanted to know if this can be acomplished using css. I have <br> tags for when I want a new line but for this example the <br> would come before the area adn after the ext, thus the reason i want them on the same line.

    I was able to make something like the colored box figure, but the problem is that when I try to add something else to the float left section it puts it on the next line down on the left but i actually want it on the lowest left region, is tehre a way to force it to go to the bottom?

    index.html
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <link href="test.css" rel="stylesheet" type="text/css">
    </head>

    <body>
    <div >
    <form>
    <span style="width: 33%; border: 2px solid #FF0000 " class="left">


    <div class="row">
    <span class="label">Name/span>
    <span class="formw"><input type="text" size="25" /></span>
    </div>




    <div class="row">
    <span class="label">Age/span>
    <span class="formw"><input type="text" size="25" /></span>
    </div>



    <div class="row">
    <span class="label">Shoe size/span>
    <span class="formw"><input type="text" size="25" /></span>
    </div>

    </span>

    <span style="width: 33%; border: 2px solid #00FFF0"; class="center" >
    <div class="row">
    <span class="label">CENTER/span>
    <span class="formw"><input type="text" size="25" /></span>
    </div>

    </span>

    <span style="width: 33%; border: 2px solid #0000FF " class="right">
    <div class="row">
    <span class="label">Shoe size2/span>
    <span class="formw"><input type="text" size="25" /></span>

    </div>
    </span>

    <span style="width: 33%; border: 2px solid #FF0000 " class="left">
    <div class="row">
    <span class="label">Age/span>
    <span class="formw"><input type="text" size="25" /></span>
    </div>
    </span>

    <div class="spacer">
    &nbsp;
    </div>

    </form>


    </div>

    </body>
    </html>


    test.css
    div.test-div{
    float: right;
    }
    div.row {
    clear: both;
    padding-top: 10px;
    }

    div.row span.label {
    float: left;
    width: 100px;
    text-align: right;
    }

    span.formw {
    float: right;
    width: 230px;
    text-align: left;
    }
    span.left {
    float: left;
    }
    span.right {
    float: left;
    }
    span.center {
    float: left;
    }


    Thanks
    Attached Images Attached Images

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

    I don't think anyone's replied because we are not sure what you want exactly. I've read this a few times and I still can't visualise whatyou want .

    Can you try explaining or draw a diagram of what you want. I looked at the attachments but they didn't seem to relate to your diagram at the top either.

    Your code isn't valid anyway because you are wrapping divs up in spans which is not allowed. Spans are inline elements and can only contain other inline elements.

    If you can provide a bit more insight then we will try to help


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
  •