Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

CSS Height Issues

monke

monke

macrumors 65816
Original poster
May 30, 2005
1,437
3
Its been a while... :eek:

I've got this website I'm working on, and I'm currently stuck trying to figure it out. I've tried *almost* everything.

The template is centered in the browser, and look like so:
|---------Header---------|
|---------Content---------|
|---------Footer---------|

The header and footer are just images and have absolutely nothing in them.

The problem: The content varies from page to page, some pages require more room than others. The height is only a pixel value right now that fits the biggest page, but has too much 'white space' on the lesser content pages.

Is there any way to make the content height differ from page to page and fit the actual content?
Instead of pixel values I've tried 100%, inherit, and auto, but none have worked.
:confused:
 
monke

monke

macrumors 65816
Original poster
May 30, 2005
1,437
3
I've tried leaving it blank, but no success.

Here's the code:
HTML:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Page</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="header">
</div>
<div id="content">
	<ul id="nav">
    	<li id="1"><a href="#"></a></li>
        <li id="2"><a href="#"></a></li>
        <li id="3"><a href="#"></a></li>
        <li id="4"><a href="#"></a></li>
        <li id="5"><a href="#"></a></li>
    </ul>
  <div id="left">
  </div>
  <div id="right">
  </div>
</div>
<div id="footer">
</div>

</body>
</html>

Code: 
@charset "UTF-8";
/* ©  */

* {
	margin: 0px;
	padding: 0px;
}

body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	color: #000000;
	background: #736357;
}

#content {
	margin-top: -1px;
	margin-bottom: -1px;
	margin-left: auto;
	margin-right: auto;
	background: url(images/bookbody.jpg) repeat-y;
	width: 848px;
	height: 400px;
}

#heaeder {
	margin-left: auto;
	margin-right: auto;
	background: url(images/booktop.jpg) no-repeat;
	height: 18px;
	width: 848px;
}

#footer {
	margin-left: auto;
	margin-right: auto;
	background: url(images/bookbottom.jpg) no-repeat;
	height: 14px;
	width: 848px;
}

#nav {
	margin-top: 40px;
	position: absolute;
	margin-left: 814px;
	background: url(images/tabs2.jpg) no-repeat;
	width: 89px;
	height: 192px;
}

	#nav li {
		position: absolute;
		display: block;
		list-style-type: none;
		width: 100%;
		height: 100%;
	}
	
	#nav a {
		display: block;
		width: 100%;
		height: 100%;
	}
	
		#nav #1 {
			margin-top: 15px;
			margin-left: 7px;
			background: url(img no-repeat;
			width: 42px;
			height: 22px;
		}
		
			#nav #1 a:hover {
				background: url(img) no-repeat;
			}
			
			#nav #1 a:active {
				background: url(img) no-repeat;
			}
			 
#leftpage {
	position: absolute;
	margin-left: 45px;
	width: 375px;
}

#rightpage {
	float: right;
	position: static;
	margin-right: 45px;
	width: 375px;
}

I slimmed it down so you don't have to waste your time reading extra code.

The only two solutions I can think of that might work:
1) Put a wrapper around the header, content, and footer
2) The navigation is positioned absolutely, might pose a problem

Any solutions? :(
 
K

Kaliemon

macrumors member
Apr 30, 2006
93
1
Here's a suggestion that is working on other sites I have made.

Change

#content {
margin-top: -1px;
margin-bottom: -1px;
margin-left: auto;
margin-right: auto;
background: url(images/bookbody.jpg) repeat-y;
width: 848px;
height: 400px;
}
Click to expand...

to

#content {
position: relative;
margin-left: auto;
margin-right: auto;
background: url(images/bookbody.jpg) repeat-y;
width: 848px;
}

If it doesn't work I will go through all the code again.

Also, don't know if this is just in posting but

#heaeder {
Click to expand...

should be

#header { you have an extra 'e' in there, it doesn't affect the content though.
 
monke

monke

macrumors 65816
Original poster
May 30, 2005
1,437
3
Thanks, but I still can't get it to work.

I've tinkered with it a bit, but all I can get is one half to fit. What will happen is that on one page the content on the left is more then the right, so it works, but if the content on the right is more then it overflows the div and past where it should should. The div won't expand to occupy both.

ex:
Working (if left has more content then right):
|--Left--||--Right--|
________________

Not Working (if right has more content):
|--Left--||--Right--|
________________
|--Right--|

I can get them both to work and the background to fit the content, but then the divs don't line up side-by-side.
:mad:
 
ChicoWeb

ChicoWeb

macrumors 65816
Aug 16, 2004
1,120
0
California
I think you need to post your full code. Hard to debug with half the info. From what I see you have a height on the content, but 'no content, so how are we to know what you are asking :)
 
monke

monke

macrumors 65816
Original poster
May 30, 2005
1,437
3
Here's all the code:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="headspace">
</div>

<div id="wrapper">

<div id="top">
</div>
<div id="content">
	<ul id="tabs">
    	<li id="howto"><a href="#l"></a></li>
        <li id="definitions"><a href="#"></a></li>
        <li id="help"><a href="#"></a></li>
        <li id="about"><a href="#"></a></li>
        <li id="contact"><a href="#"></a></li>
    </ul>
    <div id="leftpage">
    	<div id="pagespace">
            <p class="title">
            Welcome
            </p>
        </div>
  </div>
  <div id="rightpage"> 
        <div id="pagespace">
         <p class="title">
            Test
            </p>
        </div>
  </div>
</div><!--#bookwrapper-->
<div id="bottom">
</div>

</div>

</body>
</html>

Code: 
@charset "UTF-8";
/* CSS Document */

* {
	margin: 0px;
	padding: 0px;
}

body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	color: #000000;
	background: #736357;
}

a {
	color: #55422d;
	font-weight: bold;
}

.title {
	font-size: 18px;
	font-weight: bold;
	color: #745b3d;
}

#headspace {
	height: 25px;
	width: 100%;
}

#wrapper {
	margin-left: auto;
	margin-right: auto;
	width: 848px;
}

#top {
	background: url(images/top.jpg) no-repeat;
	height: 18px;
	width: 848px;
}

#content {
	background: url(images/body.jpg) repeat-y;
	width: 848px;
	min-height: 300px;
}

#bottom {
	background: url(images/bottom.jpg) no-repeat;
	height: 14px;
	width: 848px;
}

#tabs {
	margin-top: 40px;
	position: absolute;
	margin-left: 814px;
	background: url(images/tabs2.jpg) no-repeat;
	width: 89px;
	height: 192px;
}

	#tabs li {
		position: absolute;
		display: block;
		list-style-type: none;
		width: 100%;
		height: 100%;
	}
	
	#tabs a {
		display: block;
		width: 100%;
		height: 100%;
	}
	
		#tabs #howto {
			margin-top: 15px;
			margin-left: 7px;
			background: url(images/tabs/howto/howto.jpg) no-repeat;
			width: 42px;
			height: 22px;
		}
		
			#tabs #howto a:hover {
				background: url(images/tabs/howto/hover.jpg) no-repeat;
			}
			
			#tabs #howto a:active {
				background: url(images/tabs/howto/click.jpg) no-repeat;
			}
			
#leftpage {
	margin-left: 45px;
	width: 375px;
}

#pagespace {
	margin: 0px 15px 0px 15px;
	padding-bottom: 10px;
}

#rightpage {
	margin-left: 425px;
	width: 375px;
}
 
monke

monke

macrumors 65816
Original poster
May 30, 2005
1,437
3
The problem is is that when I float one page, the background will stick with the non-floated page, thus why if the floated side had more content it won't work.

I can't find solutions anywhere. :mad:


The whole reason I NEED it to fit the content is that different browsers will interpret it different. I had a fixed size per page system working earlier until I tried it with Firefox and IE.
 
D

digitalField

macrumors regular
May 21, 2004
123
8
portland
monke said:
The problem is is that when I float one page, the background will stick with the non-floated page, thus why if the floated side had more content it won't work.

I can't find solutions anywhere. :mad:


The whole reason I NEED it to fit the content is that different browsers will interpret it different. I had a fixed size per page system working earlier until I tried it with Firefox and IE.
Click to expand...

Two things.
One.
Can you post your the URL to where you are hosting these files? Right now your CSS document references background images at this location 'images/tabs/howto/howto.jpg' which is nice, but makes it hard to test on my box here... do you have the url information that precedes it?

Two.
So im having a little trouble deciphering what the problem is.. or moreso what the end goal is... so im gonna take a couple stabs and let me know if im getting this right..

you have a main div that holds your content. in that content you have your navigation, a rightpage and a left page...

i assume the navigation will remain fairly consistent, but the left/right pages content will vary in height. ( FYI i noticed that you have the id 'pagespace' defined in both leftpage and rightpage, if you are going to use pagespace twice turn it inot a class )
so with both your page heights variable.. it sounds like you want a background image to also stretch with them? are they separate backgrounds for each the left and right page? or is it the same one?
maybe you can provide a screenCap of what the desired effect is suppose to be.

M!

ps. if you are floating div's, dont forget that you will need to clear them as well.
 
monke

monke

macrumors 65816
Original poster
May 30, 2005
1,437
3
I actually solved my problem last night, but forgot to post it.

All I did was create a new div to place the two floated divs (leftpage and rightpage) and added the "overflow: hidden" tag and it worked.

digitalField said:
if you are floating div's, dont forget that you will need to clear them as well.
Click to expand...

Clear them? :eek:
 
D

digitalField

macrumors regular
May 21, 2004
123
8
portland
monke said:
I actually solved my problem last night, but forgot to post it.

All I did was create a new div to place the two floated divs (leftpage and rightpage) and added the "overflow: hidden" tag and it worked.



Clear them? :eek:
Click to expand...

Yea. Clearing a float is just a method for making sure that content *after* the floated element goes back into the flow of the html document.

Here is a great tutorials on it, as they do a much better job explaining it then i do.

http://css.maxdesign.com.au/floatutorial/
http://css.maxdesign.com.au/floatutorial/clear.htm

M!
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom