Big white space needs to be closed up

• 

  carlajuniper · Member · Jun 19, 2013 at 10:41 pm

  • Copy link
  • Add topic to favorites

  I’ve moved the homepagecontent so it’s aligned with the homepagethumb on the right, which I really like the look of, but now I have a huge amount of dead space underneath each post. How do I get rid of this?

  This is my current CSS:

  .homepagecontent {
  position: relative;
  left: 434px;
  width: 280px;
  height: 220px;
  top: -250px;
  padding-left: 3px;
  }

  .homepagethumb {
  position: relative;
  left: -10px;
  }

  The blog I need help with is: (visible only to logged in users)

• 

  justpi · Member · Jun 20, 2013 at 1:16 am

  • Copy link

  That’s a strange way of repositioning the homepage content. Since you have removed the right sidebar, you can simply widen the post column and make the elements inside it float left and right. So, instead of the rules you’ve added, try this:

  #sidebar_left {
      margin: 0;
  }
  .homepagemid {
      float: right;
      width: 760px;
  }
  .homepagethumb {
      float: left;
      margin-bottom: 32px;
  }
  .homepagecontent {
      background: none repeat scroll 0 0 #FFFFFF;
      border: 2px dotted #487B72;
      float: right;
      height: 220px;
      margin: 0;
      padding-left: 3px;
      width: 280px;
  }

• 

  carlajuniper · Member · Jun 20, 2013 at 8:14 am

  • Copy link

  Perfect, thank you!

• 

  justpi · Member · Jun 20, 2013 at 1:25 pm

  • Copy link

  You’re welcome.

  Couple of notes:
  a) Obviously you can change the value of the .homepagethumb bottom margin, to adjust the space below each post.
  b) The border you’ve added to .homepagecontent makes it look longer than the images; if I were you I’d make the height 217px instead of 220.
  c) You had added two sets of rules for .homepagecontent. I incorporated all the necessary rules in my above suggestion, so you should delete this redundant piece of code:

  .homepagecontent {
      background: none repeat scroll 0 0 #FFFFFF;
      border: 2px dotted #487B72;
      margin: 8px;
  }