SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Nov 2002
    Location
    Cairns, Australia
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Table-less form, Element overlaps

    Hi there

    I'm attempting to build a table-less form using fieldsets and divs, but I'm having a problem with label elements that overlap the divs they are inside of.

    For an example, see the following link:

    http://www.shaunjohnston.id.au/sampl...l/example.html

    I have set the borders on the divs to red, and the borders on the labels to black, to make it easier to see the problem.

    You'll see that in the bottom fieldset, I have several fields that run across the page. This seems to be because the labels are set to float: left (to keep a uniform distance between the label and the field), and are overlapping their container divs.

    Is there any way to keep the labels contained within the divs, so I can avoid this placement problem?

    Thanks!

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is caused by your floating the labels. A floated element is taken out of the document flow, and does not affect subsequent block-level boxes.

    You need to clear everything that should always come below a floated box. Try this:
    Code:
    fieldset div {clear:both}
    Birnam wood is come to Dunsinane

  3. #3
    Non-Member arun9810128800's Avatar
    Join Date
    Apr 2005
    Location
    India
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    Why u can use the table. use of table u can put lable or text box at u want.

    Bye

  4. #4
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    581
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by arun9810128800
    Hello,

    Why u can use the table. use of table u can put lable or text box at u want.

    Bye
    Nope. That's NOT what tables were meant for!



    Looking at your code, tsilihin, I did notice one problem: where you have "name" in your "<input>" tags it should be "id" instead.
    I will not flame the newbies,
    I will not flame the newbies,
    I will flame the newbies...
    Table free is the way to be!

  5. #5
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BluDragon
    Nope. That's NOT what tables were meant for!
    why?



    Nadia

  6. #6
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BluDragon
    Nope. That's NOT what tables were meant for!
    thats a BIG YEAH! You go boy!

    Quote Originally Posted by BluDragon
    Looking at your code, tsilihin, I did notice one problem: where you have "name" in your "<input>" tags it should be "id" instead.
    Sorry to disagree but you need BOTH, the name attribute is so the server-side app can get the data, the ids are for the CSS and javascript. The ONLY way to do them right is have BOTH!

  7. #7
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    581
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dc dalton
    Sorry to disagree but you need BOTH, the name attribute is so the server-side app can get the data, the ids are for the CSS and javascript. The ONLY way to do them right is have BOTH!
    Thanks for the correcting my typo, bud!
    I will not flame the newbies,
    I will not flame the newbies,
    I will flame the newbies...
    Table free is the way to be!


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
  •