SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS based form, 2 column layout

    using the art and Science of CSS as my guide, I created a contact form which i have used successfully in a couple of sites.

    I am now attempting to do the same, but with a 2 column fixed layout.

    Using my settings from before, i have added the form to my page.

    When viewed in IE8, it looks OK, but in FF, the form fields drop down the page.

    Can someone please give me a few pointers ?

    Regards

    (very much in early development, page can be found at samples.stonepits.com/contact.php)

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

    You have set the fieldset to clear both so it does what you asked it and clears your floated left column.

    In a fixed width two column layout you should simply float both columns (instead of using the margin-left technique) with appropriate widths and avoid this issue as clearing of elements inside a float is confined to that parent only and has no effect outside.

    This demo explains the issues in more details.

    Either float both columns or instead nest an inner element inside the content section that is floated and will contain all that right side content. (Or use overflow hidden on #content and apply haslayout.)

    The two column float is the most robust solution

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers Paul, I will take a look at this


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
  •