WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] twentyten - page template spacing css for contact form (4 posts)

  1. Olly - OWMC
    Member
    Posted 3 years ago #

    hello.

    i have made a page template for my contact page which has a left column (for basic contact details - coded into the php file) and a right column which is where the page content is loaded (the contact form). I've CSSed it but I can't get the contact form to line up horizontally with the contact details. it's also not floating fully to the left. editing my main style sheet doesn't seem to make much difference.

    i have this in my stylesheet

    #contactdetails, #contactform {
        float: left;
    	width: 288px;
    	height: 400px
    	margin-right: 11px;
    }
    #contactform {
       float: right;
       width: 288px;
    }
    .clear {
       height: 0;
       font-size: 1px;
       margin: 0;
       padding: 0;
       line-height: 0;
       clear: both;
    }

    i'm using clean-contact plugin for the contact form which has it's own stylesheet, that also doesn't seem to be obeying me.

    the contact page is: http://oliverwieland.com/sultan-carpets-flooring/contact/

    any ideas?

  2. Olly - OWMC
    Member
    Posted 3 years ago #

    i meant the contact form is not fully floating to the right

  3. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    in style.css, it is caused by the right margin in:

    #content {
    	padding: 11px 0 0 0px;
    	margin: 0 300px 36px 0;
    
    }

    remedy - add this somewhere to style.css:

    .page-template-contactpage-php #content { margin-right: 200px; }

  4. Olly - OWMC
    Member
    Posted 3 years ago #

    wow thanks again alchymyth!

    cleaned up my code a bit too.

    #contactdetails {
        float: left;
    	width: 420px;
    	margin-right: 10px;
    }
    #contactform {
       float: left;
       width: 420px;
    }
    .clear {
       height: 0;
       font-size: 1px;
       margin: 0;
       padding: 0;
       line-height: 0;
       clear: both;
    }

    still playing with the layout.

Topic Closed

This topic has been closed to new replies.

About this Topic