...

View Full Version : Making one DIV fit inside another DIV



harper74
01-24-2008, 04:11 AM
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
01-24-2008, 09:58 AM
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
01-27-2008, 02:15 AM
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
01-27-2008, 06:38 AM
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
01-27-2008, 03:18 PM
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
01-27-2008, 11:23 PM
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
01-28-2008, 01:47 AM
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
01-28-2008, 02:32 AM
Not quite perfect --- It's a mess in IE-7.

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

Majoracle
01-28-2008, 03:00 AM
Try adding class="clearfix" to the "wrapper" div too. Not 100&#37; 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
01-28-2008, 03:39 PM
I've seen the 'content: ".";', but I'm not sure what it means. Do you have the short version on it?

harper74
01-30-2008, 04:17 AM
Class ="clearfix" did the trick! Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum