3 replies [Last post]
bmalex88
bmalex88's picture
Offline
newbie
Last seen: 2 years 50 weeks ago
Timezone: GMT+2
Joined: 2011-12-30
Posts: 3
Points: 4

Hello, this is my first post on this website, sorry for any mistakes (and also, English is not my primary language).
Well, I have been always using tables for the layout and organization of a page content until I found that divs and CSS are better. The problem lies in compatibility with older browser.
So, I have this HTML code for the main layout of my website:

<div id="main">
        <div id="top">
            <div id="alerts">
                Alerts
            </div>
            <div id="user">
                User
            </div>
        </div>
        <div id="header">
            <div id="lhead">
                Left Header
            </div>
            <div id="rhead">
                Search Header
            </div>
        </div>
        <div id="navbar">
            <div id="address">
                Address
            </div>
            <div id="date">
                12/12/2012 23:00:00
            </div>
        </div>
        <div id="content">
            <div id="lpanel">
                Left Panel
            </div>
            <div id="cpanel">
                Central Panel
            </div>
            <div id="lpanel">
                Right Panel
            </div>
        </div>
        <div id="bottom">
            <div id="status">
                Status Message
            </div>
            <div id="info">
                Information
            </div>
        </div>
</div>

This is the CSS code for my divs:

#main {
        background: red;
        border: 2px solid blue;
        display: block;
        height: auto;
        margin: 10px auto 10px;
        min-width: 800px;
        max-width: 95%;
        width: 90%;
    }
 
        #top {
            border: 2px solid yellow;
            display: table;
            height: 20px;
            margin: 0px 0px 5px 0px;
            width: 100%;
        }
 
            #alerts {
                background: black;
                border: 2px solid yellow;
                display: table-cell;
                height: 20px;
                width: 85%;
            }
 
            #user {
                background: maroon;
                border: 2px solid yellow;
                display: table-cell;
                height: 20px;
                width: 15%;
            }
 
        #header {
            border: 2px solid yellow;
            display: table;
            height: 64px;
            margin: 0px 0px 5px 0px;
            width: 100%;
        }
 
            #lhead {
                background: black;
                border: 2px solid yellow;
                display: table-cell;
                height: 64px;
                width: 85%;
            }
 
            #rhead {
                background: maroon;
                border: 2px solid yellow;
                display: table-cell;
                height: 64px;
                width: 15%;
            }
 
        #navbar {
            background: blue;
            border: 2px solid yellow;
            display: table;
            height: 20px;
            margin: 0px 0px 5px 0px;
            width: 100%;
        }
 
            #address {
                background: black;
                border: 2px solid yellow;
                display: table-cell;
                height: 20px;
                width: 85%;
            }
 
            #date {
                background: maroon;
                border: 2px solid yellow;
                display: table-cell;
                height: 20px;
                width: 15%;
            }
 
        #content {
            background: blue;
            border: 2px solid yellow;
            clear: left;
            display: table;
            height: auto ;
            margin: 0px 0px 5px 0px;
            width: 100%;
        }
 
            #cpanel {
                background: maroon;
                border: 2px solid yellow;
                display: table-cell;
                height: auto;
                min-height: 400px;
                width: 70%;
            }
 
            #lpanel {
                background: black;
                border: 2px solid yellow;
                display: table-cell;
                height: auto;
                min-height: 400px;
                width: 15%;
            }
 
        #bottom {
            background: blue;
            border: 2px solid yellow;
            display: table;
            height: 20px;
            width: 100%;
        }
 
            #status {
                background: black;
                border: 2px solid yellow;
                display: table-cell;
                height: 20px;
                width: 15%;
            }
 
            #info {
                background: navy;
                border: 2px solid yellow;
                display: table-cell;
                height: 20px;
                width: 85%;
            }

So, I tell the browser that the main sections of the page will be displayed as tables. Every browser understand this except from older IE (IE6, I guess), as expected (IE always must be different from other browsers). I really want to see the page well displayed in any browser so I am asking you for any alternatives for my code, in order to make it compatible with IE (Compatibility Mode).

Left Panel should have the same width as Right Panel, User panel and Search Header. I will keep trying but I think CSS is a little limited as to divs and layouts. I guess that the only properties that you can use are position, float, display, margin and padding for positioning things.

Thanks for your answers

bmalex88
bmalex88's picture
Offline
newbie
Last seen: 2 years 50 weeks ago
Timezone: GMT+2
Joined: 2011-12-30
Posts: 3
Points: 4

Conclusion

After "a lot" (as I said, few possibilities are offered by CSS for the positioning and sizing of elements in a compatible way) of tries I just have to use tables again. CSS is the worst for this. It should just remain a language for styling the webpage (colors, background, borders, etc.), not for defining its structure and skeleton. There would not be a problem if not so many people will use old browser (and the only reason for which they do it is not having an idea about installing a program - like my boss, whose computer is older than him, and the browser too)

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 5 weeks 5 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2037
Points: 2259

bmalex88 wrote: After "a lot"

bmalex88 wrote:

After "a lot" (as I said, few possibilities are offered by CSS for the positioning and sizing of elements in a compatible way) of tries I just have to use tables again. ...

You may as well because all you did was take a tables-based layout and replace the table cells with DIVs. You've even replaced their block level behavior with display: table; and display: table-cell;.

If instead you want to do it correctly, just post a pic of the layout you want and someone will give you some pointers on how to lay it out in a more modern manner.

bmalex88
bmalex88's picture
Offline
newbie
Last seen: 2 years 50 weeks ago
Timezone: GMT+2
Joined: 2011-12-30
Posts: 3
Points: 4

OK now

OK. I managed to do what I wanted with CSS. The only problem I have now is that some divs fall below others, instead of staying aside.
The image of what I get till now in any browser excepting IE6 or IE9 Compatibility View Mode

wctempl.jpg

The divs resizes very well and everything is just like I want. Even so, in IE6 or IE9 Compatibility View Mode I see it like this

wcbad.jpg

The right gadget div falls below the left gadget and the content. If I zoom the page, at some zoom ratios the divs is position as it should.

My CSS:

#main {
        background: yellow;
        margin: 10px auto 10px;
        min-width: 800px;
        width: 90%;
    }
 
        #top {
            height: 20px;
            margin: 0px 0px 5px 0px;
        }
 
            #alerts {
                background: black;
                float: left;
                height: 20px;
                width: 85%;
            }
 
            #user {
                background: maroon;
                overflow: hidden;
                height: 20px;
                width: 15%;
            }
 
        #header {
            height: 64px;
            margin: 0px 0px 5px 0px;
        }
 
            #lhead {
                background: black;
                float: left;
                height: 64px;
                width: 85%;
            }
 
            #rhead {
                background: maroon;
                overflow: hidden;
                height: 64px;
                width: 15%;
            }
 
        #navbar {
            height: 20px;
            margin: 0px 0px 5px 0px;
        }
 
            #address {
                background: black;
                float: left;
                height: 20px;
                width: 85%;
            }
 
            #date {
                background: maroon;
                overflow: hidden;
                height: 20px;
                width: 15%;
            }
 
        #middle {
            width: auto;
        }
 
            #content {
                background: maroon;
                float: left;
                margin: 0px 0px 5px 0px;
                min-height: 400px;
                width: 70%;
            }
 
            #gadgets {
                background: black;
                display: inline;
                float: left;
                margin: 0px 0px 5px 0px;
                min-height: 400px;
                width: 15%;
            }
 
        #bottom {
            clear: both;
            display: table;
            height: 20px;
            width: 100%;
        }
 
            #status {
                background: black;
                float: left;
                height: 20px;
                width: 15%;
            }
 
            #info {
                background: navy;
                overflow: hidden;
                height: 20px;
                width: 85%;
            }

My HTML

<div id="main">
        <div id="top">
            <div id="alerts">
                Alerts
            </div>
            <div id="user">
                User
            </div>
        </div>
        <div id="header">
            <div id="lhead">
                Left Header
            </div>
            <div id="rhead">
                Search Header
            </div>
        </div>
        <div id="navbar">
            <div id="address">
                Address
            </div>
            <div id="date">
                12/12/2012 23:00:00
            </div>
        </div>
        <div id="middle">
            <div id="gadgets">
                Left Gadgets
            </div>
            <div id="content">
                Content
            </div>
            <div id="gadgets">
                Right Gadgets<br />
            </div>
        </div>
        <div id="bottom">
            <div id="status">
                Status message
            </div>
            <div id="info">
                Information
            </div>
        </div>
</div>

What should I do in order to make the right gadget div stay next to the content div?
Thanks!