Previous Message
Next Message

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

Sent by Ed Seehouse on 15 March 2006 23:11


On 3/15/06, [EMAIL-REMOVED] [EMAIL-REMOVED]> wrote:
> 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??

Actually, that's the way "float" is supposed to work according to the
CSS standard.
The containing element "forgets" about contained elements that are
floated. A floated element is not part of the normal document flow. 
The container is supposed to size itself according to it's content,
but if you float all it's content it thinks it has no content and
shrinks accordingly.

If your containing object is wide enough, float it too.  Also I
believe setting overflow on it will also make the containing element
grow to enclose it's internal floats.

Ed



> **** 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/
>


--
Ed Seedhouse
______________________________________________________________________
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: