Div's are hopeless compared with tables when it comes to fixing a page layout! It's a nightmare trying to get div's nested inside outer div's. I've got a main content div which has a white background, and I've set it's height so that the content on the homepage all appears in the white area. But for other pages if the content is more then it goes below and outside the white area, which suggests that the content on the homepage is not actually nested within the maincontent div; I want the content to expand the height of the maincontent div.
The html is below and the css is attached.
Can anyone advise please?
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
Yes adding position absolute nested the divs inside maincontent but resulted in the following:
1. width expanded with browser width and therefore extended outside the container wrapper div - Adding a width to the maincontent div corrected this, but shouldn't I be able to make the maincontent and header divs nest inside the width of the container wrapper without having to set their widths?
2. the footer is nolonger visible.
I don't want to leave a search engine readable url here, but you can work it out from http://www.<name of background image in stylesheet>.co.uk/index.php
It's the float for the divs inside mainContent that are taking them outside, this post refers to the same issue: http://www.daniweb.com/for
So if I remove the position absolute from the mainContent div and remove the float left and float right from the nested left and right column divs then they both appear within the mainContent div. But the positioning solution in the linked article is not working for me, the right column is now below the left column. This takes 10 times longer than using trusty tables!
I don't understand why the clear fix doesn't work, that's what I've used before eg: http://www.positionisevery
You need to set your clear class with nothing but clear:both; or just use <div style="clear:both;"></div> to clear out divs.
in doing this it appears to get the effect you're looking for:
<div class="boxBottom"></div>
</div>
<div style="clear:both;"></div> <!--ADD THIS HERE-->
</div>
<div id="footer">
I've left the homepage with the code as shown below since it seems to be working with the clearfix class, except that there is far more white space at the bottom of the mainContent div in IE6 (seems ok in IE8 and FF).
I then had a similar issue on the about page where 2 nested divs where not enclosed by their container div in IE6, and the clearfix class didn't solve it, however <div style="clear:both;"></div> did solve it, thanks renazonse!
renazonse: That's quite surprising because even though my clear class had the settings below the p tags added vertical space in IE6, whereas the div set just with clear both appears equal in vertical height to FF.
font-size:0px;
line-height:0px;
height:0px;
overflow:hidden;
margin: 0 0 0 0;
display:inline;
I've now replaced the clear class p tags with div tags. Thanks for your solution.
Business Accounts
Answer for Membership
by: LZ1Posted on 2009-10-27 at 07:47:14ID: 25672973
Try giving your mainContent div a position of absolute