Hi all,
I’m in the process of building a layout for one of my sites that is using MODx and I’m having some trouble with my CSS. I have a series of five divs floated left that constitute my home page "subcontent" (items such as latest news, etc.). This subcontent series of divs is nested within a div "wrapper" that is nested in a main content div.
If I stage fake content in the subcontent wrapper the main body expands accordingly, pushing the footer down with it. If I stage fake content in any of the subcontent divs, the body does not expand. The subcontent divs do expand, but no other div reacts. It’s almost like the subcontent wrapper doesn’t recognize that the subcontent divs are in it.
The HTML code is:
<div class="teasercontainer">
<div class="homecolumn">
<h2>Latest News</h2>
This is a placeholder for the left column.
</div><!--Close Left Column-->
<div class="homecolumnspacer">
Spacer spacer.
</div><!--Close Home Column Spacer-->
<div class="homecolumn">
This is a placeholder for the center column.
</div><!--Close Center Column-->
<div class="homecolumnspacer">
Spacer spacer.
</div><!--Close Home Column Spacer-->
<div class="homecolumn">
This is a placeholder for the right column.
</div><!--Close Right Column-->
</div><!--Close Teaser Container-->
The CSS is:
.homecolumn {
position: relative;
float: left;
margin: 0;
padding: 10px;
border: 1px solid #BBB;
background-color: #F2F2F2;
width: 268px;
}
.homecolumnspacer {
position: relative;
float: left;
margin: 0;
padding: 0;
border: none;
width: 25px;
}
I’m sure the problem has something to do with a parameter I’ve either left out or have coded wrong.
Can anyone help??
Thanks,
Chris
