?
Solved

Difficulties with the div tag and browser compatibility

Posted on 2008-10-09
2
Medium Priority
?
801 Views
Last Modified: 2012-06-27
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

0
Comment
Question by:SESIT
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
ID: 22681272
IE7 is less standards compliant than other browsers, so get used to it displaying some things differently.

The left property will be ignored unless you give the element position:relative or position:absolute. You don't need to do that now though. What you need to do is not float #middle (as in remove the float property declaration from its style rule) and give it a left margin of 105px or whatever you want.

As to the equal height columns... Equal columns is often an illusion created with backgrounds. You could use Faux Columns to make the elements appear to have equal heights.
http://www.alistapart.com/articles/fauxcolumns/

Also percentage heights work in an odd way. I recommend you read this which tries to explain it: http://www.dynamicsitesolutions.com/css/height-and-min-height/
0
 

Author Closing Comment

by:SESIT
ID: 31504699
Thanks for your answer. Was 100% what i was looking for
0

Featured Post

Video: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question