Help with making a parent div expand with child

  • CXLink
  • Expert
  • Expert
  • User avatar
  • Joined: Nov 22, 2004
  • Posts: 684
  • Loc: ATL-GA
  • Status: Offline

Post August 5th, 2009, 7:54 am

So I have the post headers here.

http://www.couponmom.com/blog/

But they dont scale properly when the title is multiple lines like here.

http://www.couponmom.com/blog/2009/01/396/


I would like the bottom to get pushed down if the header is multiple lines.

Thanks
Push-Here ::: Web Design + Identity
WordPress - like mayonnaise - goes great with anything
We adore chaos because we love to produce order. -M. C. Escher
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post August 5th, 2009, 7:54 am

  • natas
  • PHP Ninja
  • Proficient
  • No Avatar
  • Joined: Mar 28, 2009
  • Posts: 305
  • Loc: AFK
  • Status: Offline

Post August 5th, 2009, 6:22 pm

Just took a quick glance at the source code of the site. You have a "titlet" div which is ok... and a "titleb" div which also is ok. The problem is that no matter what content you have in there, the background image will always be the same.

What you need to probably do is create a "titlemiddle" div (or something similar) div. and give it a background image of something similar and have it repeat. Then put your content there. Just make sure it is in between your "titlet" and "titleb" div.

I am pretty sure this will work.
Custom Web Design
  • CXLink
  • Expert
  • Expert
  • User avatar
  • Joined: Nov 22, 2004
  • Posts: 684
  • Loc: ATL-GA
  • Status: Offline

Post August 6th, 2009, 5:03 am

thanks for the replay natas. I added a titlem, but that is still not doing it. any other ideas?
Push-Here ::: Web Design + Identity
WordPress - like mayonnaise - goes great with anything
We adore chaos because we love to produce order. -M. C. Escher
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post August 10th, 2009, 7:48 pm

you could use the sliding door effect. Extend your "phdb.jpg" height so that it's several lines long. Than set the css of the div that hold this background like so:
Code: [ Select ]
.titleb {
background: url("phdb.jpg") bottom center no-repeat;
}
  1. .titleb {
  2. background: url("phdb.jpg") bottom center no-repeat;
  3. }
Use your words like arrows to shoot toward your goal.

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 50 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.