Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Senior Member Hitch - CP's Avatar
    Join Date
    Jun 2009
    Location
    London
    Posts
    120
    Member #
    19164
    Hey guys,

    I'll direct you to the problem first of all, the page can be seen here: http://collossalpixel.com/cp-v2/?page_id=6.

    What I am trying to do here is move the sidebar from the left where originally positioned to the right.

    I thought it would be as simple as floating the .entry element to the left and then doing the same with the sidebar (but floating it right) - from what I understand this should have worked.

    But once done, another problem then appears. When floated, the blog post element suddenly has no specific height and so the container div, being set to height: auto; then shrinks and the footer then moves up to meet the bottom of that div.

    I can't just set a height for the container to keep the footer from moving up because I am wanting multiple posts on that page, and for the height to be auto adjusted for when a new post is made.

    In essence, I am trying to make it so that the posts and sidebar are in the same container, the posts stretching as far down as necessary and floated to the left, with the sidebar floated to the right edge of the screen.

    I have been messing with this problem for so long now that I can't see it clearly anymore.

    Any help much appreciated, am starting to lose patience with this

    Also, is this the best way to go about having the sidebar to the right of the content?
    Ali Hitch

    Portfolio & Tutorial Site
    www.alihitch.com

  2.  

  3. #2
    Member WPExplorer's Avatar
    Join Date
    Apr 2010
    Location
    USA
    Posts
    89
    Member #
    21716
    You need to clear the floated divs and there are 2 ways of doing it.

    1. Add this right before the footer div.

    <div style="clear:both;"></div>

    2. You can add the style to your styleshee.css file (i like this better)

    .clear{ clear: both; }

    and than add the class right before your footer container

    <div class="clear"></div>

  4. #3
    Senior Member Hitch - CP's Avatar
    Join Date
    Jun 2009
    Location
    London
    Posts
    120
    Member #
    19164
    Brilliant, great fix WPExplorer.

    Definitely a thumbs up for that!
    Ali Hitch

    Portfolio & Tutorial Site
    www.alihitch.com

  5. #4
    Senior Member Danny[MLWA]'s Avatar
    Join Date
    Jun 2009
    Location
    Goldsboro, North Carolina, USA
    Posts
    109
    Member #
    19147
    Liked
    5 times
    he he, when all else fails "position: absolute;" for the win =)
    Lead Web Designer
    MLW & Associates, LLP.
    W3C Standards Complaint and SEO Friendly
    Admin of Vraul
    WordPress.org Developer

  6. #5
    Senior Member Hitch - CP's Avatar
    Join Date
    Jun 2009
    Location
    London
    Posts
    120
    Member #
    19164
    I was thinking about that but I wanted to do it properly
    Ali Hitch

    Portfolio & Tutorial Site
    www.alihitch.com

  7. #6
    Senior Member Danny[MLWA]'s Avatar
    Join Date
    Jun 2009
    Location
    Goldsboro, North Carolina, USA
    Posts
    109
    Member #
    19147
    Liked
    5 times
    Quote Originally Posted by Hitch - CP
    I was thinking about that but I wanted to do it properly
    It is proper, but the content you see just won't be in the same order when CSS is done manipulating the page in the browser. Most importantly it works, and it validates... :-$
    Lead Web Designer
    MLW & Associates, LLP.
    W3C Standards Complaint and SEO Friendly
    Admin of Vraul
    WordPress.org Developer


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:51 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com