Forum Moderators: not2easy
I have a two column layout with a header and footer. Nav will be contained in the header; content in the left column and a fixed height set of images in the right column.
As the images are 310px high in total I want the left column to be a minimum of 310 px high and then add scrollbars to this div only if the content is longer. Width wise I want the left column to be the one that does any stretching.
As I wanted a contrasting border to wrap the two columns I have used one div to contain the two colums with a different colour background and inserted margin settings in the two columns.
CSS as it stands at the moment:
body {
background-color : #FFFFFF;
margin: 0px;
height: 100%
}
#Header {
margin-top: 0px;
margin-left: 30px;
height: 110px;
#000088;
}
#centrebox {/*this is to contain the columns*/
width: 75%;
height: 336px; /*the height of the picture plus the top and bottom margins in the right column*/
margin: 0px 0px 0px 120px;
padding: 0px;
background: #000088;
}
#leftcolumn { /*this is for main text content to the left of centrebox*/
float: left;
margin: 8px 8px 8px 4px;
height: 265px;
padding: 20px;
background: #FFFFFF;
color: #000088;
font-family : Tahoma, Arial, sans-serif;
}
#rightcolumn { /*this is the right hand column for pictures*/
float: right;
height: 310px;
margin: 8px 4px 8px 0px;
padding: 0px;
background: #FFFFFF;
clear: left;
}
.prop {
float:right;
width:1px;
}
.min265px {
height:265px;
}
--------------------
HTML is currently:
<div id="Header">header info</div>
<div id="centrebox">
<div id="leftcolumn">
<div class="prop min265px"></div>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
</div>
<div id="rightcolumn"><img name="image1" src="" width="110" height="320" alt=""></div>
</div>
---------------------------
.prop and .min265px were a fix I found so that IE keeps the left column at a minimum height as it seems to disregard the height stated in the div. Strangely (though I'm sure this may have something to do with things) I had to set it to 265px to avoid it overflowing centrebox.
At the moment it works fine as planned unless the text in the left column becomes too long when it expands the leftcolumn div and the centrebox div. What I would like is for it to put in a scrollbar on the leftcolumn div. If I use overflow it reduces the height of the leftcolumn div to nothing and adds a horizontal scrollbar!
What am I doing wrong / missing other than not being particularly competent with CSS?!
TIA
Beau
I want the left column to be a minimum of 310 px high and then add scrollbars to this div only if the content is longer
Setting the height to 310px, and adding
overflow:scroll
#leftcolumn { /*this is for main text content to the left of centrebox*/
float: left;
overflow: scroll;
margin: 8px 8px 8px 4px;
height: 265px;
padding: 20px;
background: #FFFFFF;
color: #000088;
font-family : Tahoma, Arial, sans-serif;
}
This is in IE6 - right now I don't have access to any other browsers. Is it one of the many MSIE quirks that need a fix perhaps?
TIA
Beau
This might be what you're looking for (if I've understood correctly).
The code is here:
<style type="text/css">
body, html {
background-color : #000088;
height: 100%;
margin:0 10px;
}#Header {
margin:0 auto;
height: 110px;
color:white;
}
#centrebox {/*this is to contain the columns*/
margin: 0 auto;
height:310px;
padding: 0px;
position:relative;
}
#leftcolumn { /*this is for main text content to the left of centrebox*/
height:100%;
background: yellow;
color: #000088;
font-family : Tahoma, Arial, sans-serif;
overflow:auto;
padding:10px;
}
#rightcolumn { /*this is the right hand column for pictures*/
float: right;
width:200px;
height: 310px;
padding: 0px;
}
img {display:block; margin:auto; padding:2px;}
#clearer {clear:both; height:1px; overflow:hidden;}
</style>
</head>
<body>
<div id="centrebox">
<div id="Header">THIS IS A HEADER</div>
<div id="rightcolumn">
<img src="wine.jpg" alt="" height="100" width="100" />
<img src="whisky.jpg" alt="" height="100" width="100" />
<img src="beer.jpg" alt="" height="100" width="100" />
<div id="clearer"></div>
</div>
<div id="leftcolumn"> <strong>Liverpool defy odds to secure progress </strong><br />
<br />
<strong>Kevin McCarra at Anfield <br />
Thursday December 9, 2004 <br />
<a href="http://www.guardian.co.uk">The Guardian </a></strong><br />
<br />
The impossible was merely delayed. An opener from Rivaldo left Liverpool requiring to win by two goals to reach the next phase of the Champions League. As the end approached with the score tied at 1-1, all their labour was at last transformed into inspiration.
<p>Neil Mellor put them into a 2-1 lead in the 80th minute. He had only just come on but was in position to slam the ball home after Antonis Nikopolidis palmed an Antonio Nunez header to him. It was almost inevitable that the overwhelming Steven Gerrard, with three minutes remaining, should drill the decisive goal. With that lash of his right boot, this was once more an arena of marvels. </p>
<p>Hours before kick-off there were packs of Olympiakos fans taking photographs near the Shankly Gates. They had come to pay their respects and for much of the world this is still a football shrine, but the professionals usually treat it as just another halt on the endless circuit of their careers. </p>
<p>The place might not even have enough of an aura to prevent Gerrard from leaving, but for the time being it is the captain who is the spirit of the place. When he claims that he want to see success at the club, the midfielder is not implying that he intends to be a surly onlooker in the months ahead. </p>
</div>
</div>
I hope this helps.
[edited by: SuzyUK at 12:02 pm (utc) on Dec. 9, 2004]
[edit reason] removed site specifics [/edit]
Beau
