...

View Full Version : Problems making the content area have a dynamic height



xKratosx
08-02-2007, 03:21 PM
Hi guys,

I'm currently trying to turn this into XHTML/CSS:

http://img120.imageshack.us/img120/3231/designnl1.png

The problem is that it needs to have a dynamic height, so I've no idea how to approach the problem.

The first step I'd say would be to create an image along the entire top that's about 5px high for the top of the box, and then a 1px high image for a repeating background.

The problem I've got now is with the bottom area, and how to get text over it without having to create an entirely separate div and put the content between the two (which would be pretty awful).

Thanks in advance for any advice, I'm really stuck on this!

BWiz
08-02-2007, 03:38 PM
Dynamic height? You mean that the height will automatically resize in order to fit the content. That's how height works, unless changed through CSS.

I'm assuming that the left section will always be larger than the right; so the right only has to be floated (float: right;) and the left column will keep the dynamic height.

I suppose when you mean "text over it", you mean:

Jargon jargon jargon jargon contact contact
Jargon jargon jargon jargon contact contact
Jargon jargon jargon jargon contact contact
Jargon jargon jargon jargon
Jargon jargon jargon jargon jargon jargon jargon jargon
Jargon jargon jargon jargon jargon jargon jargon jargon

It'll do that automaticaly as well.

xKratosx
08-02-2007, 03:46 PM
Hi, pretty much yeah, but I don't think I explained myself too well originally:

My main problem though is the difference between the content and the bottom image. I mean, the gradient in the content area means I can't put it into actual middle div, yet if it's on the bottom one there'll be a large gap.

Jutlander
08-02-2007, 03:49 PM
I knocked this up for you, is it something like that you're looking for?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 800px;
margin: auto;
border: 1px solid #000;
margin-top: 20px;
}
#content {
padding: 10px;
border-right: 1px solid #000;
margin-right: 180px;
}
#right-col {
width: 150px;
padding: 10px;
float: right;
}
.clear {
clear: both;
}
</style>
</head>

<body>

<div id="wrapper">

<div id="right-col">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi.</p>
</div>

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

</div>

</body>
</html>

xKratosx
08-02-2007, 04:02 PM
Yeah that looks great thanks, and very similar to what I have at the moment. Again through, my main problem is getting it so that the gradient in the footer doesn't conflict with the actual content area in the middle; seems impossible :(



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum