Previous Message
Next Message

Outer <DIV> not expanding to contain Floating <DIV>'s

Sent by Trystano on 15 March 2006 22:10


Hi all,

I am creating a website in CSS (and asp.net) and have started to create the skeleton of the site in
CSS and am starting to get the positions together using <DIV>'s. But.... I have a problem. The outer
div (inner_container) is not expanding to the height that is used up by the floating <DIV>'s that it
is containing. The problem seems to be the same across IE and Firefox (1.5). I have included the
HTML and CSS below for you to look at. Am I right in guessing that I need to implement some form of
hack to get this sorted??

**** HTML ****
 <%@ Page CodeBehind="index.aspx.cs" Language="c#" AutoEventWireup="false"
Inherits="MCS_Clients.index" %>
<HTML>
    <HEAD>
        <title>Client Website BETA</title>
        <link type="text/css" rel="stylesheet" href="stylesheets/styles.css">
    </HEAD>
    <body>
        <form runat="server">
            <div id="container">
                <!-- ***** Header ***** -->
                <div id="header">
                    Header Image goes here!
                </div>
                <!-- ***** Main Menu ***** -->
                <div id="main_menu">
                    Main Menu goes here! This will be a user control called in to each page!
                </div>
                <!-- ***** Inner Container ***** -->
                <div id="inner_container">
                    <div id="lefthand_menu">
                        Left-hand menu goes here!
                    </div>
                    <!-- ***** Content Container ***** -->
                    <div id="content_container">
                        <div id="contact_list">
                            Contacts &amp; Clients
                        </div>
                        <div id="contact_reports">
                            Contacts Reports
                        </div>
                        <div id="report_upload">
                            Upload Document Section
                        </div>
                    </div>
                </div>
            </div>
            
        </form>
    </body>
</HTML>

**** CSS ****
body
{
    text-align: center;
    margin: 0;
    padding: 0;
    min-width: 750px;
}

#container 
{
    margin-right: auto;
    margin-left: auto;
    position: relative;
    width: 750px;
    text-align: left;
    border: solid 1px #000000;
}

#header
{
    width: 100%;
    height: 100px;
    margin: 5px;
    border: solid 1px #000000;
}

#main_menu
{
    width: 100%;
    height: 25px;
    margin: 5px;
    border: solid 1px #000000;
}

#inner_container
{
    margin: 5px;
    border: solid 1px #000000;
}

#lefthand_menu
{
    float: left;
    margin: 5px;
    border: solid 1px #000000;
}

#content_container
{
    float: left;
    border: solid 1px #000000;
}

#contact_list
{
    margin: 5px;
    border: solid 1px #000000;
}

#contact_reports
{
    margin: 5px;
    border: solid 1px #000000;
}

#report_upload
{
    margin: 5px;
    border: solid 1px #000000;
}

Hope you can help me.

Thanks

Tryst
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread:

Possibly related: