Making one DIV fit inside another DIV

[harper74]

I have a (left) column in a "liquid" template page that extends below what should be the bottom of the page. I'm not sure how to make it fit.

http://flahotproperties.com

Suggestions? Solutions?

[VIPStephan]

Yeah, this is happening because you positioned your left column absolutely. This is taking it out of the natural flow of elements and it has no influence whatsoever on other elements on that level in the DOM tree. Use floats to get your columns side by side and clear that float (as you’ve done already in the footer).

[harper74]

In that Section DW8 gives me choices of Absolute, Fixed, relative and Static. All but Absolute result in the page being scrambled, so I guess I'm not getting it yet. I didn't "do" the footer, this is a reworked template. I'm extremely green at this.

[Majoracle]

Just replace these 2 styles:

#leftColumn {
	width: 169px;
	position: absolute;
	left: 28px;
	top: 212px;
	height: 921px;
		}
#rightColumn {
		width: 176px;
		position: absolute;
		right: 27px;
		}

With:

#leftColumn {
	width: 169px;
	float:left;
	height: 921px;
		}
#rightColumn {
		width: 176px;
		float: right;
		}

That'll fix the right and left columns (though the right doesn't appear broken). A good thing to remember is that absolute positioning is almost never recommend for the very reason VIPStephan said.

[harper74]

Now I see it. No position at all. That works great.

Thanks!

My next question is how do I stop my #innerwrapper (center content white area) from shrinking shorter than the left and right columns on a wide screen display?

[Majoracle]

Simple. Use the clearfix technique.

Add this too your CSS:

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Then add the class to your innerWrapper div:

<div id="innerWrapper" class="clearfix">

This makes it clear the right and left floating columns. If you're curious about how it works, look over this: http://www.positioniseverything.net/easyclearing.html

[harper74]

That's perfect! Thank you, thank you!

It's interesting that it doesn't appear correctly in DW8 design view, but it works just fine in the view browser.

[harper74]

Not quite perfect --- It's a mess in IE-7.

It's ok in IE6, Netscape, even Opera, Safari and Camino.

[Majoracle]

Try adding class="clearfix" to the "wrapper" div too. Not 100% on if it'll fix it, but it seems like the most probable cause. IE in general is a huge pain in the butt.

[jerry62704]

I've seen the 'content: ".";', but I'm not sure what it means. Do you have the short version on it?

[harper74]

Class ="clearfix" did the trick! Thanks!