PDA

View Full Version : Nested Div Tags - Height Problem



sushi4664
Jul 11th, 2010, 07:10 AM
I am working on a WordPress theme. You can see it at: picturesfromthefuture.com

However, if you visit it, you will see that the posts overflow the template. I was wondering why the div tag (<div id="page">) does not expand it's height to fit it's nested div tags.

SB65
Jul 11th, 2010, 09:52 AM
It's because of the top:310px applied to .postHolder, which is offsetting the divs beyond #page. It's far preferable to use margins and padding to move elements about, as using top and right can cause the sorts of issues you're seeing here.


#header {
background:url("http://picturesfromthefuture.com/wp-content/themes/barecity/images/top.png") no-repeat scroll 0 0 transparent;
/*height:138px;*/
padding-top:130px;
margin:0 auto;
width:900px;
}

.sideBar {
background-image:url("http://picturesfromthefuture.com/wp-content/themes/barecity/images/side_top.png");
background-repeat:no-repeat;
float:right;
position:relative;
right:60px;
/*top:130px;*/
width:155px;
z-index:5;
}

.navBar {
left:60px;
position:relative;
/*top:130px;*/
width:650px;
z-index:0;
}

#logo {
left:50px;
position:relative;
/*top:145px;*/
margin-top:15px;
width:524px;
}

.postHolder {
background-image:url("images/dotbk.png");
background-repeat:repeat;
left:50px;
padding-left:18px;
padding-top:18px;
position:relative;
/*top:310px;*/
width:600px;
}


This sorts out the layout but you will need to amend your background image top.png to extend further. I haven't amended your left and right settings for now...

sushi4664
Jul 11th, 2010, 05:17 PM
Thanks! That fixes it. So when do you use top v margin/padding? Is there a general rule for this?