PDA

View Full Version : main content div tags


richcodesign
05-13-2009, 10:17 AM
Hi again,

Dreamweaver is not like riding a bike - once you have not used it in a while you seem to FORGET!!!

Im having trouble with a maincontent div tag not adjusting its size (height) when the div tags inside it do.

This is needed to keep a border around the main content.

The divs inside the maincontent seem to be floating on-top not sitting inside.

Please see below my code:

<body class="oneColLiqCtrHdr">

<div id="container">
<div id="header"><img src="../images/logo_details.jpg" width="704" height="140" />
<!-- end #header --></div>

<!-- TemplateBeginEditable name="menu" -->
<div id="menubar"></div>
<!-- TemplateEndEditable -->

<div id="mainContent">
<div id="rightcontent"><img src="../images/side_buttons.jpg" width="157" height="138" /></div>
<div id="leftcontent">This area is for text<br />
</div>
<!-- end #mainContent --></div>
<div id="footer"><img src="../images/footer.jpg" width="704" height="28" />
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

Corrosive
05-13-2009, 10:22 AM
Hi again,

Dreamweaver is not like riding a bike - once you have not used it in a while you seem to FORGET!!!

Im having trouble with a maincontent div tag not adjusting its size (height) when the div tags inside it do.

This is needed to keep a border around the main content.

The divs inside the maincontent seem to be floating on-top not sitting inside.

Please see below my code:

<body class="oneColLiqCtrHdr">

<div id="container">
<div id="header"><img src="../images/logo_details.jpg" width="704" height="140" />
<!-- end #header --></div>

<!-- TemplateBeginEditable name="menu" -->
<div id="menubar"></div>
<!-- TemplateEndEditable -->

<div id="mainContent">
<div id="rightcontent"><img src="../images/side_buttons.jpg" width="157" height="138" /></div>
<div id="leftcontent">This area is for text<br />
</div>
<!-- end #mainContent --></div>
<div id="footer"><img src="../images/footer.jpg" width="704" height="28" />
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

I imagine that this is due to the left and right columns being floated. It takes them out of the natural 'flow' of the site. Try adding overflow: auto; and height: 1%; to your main content CSS. Also read this as a guide to how and why...

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

Cheers

richcodesign
05-13-2009, 11:17 AM
Thanks,
That link helped loads.
Cheers:grin: