1. mentally screwed up
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2004
    Rep Power

    layers overlapping in liquid css layout

    i'm trying to write a liquit layout based in layers and css and have the next code:

    <style type='text/css'>
    body{font-family:Verdana, Arial, Helvetica, sans-serif; margin:5px 5px 5px 5px; position:relative;}
    #header{border:1px solid #000000; width:100%; height:60px; position:absolute; top:0px; left:0px; min-width:600px;}
    #menu{border:1px solid #000000; position:absolute; top:60px; left:0px; width:15%; min-width:150px;}
    #content{border:1px solid #000000; position:absolute; top:60px; left:15%; width:85%; min-width:450px;}
    and in the body:
    <div id='header'>header</div>
    <div id='menu'>menu links</div>
    <div id='content'>contents</div>
    the little problem here is thata due to the percentages used to determine the left position of the contents layer it overlaps with the menu layer when i resize the window
    but i've seen a lot of pages that do not behave this way... what am i missing????
    <RamÔ_ôn >
    ...and i will strike down upon thee with great vengeance and furious anger those who attempt to poison and destroy my brothers, and you will now my name is the LORD when i lay my vengeance upon you
    Pulp Fiction
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Rep Power
    Don't become infatuated with absolute positioning. Like floats, there are lots of 'gotchas' waiting for the unwary. Also, forget about min/max anything. IE, dumba—— that it is, does not recognize the attribute.

    I think this is close to what you want;
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    <html xmlns="http://www.w3.org/1999/xhtml">
        <meta name="generator"
        content="HTML Tidy for Linux/x86 (vers 1st March 2002), see www.w3.org" />
        <meta http-equiv="content-type"
        content="text/html; charset=ISO-8859-1" />
        <title>Liquid Layout</title>
    <style type="text/css">
    body {
        margin: 5px;
    #header {
        border: 1px solid black;
        height: 60px;
    #menu {
        border: 1px solid black;
        width: 15%;
        float: left;
    #content {
        border: 1px solid black;
        margin-left: 15%;
        <div id="header">
          <h1>Generic Header/Logo</h1>
        <!-- end header -->
        <div id="menu">
        <!-- end menu -->
        <div id="content">
          <p>All kinds of generic content</p>
        <!-- end of content -->

    Last edited by kk5st; April 8th, 2004 at 01:19 AM.
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo