• 0

Auto-size divs in two-column layout depending on height of right div?


Question

Hi, I've made a simple 2 column layout for a news site (wrapped in a content div), the left column displays an image associated with the post, the right div displays the contents. I'd like to include a big image in the left column which resizes depending on the height of the right column. This doesn't seem to work as the content div's height is set to the height of the left column (image) (left-to-right interpretation of browser) while it should have the height of the right column (contents).

My code might clarify some things:

HTML - BODY:

<div class="post">

<div class="categoryheader"><img src="images/header1.png" /></div>
<div class="postcontents"></div> /* Title, author, date and article comes here */

</div>

CSS

.post{ /* wrapper for categoryheader/postcontent*/
width: 578px;
margin-top: 10px;
background:#090; /* Temporary, makes it easier to see the whole content */
position: absolute;
}

.categoryheader{
float: left;
width: 126px;
border: 1px solid #999;
-moz-border-radius: 4px;
-khtml-border-radius:4px; 
-webkit-border-radius:4px; 
border-radius:4px;
position: relative;
}

.postcontents{
width: 450px;
float:right;
position: relative;
}

That's it, sure I could use heights in pixels but I'll link this to a custom CMS and so the heights will vary with each new post. I am at wits end, also tried it with overflow: hidden/auto and doing the image in HTML (categoryheader div without any background.), all without any results.

Anyone knows how to do this?

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0

That could potentially be very ugly. You're going to have the same width throughout but the height will vary on the image, correct? Don't.

Just set the same thumbnail size for all images and leave it at that.

Otherwise your only solution is to utilize javascript if that's something you really want to do.

Resources:

http://www.knowledgesutra.com/forums/topic/67549-image-height-according-to-table-height-stretch/

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.