..I add a min-height in the container.

I don't understand this...I have a basic masterpage that has a container. I have to add a min-height to get it to work. I used Richard's column example in his Instant Results book for the basic masterpage (minus the columns) and then tried to get a couple columns in the content page. This works great--only as long as I set the min-height of the container div in the masterpage--why??? That one style fixes it...and I don't know why.


Thanks, in advance,
Rob

Here is my content page:

<%@ Page Language="VB" MasterPageFile="~/Admin/AdminMasterPage.master" AutoEventWireup="false" CodeFile="addawards.aspx.vb" Inherits="Admin_addawards" title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
<div style="float:left; width:400px">
    <div style="margin:10px; padding-left:75px">
        <asp:Label ID="Label1" runat="server" Text="Edit Award Titles" Font-Bold="true" Font-Underline="true"></asp:Label>
    </div>
    <div style="margin:10px">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="ObjectDataSource1" DataKeyNames="AwardID" GridLines="None" ShowHeader="False" >
            <Columns>
                <asp:BoundField DataField="Location" HeaderText="Location" SortExpression="Location" />
                <asp:CommandField ShowDeleteButton="True" />
                <asp:ButtonField CommandName="SELECT" Text="Edit Places" />
            </Columns>
            <HeaderStyle BackColor="Yellow" />
        </asp:GridView>
    </div>
    <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" DataObjectTypeName="Searing.SunArtSite.BO.Award"
        DeleteMethod="DeleteAward" SelectMethod="GetList"
        TypeName="Searing.SunArtSite.Bll.AwardsManager"></asp:ObjectDataSource>
    <div style="margin:10px; padding-left:50px">
        <asp:Label ID="Label2" runat="server" Text="Edit Places" Font-Bold="true" Font-Underline="true"></asp:Label>
    </div>
    <div style="margin:10px">
        <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" DataSourceID="ODSPlaceList" DataKeyNames="placeID" GridLines="None" ShowHeader="False">
            <Columns>
                <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
                <asp:BoundField DataField="Year" HeaderText="Year" SortExpression="Year" />
                <asp:CommandField ShowDeleteButton="True" />
            </Columns>
        </asp:GridView>
    </div>
    <asp:ObjectDataSource ID="ODSPlaceList" runat="server"
        SelectMethod="GetPlaceListPerAward" TypeName="Searing.SunArtSite.Bll.PlaceManager" DataObjectTypeName="Searing.SunArtSite.BO.Place" DeleteMethod="DeletePlace">
        <SelectParameters>
            <asp:ControlParameter ControlID="GridView1" Name="id" PropertyName="SelectedValue"
                Type="Int32" />
        </SelectParameters>
    </asp:ObjectDataSource>
</div>
<div style="float:left; margin:10px">
    <div>
        <asp:Label ID="Label3" runat="server" Text="Add Or Edit Award" Font-Underline="true" Font-Bold="true"></asp:Label>
    </div>
    <div>
        <asp:FormView ID="FormView1" runat="server" DataSourceID="ObjectDataSource2">
            <EditItemTemplate>
                Location:
                <asp:TextBox ID="LocationTextBox" runat="server" Text='<%# Bind("Location") %>'>
                </asp:TextBox><br />
                AwardID:
                <asp:TextBox ID="AwardIDTextBox" runat="server" Text='<%# Bind("AwardID") %>'>
                </asp:TextBox><br />
                <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update"
                    Text="Update">
                </asp:LinkButton>
                <asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel"
                    Text="Cancel">
                </asp:LinkButton>
            </EditItemTemplate>
            <InsertItemTemplate>
                Location:
                <asp:TextBox ID="LocationTextBox" runat="server" Text='<%# Bind("Location") %>'>
                </asp:TextBox><br />
                AwardID:
                <asp:TextBox ID="AwardIDTextBox" runat="server" Text='<%# Bind("AwardID") %>'>
                </asp:TextBox><br />
                <asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" CommandName="Insert"
                    Text="Insert">
                </asp:LinkButton>
                <asp:LinkButton ID="InsertCancelButton" runat="server" CausesValidation="False" CommandName="Cancel"
                    Text="Cancel">
                </asp:LinkButton>
            </InsertItemTemplate>
            <ItemTemplate>
                Location:
                <asp:Label ID="LocationLabel" runat="server" Text='<%# Bind("Location") %>'></asp:Label><br />
                AwardID:
                <asp:Label ID="AwardIDLabel" runat="server" Text='<%# Bind("AwardID") %>'></asp:Label><br />
            </ItemTemplate>
        </asp:FormView>
        <asp:ObjectDataSource ID="ObjectDataSource2" runat="server" OldValuesParameterFormatString="original_{0}" SelectMethod="GetItem" TypeName="Searing.SunArtSite.Bll.AwardsManager">
            <SelectParameters>
                <asp:ControlParameter ControlID="GridView1" Name="id" PropertyName="SelectedValue"
                    Type="Int32" />
            </SelectParameters>
        </asp:ObjectDataSource>
    </div>
</div>

</asp:Content>

Here is the masterpage:

<%@ Master Language="VB" CodeFile="AdminMasterPage.master.vb" Inherits="Admin_AdminMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Admin</title>
<link href="~/mainstyle.css" rel="stylesheet" type="text/css" />
<script language="javascript" type='text/javascript' >
     function ImageHover(name)
    {

        name.originalSrc = name.src;
        name.src = '../Site_Images/' + name.id + 'Selecting.bmp';

    }

    function ImageLeave(name)
    {
        name.src = name.originalSrc;

    }
</script>
</head>
<body>
<form id="form2" runat="server" accept="4">
    <div id='main'>
        <div id='header' >
            <asp:Image ID="Image1" runat="server" ImageUrl="../Site_Images/sunbanner.jpg" />
           </div>
        <div id='addpicturesbutton'>
            <asp:ImageButton ID="addPicturesButton" runat="server" PostBackUrl="~/Admin/addpictures.aspx" />
        </div>
        <div id='addshowbutton'>
            <asp:ImageButton ID="addShowsButton" runat="server" PostBackUrl="~/Admin/addshows.aspx" />
        </div>
        <div id='addawardsbutton'>
            <asp:ImageButton ID="addAwardsButton" runat="server" PostBackUrl="~/Admin/addawards.aspx" />
        </div>
        <div id='container' style="min-height:50px">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div id='footer' style="position:relative;">

            <div style="float:left;">
                <asp:LoginView ID="LoginView1" runat="server" >
                    <AnonymousTemplate >
                        You are not logged in.
                    </AnonymousTemplate>
                    <LoggedInTemplate>
                        Welcome
                        <asp:LoginName ID="LoginName1" runat="server" />

                    (<asp:LoginStatus ID="LoginStatus1" runat="server" ForeColor="Black" LogoutPageUrl="../default.aspx" LogoutAction="Redirect" />)
                </LoggedInTemplate>
            </asp:LoginView>
            </div>
            <span style="margin-left:40px">Future Copyright Info</span>
        </div>
    </div>
</form>
</body>
</html>

Here is the css page:

body {
    font-family: sans-serif;
    margin: 0;
    margin-top:5px;
    padding: 0;
    background: url(site_images/back.jpg) center;
    background-repeat: repeat-y;

}

h1, h6 {
    margin: 0;
    font-weight: normal;
}

div#main {

    width:800px;
    margin-left:auto;
    margin-right:auto;


}


div#container {

    border-left: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 1px solid black;


}

div#header {
    border: 2px solid black;
    height:245px;
    margin-bottom:5px;
}

div#footer
{
    background:white;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-top: 1px solid black;
    padding:10px;

}

div#test {
    font: arial;
}

div#aboutbutton {
    border: 2px solid black;
    float:left;
    height:50px;
}

div#addpicturesbutton
{
    border: 2px solid black;
    float:left;
    height:50px;
}

div#addshowbutton
{
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    float:left;
    height:50px;
}

div#addawardsbutton
{
    border: 2px solid black;
    float:left;
    height:50px;
}

div#exhibitbutton {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    float:left;
    height:50px;
}

div#awardsbutton {
    border: 2px solid black;
    float:left;
    height:50px;
}

div#artbutton {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
    float:left;
    height:50px;
}

div#sunpic
{
    margin-top:10px;
    margin-left:10px;
    margin-right:10px;
    border:2px solid black;
    height:351px;
    width:250px;
    float:left;
}

div#abouttext
{
    margin:10px;
    font-family: sans-serif;
}


#login
{
    background:white;
    border-right:2px solid black;
}

I don't understand all the ASP stuff Robert, if you could post the rendered HTML output, instead of ASP source, it'd be easier for us to help. I just don't have the patience to dig through all of that to find the HTML, that I would I have to copy and paste into my editor and save to a file to run in a browser so I can see what you're talking about. So help us out a bit, when you're looking for help in the CSS forum, avoid posting ASP, and just give us the HTML and CSS. Even better would be a URL to the source.

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design, 2nd Edition
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html

Richard,

************************************
UPDATE ADDED LATER:

I think I figured this out. The buttons at the top were floated, which removed them from the flow. Thus, the container atually starts above the buttons. Thus--the content I am adding to the container is hidden by the buttons. If I add a margin-top to the container to adjust for the buttons---it works.

Sheesh---you know--you get so much styling..I had to just create a page with standard HTML elements to see how the layout was working--also--helps to put borders on DIV's to see where they are appearing.

:)
************************************


Ok..I noticed that I could just view source and it removed the contentpage/masterpage stuff and just creates an html doc--very sorry about that.

Here's an example of hidden content. The gridview control--represented as a table here..doesn't show. There is actually no space in the content section.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>
    Untitled Page
</title><link href="../mainstyle.css" rel="stylesheet" type="text/css" />
<script language="javascript" type='text/javascript' >
     function ImageHover(name)
    {

        name.originalSrc = name.src;
        name.src = '../Site_Images/' + name.id + 'Selecting.bmp';
    
    }

    function ImageLeave(name)
    {
        name.src = name.originalSrc;

    }
</script>
</head>
<body>
<form name="aspnetForm" method="post" action="addawards.aspx" id="aspnetForm" accept="4">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="wRWADfIrJgqDm5RIY8pIYXmj1mJV2CRKZ6gS9Yp7Of1 iE7cHF9Mjn5LVwp+UC6228X23Z8rUo4PL2GPRLqLixqsFJjlps JerUHgUBNMj72/XtPuvMLf6f1727g3W+Wzclt9aoi15oAo50FOzhmonpZnn4qyCI rG51R6azajw2u8lbTxDIThiIwUNPQqDEMt72++uyCKDKFK756y JnMNAereDuPFlI2LNjPPVlnpSqdPsU4PF7Nf2zPuoBQWmIVHOW h+w434pj6dz+OMUxsQzE5om8J7Kxo8G2XiZij3WECx6VBWNkRz WoIxPoy12B3jTmMbdvHrSiepfCIL0+deuTiGWx+FiXLhvu6GTs lotHGj/7z5UwfFFWeZE8Z5FLW07vHUNZ8H3jZfaSdfSgS07sLvUeDu1cV 6liffv/e20fK8LFZ0EGiBXxDKmPhrZmaD4qMsnuJb1t9QECV/o2CKYbafYLIOl74HbNzX/5KSd3n/PTvUPMhSMQ6R3faR38hvzP8VuKzZCvv4I5WTxGc1WNkLfogwSo cyPjvjmiTujPOBXysOmwb4+MzV4YW/zDye8i9LqmA6Ow7LKf7PlZ4b7voXDO+VUgz9jYXxtSGmavUYpp Wp6M4UGX40RiXHMqTGSBvT/P9qgHVSEBn63Hd7023MlpuLU849uDNUe0jV3tK73dXtiUf49gi ShY6lKGLeCOy/80FtuHvga7rUN5GAdYRudbrLG0LTM3BrAvV+MrDfVUTYy6V7o4 BUedsNY/d0pPAM/KUsQIwWKZnqCYiTrYN152QUbJKqNakSAP6/X9Vozg8ATtAgqOBL1r4pCeUcDu2uSnM436b9FSZ2mgqSQO0wjH 1Xhycnx+Keah3sBqpgW7+bFnqhosAKmOFZFRydBl+B63UMu4QS D7+k5O0g8A0OJVmXgrls9WUZXZeoR80lYQu6eGhrgpJkcgp74s XFNXM+T2LbYdh4exvYFRWJDOxIm4HIT4WOKi22mQQrGE0hjpFz oKcyFn8IzEjRVTBQG/trMZcb9DcjKnUJvSABaalyAe4D6st2awfOfIwHef4r7T5O+BQM f2tMzQKGK5luCRmCjmlNjDDMVRuVDZdQM42CsPff6IYxPzS7LT Yhqb9vuzbnSl5yaBkuJUwo/uofMdrGnObubZJnh7cAACBsIRYCzsdi6Se54i+dlOsQGegIcWs T4ln5sRe1EQ55yxJRAQ8xovP/5ZL2fEamabVllDAj+MLybVMyOEy+IpQJZD/JC2A6U9PcVJNB4GXPViWK09yYrRe4YgGoR+UFXxo+Vtyf6TI2u 79Dg6MDfRAt7OP2RJrPl8tRMEg3prIJ4/UpFBnVQJhAje+vc3WaipQ9AHtVYZJHlXytyot3zUlUMUSl3rav kOOHh3tbK8LXhf2vrYJUzcEh8OyIGbq52c5gkJ8K94gI8VbnoS LqprmAPKTDVhRtJY4gz7iPEFggxZ3T/tRWJ3tvtcHKceDALbY6LOMIfaSobtyvL9i9oaqhZFRJtbp9HUG/a5Oo90054/XVoGHI+aBtP9zUNKQhrsyZ+tHsmjmjoTVQaYtKYTabWhFiwkAO gPODDIHrl7VyCUT4yyc7QWt+y1O9aXjjtFoDutnhtopPQvIevG 29MGhAPk1w15lc8QBOZPa5WTyIXsDkfe+A/rulfL5xZVfq/TnySkTvkqJuGm/YWFNX1oE+CIRAfuteBOKIvhY+ePLR1ykiKzDGOPsvpVlhJdE1E oW3Xrw==" />
</div>

<script type="text/javascript">
<!--
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
// -->
</script>


<script src="/sunsarttestsite/WebResource.axd?d=aEN-garvAz8GnDYv1QCIig2&amp;t=633185801258125000" type="text/javascript"></script>

    <div id='main'>
        <div id='header' >
            <img id="ctl00_Image1" src="../Site_Images/sunbanner.jpg" style="border-width:0px;" />
         </div>
        <div id='addpicturesbutton'>
            <input type="image" name="ctl00$addPicturesButton" id="ctl00_addPicturesButton" originalSrc="" OnMouseOver="javascript:ImageHover(this);" OnMouseOut="javascript:ImageLeave(this);" src="../Site_Images/ctl00_addPicturesButtonWhite.bmp" onclick="javascript:WebForm_DoPostBackWithOptions( new WebForm_PostBackOptions(&quot;ctl00$addPicturesBut ton&quot;, &quot;&quot;, false, &quot;&quot;, &quot;addpictures.aspx&quot;, false, false))" style="border-width:0px;" />
        </div>
        <div id='addshowbutton'>
            <input type="image" name="ctl00$addShowsButton" id="ctl00_addShowsButton" originalSrc="" OnMouseOver="javascript:ImageHover(this);" OnMouseOut="javascript:ImageLeave(this);" src="../Site_Images/ctl00_addShowsButtonWhite.bmp" onclick="javascript:WebForm_DoPostBackWithOptions( new WebForm_PostBackOptions(&quot;ctl00$addShowsButton &quot;, &quot;&quot;, false, &quot;&quot;, &quot;addshows.aspx&quot;, false, false))" style="border-width:0px;" />
        </div>
        <div id='addawardsbutton'>
            <input type="image" name="ctl00$addAwardsButton" id="ctl00_addAwardsButton" originalSrc="" OnMouseOver="javascript:ImageHover(this);" OnMouseOut="javascript:ImageLeave(this);" src="../Site_Images/ctl00_addAwardsButtonSelected.bmp" onclick="javascript:WebForm_DoPostBackWithOptions( new WebForm_PostBackOptions(&quot;ctl00$addAwardsButto n&quot;, &quot;&quot;, false, &quot;&quot;, &quot;addawards.aspx&quot;, false, false))" style="border-width:0px;" />
        </div>
        <div id='container' style="position:relative;">

<div style="position:absolute; top:0; bottom:0; left:0; width:400px;">
    <div>
        <span id="ctl00_ContentPlaceHolder2_Label1" style="font-weight:bold;text-decoration:underline;">Edit Award Titles</span>
    </div>
    <div>
        <div>
    <table cellspacing="0" border="0" id="ctl00_ContentPlaceHolder2_GridView1" style="border-collapse:collapse;">
        <tr>
            <td>Trinity Lutheran &quot;Religious Art Show&quot;</td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceH older2$GridView1','Delete$0')">Delete</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceH older2$GridView1','SELECT$0')">Edit Places</a></td>
        </tr><tr>
            <td>El Dorado Gallery &quot;Miniature Art Show&quot;</td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceH older2$GridView1','Delete$1')">Delete</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceH older2$GridView1','SELECT$1')">Edit Places</a></td>
        </tr><tr>
            <td>Meeker Classis International Art Contest</td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceH older2$GridView1','Delete$2')">Delete</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceH older2$GridView1','SELECT$2')">Edit Places</a></td>
        </tr><tr>
            <td>West Wind Gallery, Casper, WY</td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceH older2$GridView1','Delete$3')">Delete</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceH older2$GridView1','SELECT$3')">Edit Places</a></td>
        </tr><tr>
            <td>Annual National Miniature &amp; Small Works Show</td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceH older2$GridView1','Delete$4')">Delete</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceH older2$GridView1','SELECT$4')">Edit Places</a></td>
        </tr><tr>
            <td>Johnson County &quot;Barn Art Show&quot;</td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceH older2$GridView1','Delete$5')">Delete</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceH older2$GridView1','SELECT$5')">Edit Places</a></td>
        </tr><tr>
            <td>Independence, MO. Community Association for Arts &quot;Anual Adult Show&quot;</td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceH older2$GridView1','Delete$6')">Delete</a></td><td><a href="javascript:__doPostBack('ctl00$ContentPlaceH older2$GridView1','SELECT$6')">Edit Places</a></td>
        </tr>
    </table>
</div>
    </div>

</div>





        </div>
        <div id='footer' style="position:relative;">

            <div style="float:left;">

                        Welcome
                        <span id="ctl00_LoginView1_LoginName1">rsearing</span>
                
                    (<a id="ctl00_LoginView1_LoginStatus1" href="javascript:__doPostBack('ctl00$LoginView1$Lo ginStatus1$ctl00','')" style="color:Black;">Logout</a>)

            </div>
            <span style="margin-left:40px">Future Copyright Info</span>
        </div>
    </div>

<div>

    <input type="hidden" name="__VIEWSTATEENCRYPTED" id="__VIEWSTATEENCRYPTED" value="" />
    <input type="hidden" name="__PREVIOUSPAGE" id="__PREVIOUSPAGE" value="yE-ZWJm5BTq_tyRojwek9SDEp_eKqf40CnoWkrVUNxV8eX6jaCHY_ u7YgNK-EVS90" />
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="cnAXIRJ1bh8m+0qoWpc3o8DAvIpPoUpZoM1Qg6CF+cT ITQORRkzccsMR9Jh6FKR8Xy6nyjDNI5DY+2XHPw7ThUTba/EJos2c9mQnokXB8hu17HO0LVZeO1h1sjCEqhzIJ9mvEyPnw3Jk vTf0ScIVa99rMad+fPwyCeefavgklVc=" />
</div></form>
</body>
</html>

Rob,

If you are adding margin the div that follows the buttons in order to keep the buttons from overlapping, why not just keep the buttons in flow layout?

I have found GREAT help in the FireBug extension for FireFox. You can look at all sorts of information of the page. Particular to this discussion are the layout analysis tools that will show you the element borders, dimension as the browser has rendered them, how the CSS has been applied to the elements, and it goes on and on. It's free so it's well worth the time to explore it. You can even debug javascript in it and tickle the CSS behavior in real time to see how the styles affect the output. It's really an incredible developer tool.

-Peter