Container div height not going to full content size

HTML & CSS
1

Hey guys,

Im having an issue where the container div is only going to the size of the screen and not the full size of the content… ive tried everything I can think of…
im sure it cant be a difficult one to fix im just struggling… does anyone have an idea?

http://www.dev.webtastix.net/rachaelmckenna/?page=books

relavent css
#container {
	width:100%;
	max-width:1800px;
	margin:0 auto;
	position:relative;
	padding:20px;
	height:100%;
	min-height:100%;
	border:1px dashed black;
}

(have left the border there to show where the div is currently ending)
statically setting the height works fine, but very limiting to a dynamic website :slight_smile:

2

Make sure to validate your HTML first, as you have some serious errors there. But also beware of absolute positioning, as it’s a mongrel to work with.

3

Have you run your page through the validator?

XHTML has an excellent validator. I REALLY think that would help.

4

the only xhtml errors left now are the alt’s missing from img’s which wouldn’t cause the problem sadly…
and the css validator fully validates

5

ive converted the absolute’s to relative but the container still is only the full size of the screen

6

There seem to be quite a few factors contributing to the layout problems. What do you actually want the layout to do, as it’s better to backtrack at bit at this stage and rethink the layout. You’ve got positioning where you don’t need it, unnecessary floats etc. that are just getting in the way.

7

the only reason I care that the container height is wrong is that the footer sits at the bottom of that, which means with it being wrong it means the footer is appearing crazily in the middle of the page on long pages :slight_smile:

8

Whatever the reason, I stand by my comment above. There’s not one simple factor breaking the layout, which is why I suggest looking at the needs of the page layout and looking at a better option for getting what you want.

9

ditto @ralph_m

This page begs for a do-over from scratch.

10

Ok thanks for that…

ive gone through it all giving it a look over, and its now pretty simple
-container
–logo
–leftmenu
–fcontent
–bottommenu(footer)

and theres very few (5 over the whole site) div’s that have position set on them now…

im not sure what else there is that could be breaking it as its a pretty basic layout now…

getting rid of position on the fcontent div makes the height work properly, but of course with no position it sits at the far left which doesn’t work :slight_smile:

11

hmm is certainly a lot closer since cleaning it all up, but still not quite getting all the way down like id expect

12

On fcontent, rather than using left and top, use margin-left and margin-top.

E.g.

.fcontent {
  margin-left: 160px;
  margin-top: 210px;
}

Using position: relative and then top and left moves the element but other elements don’t recognize the new position.

13

aah thank you for that :slight_smile: - I knew it had to be something really simple…
ill keep that in mind for the future for other ones…

much much appreciated :slight_smile: