Sun, 2004-09-26 04:28
I have a container, leftcontent and rightcontent defined in a style sheet. I want these to expand to the size of the content. What I have seems to work with IE but Netscape does not handle it like I think it should. What can I do different to make it work in both browsers?
From the style sheet
#mcc
{
width:750px;
margin: auto;
text-align:left;
padding:0px;
border: 1px solid #ff0000;
}
#leftcontent
{
width: 49%;
float: left;
border: 1px solid #00ffff;
}
#rightcontent
{
width: 49%;
float: right;
border: 1px solid #00ffff;
} html clip
<div id="mcc"><h1>stuff</h1>
<div id="leftcontent">
<p class=catagory>Activities & Classes</p>
<a href="/construction.php">stuff</a>
<br><a href="/construction.php">stuff</a>
.
.
.
<br><a href="/construction.php">stuff</a>
<br><a href="/construction.php">stuff</a>
<br><br>
</div>
<div id="rightcontent">
<p class=catagory>stuff</p>
<a href="/construction.php">stuff</a>
<br><br>
.
.
.
<p class=catagory>stuff</p>
<a href="/construction.php">stuff</a>
<br><br>
</div>
</div>
Netscape puts the "mcc" box above the content boxes. The content boxes do not extend to contain all the content so the content will go past the boarder.
Sun, 2004-09-26 13:41
#1
nesting <div>
Will, do a search here on containing floats you can find the answer to your problems. IE breaks the rules on containing floats Netscape is behaving itself; also have a read of the link below to understand the problem, it leads back to the solution Tony has devised.
http://www.positioniseverything.net/easyclearing.html
Hugo.
Mon, 2004-09-27 04:41
#2
nesting <div>
Thanks, that lead me to a bunch of great information and I have some very useful bookmarks. The trick is knowing what words to search with and I was not getting the right ones.
I am making progress. I have the container actually containing the what it is suppose to. The new problem is that I have three columns and one has color. I want that column to extend from the header to the footer but it only goes about half way down. When I set that columns height to 100% the container's height increases about 3 inches even thought there is no content to fill it.
Mon, 2004-09-27 07:47
#3
nesting <div>
Ah so we come to the next set of links the first is a explanation of using height 100% and the second is the "faux column " trick for creating the illusion of full height columns using a image.
http://www.quirksmode.org/css/100percheight.html
http://www.alistapart.com/articles/fauxcolumns/
Hope these help, if your still having problems post back and we can run through it.
Hugo.
Tue, 2004-09-28 04:29
#4
nesting <div>
I obviously need some help because this is not working. I have set the height to 100% in the body and in the main container but my column is still not extending like I thought it should. I put it here http://wakidsdirectory.com/temp/index2.php so someone can point out the silly mistake I am making. I have put borders around most of the boxes so I can see what is happening. Netscape is the browser I am using and seeing this problem.
Also, why is the text at the bottom of the page outside of the body?
Tue, 2004-09-28 19:51
#5
nesting <div>
generaly you need to set the initial height on the combined
html, body {} for it to work you will see then that the div #mcc does indeed end at the viewport height but remember that 100% is relative to the html body which =the visable viewport area; the height of the float columns is dictated by the actual content and if this exceeds the screen then the div will expand. you could do with another div to contain the floats with a suitable clearing fix applied to it such as Tony's example on this forum and use the #mcc as an overall wrapper the bottom content at the moment suffers from the fact that you are trying to use an id twice which isn't permitted as they are unique to each page and can only be used once.
Hugo.
Wed, 2004-09-29 03:12
#6
nesting <div>
I see what you are saying about 100% applying to the viewing area. That causes me a problem. I got something working for now and as I learn more I will improve it. Thanks, you have been a great help and have given me some good resources to look at. I have been reading other post and looking at resource others have suggested too. I have put the new files on the same site if you want to look at them.