Link to home
Start Free TrialLog in
Avatar of SESIT
SESIT

asked on

Difficulties with the div tag and browser compatibility

Hi all,

I'm kind of new in web developping an I'm trying to use the div tags in order to replicate tables division without using the :table flag (since i heard that ie7 don't support it)

So the division i'm trying to do is the following:
-1 Header on top that fills 90% of the screen centered
- 1 Center div that fills 90% of the screen centered (let's call it container)
        -->Center parts contains:
                 =>1 Division on the side that will contains menus (with a fixed width of 100px). The height of this division should be the same height as the Container (since I want to show a different bg color even if the menu doesn't fill the whole space)

                 =>1 Division that fills the rest of the space at the RIGHT of the sidebar division(will be used to display web page content). This division need to always fill the remaining space even if i resize the page.
-1 Footer on top that fills 90% of the screen centered


I'm having difficulties for the center division. I can't seem to be able to make the sidebar division's height the same as the parent container... It seem it only arrange the height depending on the content of the sidebar division...

Also i was trying to make the right division fill the remaining space at the right of the side bar. In IE 7 it works... but in firefox and chrome the right division appear at the bottom of the  sidebar division even if i define a margin or even if a specify left:105px.

Any help would be appreciated!

StyleSheet.css
body
    {
        text-align: center;
    }
    div
    {
        border: 1px solid #f60;
        text-align: left;
    }
    #head
    {
        width: 90%;
        margin: 2px auto;
    }
    #contain
    {
        margin: 0 auto;
        overflow: hidden;
        background: #eee;
        min-width: 300px;
        width: 90%;
        height: 100%;
    }
    #left
    {
        float: left;
        width: 100px;
        margin: 2px 0px 2px 0px;
    }
    #middle
{
    float: left;
    width: auto;/*
    margin-bottom: 2px;
    margin-top: 2px;
    margin-right: 2px;*/
    /*left: 105px;*/
 
}
      #foot
    {
        clear: both;
        width: 90%;
        margin: 2px auto;
    }
 
 
CODE PAGE:
 
<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
 
<!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">
        <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="head">
            this is the head
        </div>
        <div id="contain">
            <div id="left">
                left<br>
                left<br>
                left</div>
            <div id="middle">
                <asp:ContentPlaceHolder id="Master_PlaceHolder" runat="server">
                                
                            </asp:ContentPlaceHolder>
            </div>
            <%-- 
            <div id="right">
                right</div>--%>
        </div>
        <div id="foot">
            foot
        </div>
    </body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of David S.
David S.
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of SESIT
SESIT

ASKER

Thanks for your answer. Was 100% what i was looking for