SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Forms being pushed down level with left sidebar

    I am recoding a website template and have stumbled across a problem. The site is composed of a header, 3 column content of left sidebar, content and right sidebar finished off with a footer.

    The problem I am having is when a form is in the content section it gets pushed down to level with the bottom of the left sidebar. This leaves a big gap at the bottom of the form. This only happens with forms in the content not text or tables.

    All forms have been coded using fieldsets with <ol> structuring the labels and inputs. I have CSS for fieldset, legend, ol, li and submit buttons.

    This puzzle has perplexed me and I need expert help. If you have any ideas on how to solve my dilemma or need further explanation please post a reply.

    Here is the link to a sample site:

    http://www.lcarsptc.com/pages/advertise3.php

    If you check the other pages (Form and TextForm) you will see what I mean.

    This is the link to the css sheets:

    http://lcarsptc.com/pages/css/

    Any advice would be greatly appreciated.

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


    It might be easier if you read this answer that I prepared earlier to explain what's is happening here.

    http://www.pmob.co.uk/temp/flclear1.htm

    If you still can't work it out after reading that then post back and I will apply the fix to your page

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    OK - I'll give you a hint

    Basically you have to nest a container inside #contentContainer to hold all the middle content.

    This inner container needs to be floated and have a 100&#37; width.

    Code:
    #inner{float:left;width:100%}
    This will contain all floats in that middle section so that when you clear elements (such as your endform) then the "clear" only applies inside that middle float. Otherwise "clear" applies to any floats above it in the html including floated columns etc.

  4. #4
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Thanks for the help. All seems ok now except the contenContainer doesn't seem to be closed. You can see the thin red line at the top of the page. This is supposed to be a red border around the contentContainer.

    I have a 'clearfloat' at the start of the footer but all this seems to do is close off the footer, without it the footer border goes all the way up. With it the footer closes off but I have a little gap between the content and the footer.

    Here is the link again:

    http://www.lcarsptc.com/pages/advertise3.php

    and the css:

    http://lcarsptc.com/pages/css/

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

    Your clearfloat is in the wrong place. It must be before the closing tag of the container.

    i.e here:
    Code:
      <div class="clearfloat"></div>
    </div>
    <!-- /contentContainer -->
    <!-- Start Footer Content -->
    <div id="footerContainer">

  6. #6
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,

    All fixed.

    Cheers


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
  •