6 replies [Last post]
Will
Offline
newbie
Last seen: 18 years 19 weeks ago
Joined: 2004-09-26
Posts: 9
Points: 0

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

nesting &lt;div&gt;

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Will
Offline
newbie
Last seen: 18 years 19 weeks ago
Joined: 2004-09-26
Posts: 9
Points: 0

nesting &lt;div&gt;

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

nesting &lt;div&gt;

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Will
Offline
newbie
Last seen: 18 years 19 weeks ago
Joined: 2004-09-26
Posts: 9
Points: 0

nesting &lt;div&gt;

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?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

nesting &lt;div&gt;

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Will
Offline
newbie
Last seen: 18 years 19 weeks ago
Joined: 2004-09-26
Posts: 9
Points: 0

nesting &lt;div&gt;

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.