Nick Vanheer
New member
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?
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?