Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Problems with clear:both

  1. cregy
    Member

    Hi All

    Just trying to work on my theme a little bit and am running into problems with clear:both etc. I am trying to float title and meta data left and the content right. But the meta-date won't float and I think it probably has something with float.

    Any thoughts please?

    Thanks

    Rich

    The blog I need help with is littlebigfootretreatcentre.wordpress.com.

  2. hallluke
    Member

    Can you post a link to your blog which is displaying the problem and perhaps describe how you think it should look.

  3. cregy
    Member

    Oops. Sorry I thought by putting which blog it was it would give a link!

    Here is the blog:
    http://littlebigfoot.org.uk/

    Thanks

    Rich

  4. cregy
    Member

    Oops. Sorry I thought by putting which blog it was it would give a link!

    Here is the blog:
    http://littlebigfoot.org.uk/

    Thanks

    Rich

  5. thesacredpath
    Staff

    Are you talking about floating the post title and the meta data under it left? and the date right?

    Need a little more information.

  6. cregy
    Member

    Hi

    Thanks for the reply.

    Yes I am talking about floating the post title and meta data under the left. In the content column I want to float the meta data, title, date etc in the left column of the content column. The date is not playing ball and if I set the post to list more than 1 then titles etc won't line up.

    Thanks

    Rich

  7. thesacredpath
    Staff

    The blog title and tagline are in #header, and it has 105px of left padding. You need to reduce that as required to get them over to where you want them.

    Since I don't know where you want the date in relation to the post title and other meta data, I've just arbitrarily placed it below everything using position: relative; and left and top declarations.

    .entry-date {
left: -145px;
position: relative;
top: 150px;
}

    By using position: relative, it will always position the date relative to where it was originally so it will be positioned consistently from post to post.

    If you want the date under the post title, then you will need to use position relative and top declarations for the other elements to move them down.

  8. hallluke
    Member

    The one thing to be aware of is multi-line titles. The date will be moved in relation to the top of the specified containing element regardless of whether or not the title takes up one line or three, which could position it on top of the other data which would be moved. Try clearing floats for it instead:

    .entry-date {clear:left;}

  9. cregy
    Member

    Brilliant guys. That has worked fine. Thanks for all the help. I used the clear:left solution by the way.

    Rich

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags