Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    Regular Coder
    Join Date
    Sep 2004
    Location
    USA
    Posts
    314
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Keeping two floating divs aligned.



    What I am trying to do, is make everything fluid so if the text expands, so does the box; that is key. But the part I am having trouble with is that I want this to happen: If the top left text is large and pushes the bottom left box down, I want the bottom right box to move with it. And if the top right text is too big and expands its box I want to bottom left text to move with it. So bassically I need the bottom left and bottom right headers aligned at all times. I haven't started coding yet as I want to plan it out first, but I am kind of lost as to how the boxes will stay aligned, any ideas?

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Northern NJ
    Posts
    404
    Thanks
    0
    Thanked 1 Time in 1 Post
    1. Are all the divs are aligned together inside another div?

    2. Are the divs absolute positioned with coordinates? Or do you use an offset to position the divs next to each other?

    3. Are the sizes dynamically calculated or they are set?
    I would rather be a lion for a day than a lamb that lives forever.

  • #3
    Regular Coder
    Join Date
    Sep 2004
    Location
    USA
    Posts
    314
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Like I said, I haven't started coding yet, I want to plan it out before hand and need some help.

  • #4
    Regular Coder Masterslave's Avatar
    Join Date
    Dec 2005
    Posts
    287
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Maybe this will help you:
    Code:
    <div id="right">
          <div class="first"></div>
          <div class="second"></div>
     </div>
    
    <div id="middle">
    </div>
    
    <div id="left">
          <div class="first"></div>
          <div class="second"></div>
    </div>
    And in the CSS somthing like:
    Code:
    #left
    {
    float: left;
    }
    
    #right
    {
    float: right;
    }
    
    .first
    {
    clear: both;
    }
    
    .second
    {
    
    }
    You should try this and tweak somethings. I hope this help you in the right direction.

  • #5
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Good on FF -
    good on Opera -
    good on IE6 -


    preety straight forward. Make the top left and right boxes float left and right as normal.

    Then the fun stuff. Make another sub container and make it float left and clear both (#bottom) so that it sits under the top two floats. That way when either of the top two boxes expands it pushes the whole #bottom div down. Thus, your headings for the bottom boxes stay aligned.

    Now since everything is floated you can relatively position your middle column (#center) into place as normal. (IE like 38% on the width. 40% foobars it.)

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>ribo-stretch</title>
    <style type="text/css">
    * {
    padding: 0;
    margin: 0;
    }
    #container {
    background-color: #333;
    border: 10px solid #333
    }
    .left {
    float: left;
    background-color: #ccc;
    width: 30%;
    }
    .right {
    float: right;
    background-color: #ccc;
    width: 30%;
    }
    #bottom {
    clear: both;
    float: left;
    width: 100%;
    background-color: #333;
    position: relative;
    }
    h2 {
    width: 100%;
    background-color: #fff;
    border-bottom: 2px solid #000;
    border-top: 2px solid #000;
    text-align: center;
    }
    p {
    margin: 6px;
    }
    #center {
    position: relative;
    margin: 0 auto;
    width: 38%;
    background-color: #fff;
    height: 400px;
    }		
    </style>	
    </head>
    <body>
    <div id="container">
    <div class="left">
    <h2>left top</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique nec, felis. Quisque hendrerit interdum 
    
    elit. Proin placerat. Praesent quam. Vestibulum cursus urna in neque. Sed turpis erat, 
    
    tristique et, cursus sit amet, tristique nec, felis. Quisque hendrerit interdum
    </p>
    </div>
    <div class="right">
    <h2>right top</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique nec, felis. Quisque hendrerit interdum 
    
    elit.
    </p>
    </div>
    <div id="bottom">
    <div class="left">
    <h2>left bottom</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique nec, felis. Quisque hendrerit interdum 
    
    elit.
    </p>
    </div>
    <div class="right">
    <h2>right bottom</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique nec, felis. Quisque hendrerit interdum 
    
    elit. Donec et urna. Nullam a diam aliquam odio viverra interdum. Proin placerat. Praesent 
    
    quam. Vestibulum cursus urna in neque. Sed turpis erat, tristique et, cursus sit amet, 
    
    tristique nec, felis. Quisque hendrerit interdum elit.
    </p>
    </div>
    </div>
    <div id="center"></div>
    <div style="clear:both"></div>
    </div>
    </body>
    </html>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #6
    Regular Coder
    Join Date
    Sep 2004
    Location
    USA
    Posts
    314
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thank so much! But it seems I have messed it up while trying to impliment it in my site Here is how I have it, but the right side overlaps in IE and I also have some questions:

    1. How can I have the middle column be able to go all the way down with text.

    2. How can I change it to 40% without messing it out?


    CSS:

    Code:
    * {
    
      padding: 0px;
      margin: 0px;
    
    }
    
    #pageContainer {
    
      width: 888px;
      margin-left: auto;
      margin-right: auto;
    
    }
    
    #banner {
    
      background-image: url('images/banner.gif');
      width: 888px;
      height: 208px;
      margin-top: 5px;
    
    }
    
    #login {
    
      position: absolute;
      margin-left: 635px;
      margin-top: -36px;
    
    }
    
    #password {
    
      margin-left: 20px;
    
    }
    
    
    #container {
    
    background-color: #ADC3C9;
    
    width: 888px;
    
    }
    
    
    .left {
    
    float: left;
    
    background-color: #ADC3C9;
    
    width: 30%;
    
    }
    
    
    .right {
    
    float: right;
    
    background-color: #ADC3C9;
    
    width: 30%;
    
    }
    
    
    #bottom {
    
    clear: both;
    
    float: left;
    
    width: 100%;
    
    background-color: #ADC3C9;
    
    position: relative;
    
    }
    
    
    h2 {
    
    width: 100%;
    
    background-color: #57839F;
    
    border-bottom: 1px solid #FFFFFF;
    
    text-align: center;
    
    color: #ffffff;
    
    font-size: 12pt;
    
    padding-top: 5px;
    
    padding-bottom: 5px;
    
    }
    
    
    p {
    
    margin: 6px;
    
    color: #465768;
    
    font-weight: bold;
    
    
    
    }
    
    
    #center {
    
    position: relative;
    
    margin: 0 auto;
    
    width: 38%;
    
    background-color: #ADC3C9;
    
    height: 400px;
    
    }


    HTML:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <link  rel="StyleSheet" type="text/css" href="style.css" />
    </head>
    <body>
    <div id="pageContainer">
    <div id="banner"></div>
    <div id="login"><input type="text" name="username" size="10"></input><input id="password" type="text" name="username" size="10"></input></div>
    <div id="container">
    <div class="left">
    <h2>Around Campus</h2>
    <p>
    <img src="images/bullet.gif" alt="" />  Job Opportunities<br />
    <img src="images/bullet.gif" alt="" />  Internship Opportunities<br />
    <img src="images/bullet.gif" alt="" />  Listings<br />
    </p>
    </div>
    <div class="right">
    <h2>COBS Calendar</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique nec, felis. Quisque hendrerit interdum 
    
    elit.
    </p>
    </div>
    <div id="bottom">
    <div class="left">
    <h2>Contact Us</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique nec, felis. Quisque hendrerit interdum 
    
    elit.
    </p>
    </div>
    <div class="right">
    <h2>COBS Forum</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique nec, felis. Quisque hendrerit interdum 
    
    elit. Donec et urna. Nullam a diam aliquam odio viverra interdum. Proin placerat. Praesent 
    
    quam. Vestibulum cursus urna in neque. Sed turpis erat, tristique et, cursus sit amet, 
    
    tristique nec, felis. Quisque hendrerit interdum elit.
    </p>
    </div>
    </div>
    <div id="center">
    <h2>The Chronicle</h2>
    <p>
    test</p>
    </div>
    <div style="clear:both"></div>
    </div>
    
    </div>
    </body>
    </html>

  • #7
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    well I guess my debugging wasn't foolproof.

    On the IE thing about the right float. I tried a ton of diffrent things and couldn't get it to work right. The content of the top left box has to be bigger than the top right or IE chokes. The only way I could get it to work without dying was to swap your top left content with your top right content. I know not the best solution but thats the only thing that worked for IE.

    1. How can I have the middle column be able to go all the way down with text.
    I will assume this is about FF breaking the text when it runs over the #bottom box.
    Code:
    #bottom {
    
    clear: both;
    
    float: left;
    
    width: 100%;
    
    position: relative;
    
    /*-- Needed to fix some weird FF stuff --*/
    
    height: 1px;
    overflow: visible;
    }
    2. How can I change it to 40% without messing it out?
    You can in FF but not IE. I tried the Tanhack but couldn't get it to work right. So I addedin some IE stuff for the h2 of the middle column. It appears that when you resize the text on IE it doesn't resize header text. Thats a god thing in this case.

    Code:
    * html #center {
    width: 39%;
    }
    * html #center h2 {
    width: 360px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -180px;
    }
    * html #center p {
    margin-top: 38px;
    }
    It simmulates what FF does right.

    the whole thing:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
    
    Strict//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; 
    
    charset=ISO-8859-1" />
    <style type="text/css">
    * {
    
      padding: 0px;
      margin: 0px;
    
    }
    
    #pageContainer {
    
      width: 888px;
    margin: 0 auto;
    background-color: #ADC3C9;
    }
    
    #banner {
    
      background: #fc3 url('images/banner.gif');
      width: 888px;
      height: 208px;
      margin-top: 5px;
     position: relative;
    
    }
    
    #login {
    
      position: absolute;
      bottom: 10px;
      right: 10px;
    
    }
    
    #password {
    
      margin-left: 20px;
    
    }
    
    
    
    
    .left {
    
    float: left;
    
    width: 30%;
    
    position: relative;
    }
    
    
    .right {
    
    float: right;
    
    
    width: 30%;
    
    position: relative;
    
    }
    
    
    #bottom {
    
    clear: both;
    
    float: left;
    
    width: 100%;
    
    position: relative;
    
    /*-- Needed to fix some weird FF stuff --*/
    
    height: 1px;
    overflow: visible;
    }
    
    
    h2 {
    
    width: 100%;
    
    background-color: #57839F;
    
    border-bottom: 1px solid #FFFFFF;
    
    text-align: center;
    
    color: #ffffff;
    
    font-size: 12pt;
    
    padding-top: 5px;
    
    padding-bottom: 5px;
    }
    
    
    p {
    
    margin: 6px;
    
    color: #465768;
    
    font-weight: bold;
    
    
    
    }
    
    
    #center {
    
    position: relative;
    
    margin: 0 auto;
    
    width: 40%;
    
    z-index: 100;
    
    }
    * html #center {
    width: 39%;
    }
    * html #center h2 {
    width: 360px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -180px;
    }
    * html #center p {
    margin-top: 38px;
    }
    
    
    
    		
    </style>
    </head>
    <body>
    <div id="pageContainer">
    <div id="banner">
    <div id="login"><input type="text" name="username" 
    
    size="10"></input><input id="password" type="text" 
    
    name="username" size="10"></input></div>
    </div>
    <div class="left">
    <h2>COBS Calendar</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing 
    
    elit. Donec et urna. Nullam a diam aliquam 
    
    odio viLorem ipsum dolor sit amet, consectetuer 
    
    adipiscing elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, felis. Quisque hendrerit interdum 
    
    elit.verra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, felis. Quisque hendrerit interdum 
    
    elit.
    </p>
    </div>
    <div class="right">
    <h2>Around Campus</h2>
    <p>
    <img src="images/bullet.gif" alt="" />  Job 
    
    Opportunities<br />
    <img src="images/bullet.gif" alt="" />  Internship 
    
    Opportunities<br />
    <img src="images/bullet.gif" alt="" />  Listings<br />
    </p>
    </div>
    <div id="bottom">
    <div class="left">
    <h2>Contact Us</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing 
    
    elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, felis. Quisque hendrerit interdum 
    
    elit.
    </p>
    </div>
    <div class="right">
    <h2>COBS Forum</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing 
    
    elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, felis. Quisque hendrerit interdum 
    
    elit. Donec et urna. Nullam a diam aliquam odio 
    
    viverra interdum. Proin placerat. Praesent 
    
    quam. Vestibulum cursus urna in neque. Sed turpis 
    
    erat, tristique et, cursus sit amet, 
    
    tristique nec, felis. Quisque hendrerit interdum elit.
    </p>
    </div>
    </div>
    <div id="center">
    <h2>The Chronicle</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing 
    
    elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, Lorem ipsum dolor sit amet, consectetuer 
    
    adipiscing elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    Lorem ipsum dolor sit amet, consectetuer adipiscing 
    
    elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, felis. Quisque hendrerit interdum 
    
    elit. Donec et urna. Nullam a diam aliquam odio 
    
    viverra interdum. Proin placerat. Praesent 
    
    quam. Vestibulum cursus urna in neque. Sed turpis 
    
    erat, tristique et, cursus sit amet, 
    
    tristique nec, felis. Quisque hendrerit interdum 
    
    elit.Lorem ipsum dolor sit amet, consectetuer 
    
    adipiscing elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, felis. Quisque hendrerit interdum 
    
    elit. Donec et urna. Nullam a diam aliquam odio 
    
    viverra interdum. Proin placerat. Praesent 
    
    quam. Vestibulum cursus urna in neque. Sed turpis 
    
    erat, tristique et, cursus sit amet, 
    
    tristique nec, felis. Quisque hendrerit interdum 
    
    elit.Lorem ipsum dolor sit amet, consectetuer 
    
    adipiscing elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, felis. Quisque hendrerit interdum 
    
    elit. Donec et urna. Nullam a diam aliquam odio 
    
    viverra interdum. Proin placerat. Praesent 
    
    quam. Vestibulum cursus urna in neque. Sed turpis 
    
    erat, tristique et, cursus sit amet, 
    
    tristique nec, felis. Quisque hendrerit interdum elit.
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, felis. Quisque hendrerit interdum 
    
    elit. Donec et urna. Nullam a diam aliquam odio 
    
    viverra interdum. Proin placerat. Praesent 
    
    quam. Vestibulum cursus urna in neque. Sed turpis 
    
    erat, tristique et, cursus sit amet, 
    
    tristique nec, felis. Quisque hendrerit interdum 
    
    elit.felis. Quisque hendrerit interdum 
    
    elit. Donec et urna. Nullam a diam aliquam odio 
    
    viverra interdum. Proin placerat. Praesent 
    
    quam. Vestibulum cursus urna in neque. Sed turpis 
    
    erat, tristique et, cursus sit amet, 
    
    tristique nec, felis. Quisque hendrerit interdum 
    
    elit.</p>
    </div>
    <div style="clear:both;width: 888px; height: 20px; 
    
    background: #fc3;"></div>
    
    </div>
    </body>
    </html>
    a little hacky but...

    I have never tried to do what your wanting before so this still may not be 100% foolproof.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #8
    Regular Coder
    Join Date
    Sep 2004
    Location
    USA
    Posts
    314
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Pure genious, thank so much for your help!

    By the way I nominated you for helpfull member

    Quote Originally Posted by harbingerOTV
    well I guess my debugging wasn't foolproof.

    On the IE thing about the right float. I tried a ton of diffrent things and couldn't get it to work right. The content of the top left box has to be bigger than the top right or IE chokes. The only way I could get it to work without dying was to swap your top left content with your top right content. I know not the best solution but thats the only thing that worked for IE.



    I will assume this is about FF breaking the text when it runs over the #bottom box.
    Code:
    #bottom {
    
    clear: both;
    
    float: left;
    
    width: 100%;
    
    position: relative;
    
    /*-- Needed to fix some weird FF stuff --*/
    
    height: 1px;
    overflow: visible;
    }


    You can in FF but not IE. I tried the Tanhack but couldn't get it to work right. So I addedin some IE stuff for the h2 of the middle column. It appears that when you resize the text on IE it doesn't resize header text. Thats a god thing in this case.

    Code:
    * html #center {
    width: 39%;
    }
    * html #center h2 {
    width: 360px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -180px;
    }
    * html #center p {
    margin-top: 38px;
    }
    It simmulates what FF does right.

    the whole thing:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
    
    Strict//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; 
    
    charset=ISO-8859-1" />
    <style type="text/css">
    * {
    
      padding: 0px;
      margin: 0px;
    
    }
    
    #pageContainer {
    
      width: 888px;
    margin: 0 auto;
    background-color: #ADC3C9;
    }
    
    #banner {
    
      background: #fc3 url('images/banner.gif');
      width: 888px;
      height: 208px;
      margin-top: 5px;
     position: relative;
    
    }
    
    #login {
    
      position: absolute;
      bottom: 10px;
      right: 10px;
    
    }
    
    #password {
    
      margin-left: 20px;
    
    }
    
    
    
    
    .left {
    
    float: left;
    
    width: 30%;
    
    position: relative;
    }
    
    
    .right {
    
    float: right;
    
    
    width: 30%;
    
    position: relative;
    
    }
    
    
    #bottom {
    
    clear: both;
    
    float: left;
    
    width: 100%;
    
    position: relative;
    
    /*-- Needed to fix some weird FF stuff --*/
    
    height: 1px;
    overflow: visible;
    }
    
    
    h2 {
    
    width: 100%;
    
    background-color: #57839F;
    
    border-bottom: 1px solid #FFFFFF;
    
    text-align: center;
    
    color: #ffffff;
    
    font-size: 12pt;
    
    padding-top: 5px;
    
    padding-bottom: 5px;
    }
    
    
    p {
    
    margin: 6px;
    
    color: #465768;
    
    font-weight: bold;
    
    
    
    }
    
    
    #center {
    
    position: relative;
    
    margin: 0 auto;
    
    width: 40%;
    
    z-index: 100;
    
    }
    * html #center {
    width: 39%;
    }
    * html #center h2 {
    width: 360px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -180px;
    }
    * html #center p {
    margin-top: 38px;
    }
    
    
    
    		
    </style>
    </head>
    <body>
    <div id="pageContainer">
    <div id="banner">
    <div id="login"><input type="text" name="username" 
    
    size="10"></input><input id="password" type="text" 
    
    name="username" size="10"></input></div>
    </div>
    <div class="left">
    <h2>COBS Calendar</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing 
    
    elit. Donec et urna. Nullam a diam aliquam 
    
    odio viLorem ipsum dolor sit amet, consectetuer 
    
    adipiscing elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, felis. Quisque hendrerit interdum 
    
    elit.verra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, felis. Quisque hendrerit interdum 
    
    elit.
    </p>
    </div>
    <div class="right">
    <h2>Around Campus</h2>
    <p>
    <img src="images/bullet.gif" alt="" />  Job 
    
    Opportunities<br />
    <img src="images/bullet.gif" alt="" />  Internship 
    
    Opportunities<br />
    <img src="images/bullet.gif" alt="" />  Listings<br />
    </p>
    </div>
    <div id="bottom">
    <div class="left">
    <h2>Contact Us</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing 
    
    elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, felis. Quisque hendrerit interdum 
    
    elit.
    </p>
    </div>
    <div class="right">
    <h2>COBS Forum</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing 
    
    elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, felis. Quisque hendrerit interdum 
    
    elit. Donec et urna. Nullam a diam aliquam odio 
    
    viverra interdum. Proin placerat. Praesent 
    
    quam. Vestibulum cursus urna in neque. Sed turpis 
    
    erat, tristique et, cursus sit amet, 
    
    tristique nec, felis. Quisque hendrerit interdum elit.
    </p>
    </div>
    </div>
    <div id="center">
    <h2>The Chronicle</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing 
    
    elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, Lorem ipsum dolor sit amet, consectetuer 
    
    adipiscing elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    Lorem ipsum dolor sit amet, consectetuer adipiscing 
    
    elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, felis. Quisque hendrerit interdum 
    
    elit. Donec et urna. Nullam a diam aliquam odio 
    
    viverra interdum. Proin placerat. Praesent 
    
    quam. Vestibulum cursus urna in neque. Sed turpis 
    
    erat, tristique et, cursus sit amet, 
    
    tristique nec, felis. Quisque hendrerit interdum 
    
    elit.Lorem ipsum dolor sit amet, consectetuer 
    
    adipiscing elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, felis. Quisque hendrerit interdum 
    
    elit. Donec et urna. Nullam a diam aliquam odio 
    
    viverra interdum. Proin placerat. Praesent 
    
    quam. Vestibulum cursus urna in neque. Sed turpis 
    
    erat, tristique et, cursus sit amet, 
    
    tristique nec, felis. Quisque hendrerit interdum 
    
    elit.Lorem ipsum dolor sit amet, consectetuer 
    
    adipiscing elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, felis. Quisque hendrerit interdum 
    
    elit. Donec et urna. Nullam a diam aliquam odio 
    
    viverra interdum. Proin placerat. Praesent 
    
    quam. Vestibulum cursus urna in neque. Sed turpis 
    
    erat, tristique et, cursus sit amet, 
    
    tristique nec, felis. Quisque hendrerit interdum elit.
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, felis. Quisque hendrerit interdum 
    
    elit. Donec et urna. Nullam a diam aliquam odio 
    
    viverra interdum. Proin placerat. Praesent 
    
    quam. Vestibulum cursus urna in neque. Sed turpis 
    
    erat, tristique et, cursus sit amet, 
    
    tristique nec, felis. Quisque hendrerit interdum 
    
    elit.felis. Quisque hendrerit interdum 
    
    elit. Donec et urna. Nullam a diam aliquam odio 
    
    viverra interdum. Proin placerat. Praesent 
    
    quam. Vestibulum cursus urna in neque. Sed turpis 
    
    erat, tristique et, cursus sit amet, 
    
    tristique nec, felis. Quisque hendrerit interdum 
    
    elit.</p>
    </div>
    <div style="clear:both;width: 888px; height: 20px; 
    
    background: #fc3;"></div>
    
    </div>
    </body>
    </html>
    a little hacky but...

    I have never tried to do what your wanting before so this still may not be 100% foolproof.

  • #9
    Regular Coder
    Join Date
    Sep 2004
    Location
    USA
    Posts
    314
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Ugh, I'm so stupid

    How did I manage to mess it up in IE already?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
    
    Strict//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; 
    
    charset=ISO-8859-1" />
    <style type="text/css">
    * {
    
      padding: 0px;
      margin: 0px;
    
    }
    
    #pageContainer {
    
    width: 888px;
    margin: 0 auto;
    background-color: #ADC3C9;
    }
    
    #banner {
    
    background: #f4f4f4 url('images/banner.gif');
    background-repeat: no-repeat;
    width: 888px;
    height: 208px;
    margin-top: 5px;
    position: relative;
    
    }
    
    #login {
    
      position: absolute;
      bottom: 13px;
      right: 60px;
    
    }
    
    #password {
    
      margin-left: 20px;
    
    }
    
    
    
    
    .left {
    
    float: left;
    
    width: 30%;
    
    position: relative;
    }
    
    
    .right {
    
    float: right;
    
    
    width: 30%;
    
    position: relative;
    
    }
    
    
    #bottom {
    
    clear: both;
    
    float: left;
    
    width: 100%;
    
    position: relative;
    
    /*-- Needed to fix some weird FF stuff --*/
    
    height: 1px;
    overflow: visible;
    }
    
    
    h2 {
    
    width: 100%;
    
    background-color: #57839F;
    
    border-bottom: 1px solid #FFFFFF;
    
    text-align: center;
    
    color: #ffffff;
    
    font-size: 12pt;
    
    padding-top: 5px;
    
    padding-bottom: 5px;
    }
    
    
    p {
    
    margin: 6px;
    
    color: #465768;
    
    font-weight: bold;
    
    
    
    }
    
    
    #center {
    
    position: relative;
    
    margin: 0 auto;
    
    width: 40%;
    
    z-index: 100;
    
    }
    * html #center {
    width: 39%;
    }
    * html #center h2 {
    width: 360px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -180px;
    }
    * html #center p {
    margin-top: 38px;
    }
    
    #tl {background-image:url('images/tl.gif');background-repeat:no-repeat;}
    
    #tr {background-image:url('images/tr.gif');background-repeat:no-repeat;background-position:right;}
    
    
    		
    </style>
    </head>
    <body>
    <div id="pageContainer">
    <div id="banner">
    <div id="login"><input type="text" name="username" 
    
    size="10"></input><input id="password" type="text" 
    
    name="username" size="10"></input></div>
    </div>
    <div class="left">
    
    <h2 id="tl">Around Campus</h2>
    <p>
    <img src="images/bullet.gif" alt="" />  Job 
    
    Opportunities<br />
    <img src="images/bullet.gif" alt="" />  Internship 
    
    Opportunities<br />
    <img src="images/bullet.gif" alt="" />  Listings<br />
    </p>
    </div>
    <div class="right">
    
    <h2 id="tr">COBS Calendar</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing 
    
    elit. Donec et urna. Nullam a diam aliquam 
    
    odio viLorem ipsum dolor sit amet, consectetuer 
    
    adipiscing elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, felis. Quisque hendrerit interdum 
    
    elit.verra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, felis. Quisque hendrerit interdum 
    
    elit.
    </p>
    </div>
    
    
    
    <div id="bottom">
    <div class="left">
    <h2>Contact Us</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing 
    
    elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, felis. Quisque hendrerit interdum 
    
    elit.
    </p>
    </div>
    <div class="right">
    <h2>COBS Forum</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing 
    
    elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, felis. Quisque hendrerit interdum 
    
    elit. Donec et urna. Nullam a diam aliquam odio 
    
    viverra interdum. Proin placerat. Praesent 
    
    quam. Vestibulum cursus urna in neque. Sed turpis 
    
    erat, tristique et, cursus sit amet, 
    
    tristique nec, felis. Quisque hendrerit interdum elit.
    </p>
    </div>
    </div>
    <div id="center">
    <h2>The Chronicle</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing 
    
    elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, Lorem ipsum dolor sit amet, consectetuer 
    
    adipiscing elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    Lorem ipsum dolor sit amet, consectetuer adipiscing 
    
    elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, felis. Quisque hendrerit interdum 
    
    elit. Donec et urna. Nullam a diam aliquam odio 
    
    viverra interdum. Proin placerat. Praesent 
    
    quam. Vestibulum cursus urna in neque. Sed turpis 
    
    erat, tristique et, cursus sit amet, 
    
    tristique nec, felis. Quisque hendrerit interdum 
    
    elit.Lorem ipsum dolor sit amet, consectetuer 
    
    adipiscing elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, felis. Quisque hendrerit interdum 
    
    elit. Donec et urna. Nullam a diam aliquam odio 
    
    viverra interdum. Proin placerat. Praesent 
    
    quam. Vestibulum cursus urna in neque. Sed turpis 
    
    erat, tristique et, cursus sit amet, 
    
    tristique nec, felis. Quisque hendrerit interdum 
    
    elit.Lorem ipsum dolor sit amet, consectetuer 
    
    adipiscing elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, felis. Quisque hendrerit interdum 
    
    elit. Donec et urna. Nullam a diam aliquam odio 
    
    viverra interdum. Proin placerat. Praesent 
    
    quam. Vestibulum cursus urna in neque. Sed turpis 
    
    erat, tristique et, cursus sit amet, 
    
    tristique nec, felis. Quisque hendrerit interdum elit.
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, felis. Quisque hendrerit interdum 
    
    elit. Donec et urna. Nullam a diam aliquam odio 
    
    viverra interdum. Proin placerat. Praesent 
    
    quam. Vestibulum cursus urna in neque. Sed turpis 
    
    erat, tristique et, cursus sit amet, 
    
    tristique nec, felis. Quisque hendrerit interdum 
    
    elit.felis. Quisque hendrerit interdum 
    
    elit. Donec et urna. Nullam a diam aliquam odio 
    
    viverra interdum. Proin placerat. Praesent 
    
    quam. Vestibulum cursus urna in neque. Sed turpis 
    
    erat, tristique et, cursus sit amet, 
    
    tristique nec, felis. Quisque hendrerit interdum 
    
    elit.</p>
    </div>
    <div style="clear:both;width: 888px; height: 20px; 
    
    background: #f4f4f4;"></div>
    
    </div>
    </body>
    </html>

  • #10
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    It's not reall ymessed up. Like I said though. The left top box HAS to be taller than the right top box. If you don't want to swap them around in your html you can add:

    Code:
    <div class="left">
    
    <h2 id="tl">Around Campus</h2>
    <p>
    <img src="images/bullet.gif" alt="" />  Job 
    
    Opportunities<br />
    <img src="images/bullet.gif" alt="" />  Internship 
    
    Opportunities<br />
    <img src="images/bullet.gif" alt="" />  Listings<br />
    </p>
    <p style="height:240px;"></p>
    </div>
    you'll have to adjust it everytime the text in the right top box gets too long though. i know it's a paing but it's all I've been able to come up with so far.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #11
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    well snag #2 (?). in FF if the center content isn't longer than the bottom sideboxes content it chokes. Since the height is set to 1px and the overflow is visible, the overflowing content doesn't actually have the height of it's content. so even though the content is visible, it's officially 1px high. I haven't a clue how to fix that issue. I love how solving one fault laeds to another

    but if you like hacky pages I have found a way to make IE play along with the left top content being shorter than the right top content. If your using php for this page you can use includes to write in all the content text thus not actually having to write it twice. You'll see what I mean:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
    
    Strict//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; 
    
    charset=ISO-8859-1" />
    <style type="text/css">
    * {
    
      padding: 0px;
      margin: 0px;
    
    }
    
    #pageContainer {
    
    width: 888px;
    margin: 0 auto;
    background-color: #ADC3C9;
    }
    
    #banner {
    
    background: #f4f4f4 url('images/banner.gif');
    background-repeat: no-repeat;
    width: 888px;
    height: 208px;
    margin-top: 5px;
    position: relative;
    
    }
    
    #login {
    
      position: absolute;
      bottom: 13px;
      right: 60px;
    
    }
    
    #password {
    
      margin-left: 20px;
    
    }
    
    
    
    
    .left {
    
    float: left;
    clear: left;
    width: 30%;
    
    position: relative;
    }
    
    
    .right {
    
    float: right;
    clear: right;
    
    width: 30%;
    
    position: relative;
    
    
    }
    
    
    #bottom[id] {
    
    clear: both;
    float: left;
    
    width: 100%;
    
    position: relative;
    /*-- Needed to fix some weird FF stuff --*/
    
    height: 1px;
    overflow: visible;
    }
    
    
    h2 {
    
    width: 100%;
    
    background-color: #57839F;
    
    border-bottom: 1px solid #FFFFFF;
    
    text-align: center;
    
    color: #ffffff;
    
    font-size: 12pt;
    
    padding-top: 5px;
    
    padding-bottom: 5px;
    }
    
    p {
    
    margin: 10px;
    
    color: #465768;
    
    font-weight: bold;
    
    
    
    }
    
    
    
    #center[id] {
    
    position: relative;
    
    margin: 0 auto;
    
    width: 40%;
    
    z-index: 100;
    
    }
    
    #tl {background-image:url('images/tl.gif');background-repeat:no-repeat;}
    
    #tr {background-image:url('images/tr.gif');background-repeat:no-repeat;background-position:right;}
    
    #content[id] {
    display: none;
    }
    /* -- ie funny stuff --*/
    
    * html .holder {
    clear: left;
    width: 100%;
    float: left;
    position: relative;
    }
    * html .holder1 {
    clear: left;
    width: 100%;
    float: left;
    position: relative;
    }
    * html #content {
    width: 888px;
    position: relative;
    z-index: 10;
    height: 1px;
    float: right;
    overflow: visible;
    }
    * html #content h2 {
    width: 359px;
    position: relative;
    margin: 0 auto;
    }
    * html #content p {
    width: 359px;
    position: relative;
    margin: 0 auto;
    height: auto;
    }
    * html #content p span {
    margin: 10px;
    position: relative;
    display: block;
    }
    * html #center {
    display: none;
    }
    /* --end stupid ie stuff --*/
    
    #foot {
    width: 888px;
    height: 140px;
    background: #fc9;
    clear: both;
    position: relative;
    margin: 0 auto;
    }		
    </style>
    </head>
    <body>
    <div id="pageContainer">
    <div id="banner">
    <div id="login"><input type="text" name="username" 
    
    size="10"></input><input id="password" type="text" 
    
    name="username" size="10"></input></div>
    </div>
    
    <div id="content">
    <div id="inner">
    
    <h2>The Chronicle</h2>
    <p>
    
    <span>
    Nullam a diam aliquam odio viverra interdum. Proin placerat. Praesent quam... Vestibulum cursus urna in neque. Sed Lorem ipsum dolor sit amet, consectetuer adipiscing dipiscing eNullam a diam aliquam odio viverra interdum. Prodipiscing eNullam a diam aliquam odio viverra interdum. Proin placerat. Praesent quam. Vestibulum cursus urnaNuNullam a diam aliquam odio viverra interdum. Proindipiscing eNullamolor sit amet, consectetuer adipiscing eNullam a diam aliquam odio viverra interdum. Proin placerat. Praesent quam. Vestibulum cursus urna in neque. Sed Lorem ipsum dol placerat. Praesent quam. Vestibulum cursus urna in neque. Sed Lorem ipsum dolor sit amet, consectetuer adipiscing eNullam a diam aliquam odio viverra interdum. Proin placerat. Praesent quam. Vestibulum cursus urna in neque. Sed Lorem ipsum dolin placerat. Praesent quam. Vestibulum cursus urnaNuNullam a diam aliquam odio viverra interdum. Proin placerat. Praesent quam. Vestibulum cursus urna in neque. Sed Lorem ipsum dolor sit amet, consectetuer adipiscing eNullam a diam aliquam odio viverra interdum. Proin placerat. Praesent quam. Vestibulum cursus urna in neque. Sed Lorem ipsum doleNullam a diam aliquam odio viverra interdum. Proin placerat. Praesent quam. Vestibulum cursus urnaNudipiscing eNullam a diam aliquam odio viverra interdum. Proin placerat. Praesent quam. Vestibulum cursus urnaNuNullam a diam aliquam odio viverra interdum. Proin placerat. Praesent quam. Vestibulum cursus urna in neque. Sed Lorem ipsum dolor sit amet, consectetuer adipiscing eNullam a diam aliquam odio viverra interdum. Proin placerat. Praesent quam. Vestibulum cursus urna in neque. Sed Lorem ipsum dolNullam a diam aliquam odio viverra interdum. Proin placerat. Praesent quam. Vestibulum cursus urna in neque. Sed Lorem ipsum dolor sit amet, consectetuer adipiscing eNullam a diam aliquam odio viverra interdum. Proin placerat. Praesent quam. Vestib a diam aliquam odio viverra interdum. Proin placerat. Praesent quam. Vestibulum cursus urnaNuNullam a diam aliquam odio viverra interdum. Proin placerat. Praesent quam. Vestibulum cursus urna in neque. Sed Lorem ipsum dulum cursus urna in neque. Sed Lorem ipsum dolor 
    </span></p>
    <div style="clear:both;width: 888px; height: 20px; 
    background: transparent"></div>
    </div>
    </div>
    <div class="holder">
    
    <div class="left">
    
    <h2 id="tl">Around Campus</h2>
    <p>
    
    <img src="images/bullet.gif" alt="" />  Job 
    
    Opportunities<br />
    <img src="images/bullet.gif" alt="" />  Internship 
    
    Opportunities<br />
    <img src="images/bullet.gif" alt="" />  Listings<br />
    </p>
    
    </div>
    <div class="right">
    
    <h2 id="tr">COBS Calendar</h2>
    <p>
    
    Lorem ipsum dolor sit amet, consectetuer adipiscing 
    
    elit. Donec et urna. Nullam a diam aliquam 
    
    odio viLorem ipsum dolor sit amet, consectetuer 
    
    adipiscing elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, felis. Quisque hendrerit interdum 
    
    elit.verra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, felis. Quisque hendrerit interdum 
    
    elit.
    </p>
    </div>
    
    </div>
    
    
    <div class="holder1">
    <![if ! IE]><div id="bottom"><![endif]>
    <div class="left">
    <h2>Contact Us</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing 
    
    elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, felis. Quisque hendrerit interdum 
    
    elit.
    </p>
    </div>
    <div class="right">
    
    <h2>COBS Forum</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing 
    
    elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, felis. Quisque hendrerit interdum 
    
    elit. Donec et urna. Nullam a diam aliquam odio 
    
    viverra interdum. Proin placerat. Praesent 
    
    quam. Vestibulum cursus urna in neque. Sed turpis 
    
    erat, tristique et, cursus sit amet, 
    
    tristique nec, felis. Quisque hendrerit interdum elit.
    </p>
    </div>
    <![if ! IE]></div><![endif]>
    <div id="center">
    <h2>The Chronicle</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing 
    
    elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, Lorem ipsum dolor sit amet, consectetuer 
    
    adipiscing elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra i
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, Lorem ipsum dolor sit amet, consectetuer 
    
    adipiscing elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    Lorem ipsum dolor sit amet, consectetuer adipiscing 
    
    elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
     
    
    erat, tristique et, cursus sit amet, 
    
    tristique nec, felis. Quisque hendrerit interdum 
    
    elit.felis. Quisque hendrerit interdum 
    
    elit. Donec et urna. Nullam a diam aliquam odio 
    
    viverra interdum. Proin placerat. Praesent 
    
    quam. Vestibulum cursus urna in neque. Sed turpis 
    
    erat, tristique et, cursus sit amet, 
    nterdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    Lorem ipsum dolor sit amet, consectetuer adipiscing 
    
    elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
     
    
    erat, tristique et, cursus sit amet, 
    
    tristique nec, felis. Quisque hendrerit interdum 
    
    elit.felis. Quisque hendrerit interdum 
    
    elit. Donec et urna. Nullam a diam aliquam odio 
    
    viverra interdum. Proin placerat. Praesent 
    
    quam. Vestibulum cursus urna in neque. Sed turpis 
    
    erat, tristique et, cursus sit amet, 
     cursus urna in neque. Sed 
    
    turpis erat, tristique et, cursus sit amet, tristique 
    
    nec, Lorem ipsum dolor sit amet, consectetuer 
    
    adipiscing elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
    
    Vestibulum cursus urna in neque. Sed 
    Lorem ipsum dolor sit amet, consectetuer adipiscing 
    
    elit. Donec et urna. Nullam a diam aliquam 
    
    odio viverra interdum. Proin placerat. Praesent quam. 
     
    
    erat, tristique et, cursus sit amet, 
    
    tristique nec, felis. Quisque hendrerit interdum 
    
    elit.felis. Quisque hendrerit interdum 
    
    elit. Donec et urna. Nullam a diam aliquam odio 
    
    viverra interdum. Proin placerat. Praesent 
    
    quam. Vestibulum cursus urna in neque. Sed turpis 
    
    erat, tristique et, cursus sit amet, 
    
    tristique nec, felis. Quisque hendrerit interdum 
    
    elit.</p>
    </div>
    
    </div>
    
    <![if ! IE]>
    <div style="clear:both;width: 888px; height: 20px; 
    background: transparent;"></div>
    <![endif]>
    
    </div>
    
    <div id="foot"></div>
    </body>
    </html>
    using the fact that IE doesn't do overflow corectly you can make the middle content actually sit above the rest of the page and have the overflow set to visible. It shouldn't work like that but thats IE for you. It works the same way the bottom boxes do. Since FF applies the overflow correctly (like I wrote above) if you use this method for FF the footer WILL NOT work. Since the overflowing text is just text FF will not clear it. The containing div is only 1px high and thats all FF will look at.

    I would not use this method. It's buggy and hacky as all get out.

    The only way this will work in bith is if you design your page with a background color. You could take out all the ie hacks and make both browsers use the same code that IE uses. The footer for the page would be set in the bottom of the middle content. You could then give each of the paragraphs a background color and the middle column as well. you can't give the container a background color since only IE will sretch the container to fit.

    Make any sense?
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #12
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    alright here we go. I've tested this on IE6 , FF and Opera 8. It may be a little buggy but I think it works.
    I'll post up the css first and try to do aplay by play. This works with IEs not handling the 1px and overflow thing correctly but tricks Opera and FF to make it look the way IE handles it. When you get to doing the graphics it will be tricky so I'm warniong you now this might be difficult to implement.

    the css:

    Code:
    * {
    padding: 0;
    margin: 0;
    }
    the default nix on the padding/margins

    Code:
    #outer {
    width: 888px;
    position: relative;
    margin: 0 auto;
    background: #cc6;
    }
    the container div. the background color will be repeated through out the css and will be important to hide the second footer needed for FF and Opera to emulate IE's bahavior

    Code:
    .box {
    width: 888px;
    overflow:auto;
    z-index: 2;
    float: left;
    clear: both;
    position: relative;
    }
    this willcontain the floated boxes and allow them to stay even in IE. DO NOT give this a background color that IE can see. It will choke.

    Code:
    .box[class] {
    background: #cc6;
    }
    This gives the background color to the box and Opera and FF handle it correctly.

    Code:
    .left {
    float: left;
    clear: left;
    width: 300px;
    background: #fc3;
    position: relative;
    margin-bottom: 10px;
    }
    your left boxes.

    Code:
    .right {
    float: right;
    clear: right;
    width: 300px;
    background: #fc3;
    position: relative;
    margin-bottom: 10px;
    }
    Your right boxes

    Code:
    p {
    margin: 11px;
    }
    you know what that does

    Code:
    #content {
    width: 888px;
    position: relative;
    height: 1px;
    float: right;
    overflow: visible;
    }
    This is where the fun stuff comes in. By giving it a 1px height and an overflow visible, the text contained with in will slide in between the left and right boxes without pushing them down.

    Code:
    #content #inner {
    width: 100%;
    height: auto;
    background: #cc6;
    }
    Since the #content is only 1px tall, FF and Opera will not stretch the #content so another inner div is needed to apply the background color as the page expands. this div and the background color will hide the 'real' footer as the page expands.

    Code:
    #content #inner p {
    background: #666;
    color: #ddd;
    width: 200px;
    position: relative;
    margin: 0 auto;
    height: auto;
    z-index: 11;
    }
    the z-index is important so that the paragraphs sits above the background-color of the .box.

    Code:
    .foot {
    height:200px; 
    width:888px;
    background:#33c;
    clear:both;
    }
    the footer. It will be repeated twice. Using php you can just use an include to write in all the content into both footers. The way they work is this. The last footer in the html will not follow the content down in FF and Opera. It will in IE. so the first footer will be wrapped in a conditional comment to hide it from IE. As the content stretches down it will simply cover up the footer at the bottom of the html code in FF and Opera. IE will just slide it down.

    thats the trick

    The whole shebang. Erase and add text and see if it glitches out on you at all.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; 
    
    charset=ISO-8859-1" />
    <style type="text/css">
    * {
    padding: 0;
    margin: 0;
    }
    #outer {
    width: 888px;
    position: relative;
    margin: 0 auto;
    background: #cc6;
    }
    .box {
    width: 888px;
    overflow:auto;
    z-index: 2;
    float: left;
    clear: both;
    position: relative;
    }
    .box[class] {
    background: #cc6;
    }
    .left {
    float: left;
    clear: left;
    width: 300px;
    background: #fc3;
    position: relative;
    margin-bottom: 10px;
    }
    .right {
    float: right;
    clear: right;
    width: 300px;
    background: #fc3;
    position: relative;
    margin-bottom: 10px;
    }
    p {
    margin: 11px;
    }
    #content {
    width: 888px;
    position: relative;
    height: 1px;
    float: right;
    overflow: visible;
    }
    #content #inner {
    width: 100%;
    height: auto;
    background: #cc6;
    }
    #content #inner p {
    background: #666;
    color: #ddd;
    width: 200px;
    position: relative;
    margin: 0 auto;
    height: auto;
    z-index: 11;
    }
    .foot {
    height:200px; 
    width:888px;
    background:#33c;
    clear:both;
    }
    </style>
    </head>
    <body>
    
    <div id="outer">
    <div id="content">
    <div id="inner">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    
    Nulla congue venenatis felis. Proin vehicula scelerisque 
    
    dolor. Aenean rhoncus. Vestibulum ante ipsum primis in 
    
    faucibus orci luctus et ultrices posuere ipsum dolor sit 
    
    amet, consectetuer adipiscing elit. Nulla congue venenatis 
    </p>
    </div>
    
    <![if ! IE]>
    <div class="foot"></div>
    <![endif]>
    
    </div>
    <div class="box">
    <div class="left">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    
    Nulla congue venenatis felis. Proin vehicula scelerisque 
    
    dolor. Aenean rhoncus. Vestibulum ante ipsum primis in 
    
    faucibus orci luctus et ultrices posuere cubilia Curae; 
    
    Morbi semper fermentum lectus. Maecenas ornare nunc ut 
    
    tortor. Aliquam tempus. Integer malesuada justo non neque. 
    
    Duis eget mauris interdum risus pretium venenatis. Nunc sed 
    
    tellus. Donec elit. Duis tincidunt fringilla elit.
    </p>
    </div>
    <div class="right">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    
    Nulla congue venenatis felis. Proin vehicula scelerisque 
    
    dolor. Aenean rhoncus. Vestibulum ante ipsum primis in 
    
    Nulla congue venenatis felis. Proin vehicula scelerisque 
    
    dolor. Aenean rhoncus. Vestibulum ante ipsum primis in 
    
    faucibus orci luctus et ultrices posuere cubilia Curae; 
    
    Morbi semper fermentum lectus. Maecenas ornare nunc ut 
    
    tortor. Aliquam tempus. Integer malesuada justo non neque. 
    
    Duis eget mauris interdum risus pretium venenatis. Nunc sed 
    
    tellus. Donec elit. Duis tincidunt fringilla elit. Maecenas 
    
    ornare nunc ut tortor. Aliquam tempus. Integer malesuada 
    
    justo non neque. Duis eget mauris interdum risus pretium 
    
    venenatis. Nunc sed tellus. Donec elit. Duis tincidunt
    </p>
    </div>
    </div>
    <div class="box">
    <div class="left">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    
    Nulla congue venenatis felis. Proin vehicula scelerisque 
    
    dolor. Aenean rhoncus. Vestibulum ante ipsum primis in 
    
    faucibus orci luctus et ultrices posuere cubilia Curae; 
    
    Morbi semper fermentum lectus. Maecenas ornare nunc ut 
    
    tortor. Aliquam tempus. Integer malesuada justo non neque. 
    
    Duis eget mauris interdum risus pretium venenatis. Nunc sed 
    
    tellus. Donec elit.
    </p>
    </div>
    <div class="right">
    <p>
    Donec elit. Duis tincidunt fringilla elit. Maecenas ornare 
    
    nunc ut tortor. Aliquam tempus. Integer malesuada justo non 
    
    neque. Duis eget mauris interdum risus pretium venenatis. 
    
    Nunc sed tellus. Donec elit. Duis tincidunt fringilla elit
    </p>
    </div>
    </div>
    <div class="foot"></div>
    </div>
    </body>
    </html>
    the one thing I haven't got to work is the bottom-margin on the left and right boxes. If you give a margin to .box then FF and Opera dont work right. All the browsers handle the margin-bottom for the .left and .right divs differently.

    Edit: It will not validate because of the conditional comment.
    Last edited by harbingerOTV; 01-04-2006 at 04:44 AM.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #13
    Regular Coder
    Join Date
    Sep 2004
    Location
    USA
    Posts
    314
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thank you Harbinger, you have been so, so much help!

    I just have one more issue

    The middle column doesn't center in IE



    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
    
    Strict//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; 
    
    charset=ISO-8859-1" />
    <style type="text/css">
    * {
    
      padding: 0px;
      margin: 0px;
    
    }
    
    html {background-color: #FFF;}
    
    #pageContainer {
    
    width: 888px;
    margin: 0 auto;
    background-color: #ADC3C9;
    }
    
    #banner {
    
    background: #ffffff url('images/banner.gif');
    background-repeat: no-repeat;
    width: 888px;
    height: 208px;
    
    position: relative;
    
    }
    
    #login {
    
      position: absolute;
      bottom: 13px;
      right: 60px;
    
    }
    
    #password {
    
      margin-left: 20px;
    
    }
    
    
    
    
    .left {
    
    float: left;
    clear: left;
    width: 30%;
    position: relative;
    }
    
    
    .right {
    
    float: right;
    clear: right;
    
    width: 30%;
    position: relative;
    
    
    }
    
    
    #bottom[id] {
    
    clear: both;
    float: left;
    
    
    width: 100%;
    
    position: relative;
    /*-- Needed to fix some weird FF stuff --*/
    
    height: 1px;
    overflow: visible;
    }
    
    
    h2 {
    
    width: 100%;
    
    background-color: #57839F;
    
    border-bottom: 1px solid #FFFFFF;
    
    text-align: center;
    
    color: #ffffff;
    
    font-size: 12pt;
    
    padding-top: 5px;
    
    padding-bottom: 5px;
    }
    
    p {
    
    margin: 10px;
    
    color: #465768;
    
    font-weight: bold;
    
    font-size: 11pt;
    
    }
    
    
    
    #center[id] {
    
    position: relative;
    
    margin: 0 auto;
    
    width: 40%;
    
    text-align:center;
    
    z-index: 100;
    border-right: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    }
    
    #tl {background-image:url('images/tl.gif');background-repeat:no-repeat;}
    
    #tr {background-image:url('images/tr.gif');background-repeat:no-repeat;background-position:right;}
    
    #content[id] {
    display: none;
    }
    /* -- ie funny stuff --*/
    
    * html .holder {
    clear: left;
    width: 100%;
    float: left;
    position: relative;
    }
    * html .holder1 {
    clear: left;
    width: 100%;
    float: left;
    position: relative;
    }
    * html #content {
    width: 888px;
    position: relative;
    z-index: 10;
    height: 1px;
    float: right;
    overflow: visible;
    }
    * html #content h2 {
    width: 359px;
    position: relative;
    margin: 0 auto;
    }
    * html #content p {
    width: 359px;
    position: relative;
    margin: 0 auto;
    height: auto;
    }
    * html #content p span {
    margin: 10px;
    position: relative;
    display: block;
    }
    * html #center {
    display: none;
    }
    /* --end stupid ie stuff --*/
    
    #foot {
    width: 888px;
    height: 40px;
    background: #fff;
    clear: both;
    position: relative;
    background-image: url('images/footer.gif');
    background-repeat: no-repeat;
    margin: 0 auto;
    color: #465768;
    
    font-weight: bold;
    
    font-size: 11pt;
    
    text-align:center;
    
    vertical-align: center;
    }		
    
    
    #menu {background-color: #FFFFFF;height:60px;vertical-align:middle;}
    
    
    a:link { 
    color: #465768;
    font-family: arial;
    font-size: 10pt;
    font-weight: bold;
    	text-decoration: none;
    
    	}
    a:visited { 
    	color: #465768;
    font-family: arial;
    font-size: 10pt;
    font-weight: bold;
    	text-decoration: none;
    	}
    a:hover { 
    	color: #E8945C;
    	text-decoration: none;
    font-family: arial;
    font-size: 10pt;
    	}
    a:active { 
    color: #465768;
    
    font-weight: bold;
    font-family: arial;
    font-size: 10pt;
    	text-decoration: none;
    	}
    
    </style>
    </head>
    <body>
    <div id="pageContainer">
    <div id="banner">
    <div id="login"><input type="text" name="username" 
    
    size="10"></input><input id="password" type="text" 
    
    name="username" size="10"></input></div>
    </div>
    
    <div id="menu"><br /><a href="#">ABOUT</a> | <a href="#">CHRONICLE</a> | <a href="#">COBS FORUM</a> | <a href="#">COBS CALENDAR</a> | <a href="#">CONTACT US</a></div>
    
    <div id="content">
    <div id="inner">
    
    <h2>The Chronicle</h2>
    <p>
    
    <span>
    <span id="ce"><img src="images/cepic.gif" alt="" /></span>
    </span></p><p id="cemain">
    
    <img src="images/bullet.gif" alt="" />  Job 
    
    Opportunities<br /><br />
    <img src="images/bullet.gif" alt="" />  Internship 
    
    Opportunities<br /><br />
    
    <img src="images/bullet.gif" alt="" />  Listings<br />
    
    </p>
    <div style="clear:both;width: 888px; height: 20px; 
    background: transparent"></div>
    </div>
    </div>
    <div class="holder">
    
    <div class="left">
    
    <h2 id="tl">Around Campus</h2>
    <p>
    
    <img src="images/bullet.gif" alt="" />  Job 
    
    Opportunities<br /><br />
    
    <img src="images/bullet.gif" alt="" />  Internship 
    
    Opportunities<br /><br />
    <img src="images/bullet.gif" alt="" />  Listings<br />
    </p>
    
    </div>
    <div class="right">
    
    <h2 id="tr">COBS Calendar</h2>
    <p>
    
    <img src="images/bullet.gif" alt="" />  Career Fair<br /><br />
    
    <img src="images/bullet.gif" alt="" />  How Jesus Makes 
    Prophets On Wall ST
    Tuesday, 11/1/05
    
    
    
    </p>
    </div>
    
    </div>
    
    
    <div class="holder1">
    <![if ! IE]><div id="bottom"><![endif]>
    <div class="left">
    <h2>Contact Us</h2>
    <p>
    For more information <br />
    about COBS,please <br />
    
    e-mail us at info@cobs.net
    </p>
    </div>
    <div class="right">
    
    <h2>COBS Forum</h2>
    <p>
    <img src="images/bullet.gif" alt="" />  Who owns your education?...<br /></p>
    </div>
    <![if ! IE]></div><![endif]>
    <div id="center">
    <h2>The Chronicle</h2>
    <p>
    
    <span>
    <span id="ce"><img src="images/cepic.gif" alt="" /></span>
    </span></p><br /><p id="cemain">
    
    <img src="images/bullet.gif" alt="" />  Job 
    
    Opportunities<br /><br />
    <img src="images/bullet.gif" alt="" />  Internship 
    
    Opportunities<br /><br />
    <img src="images/bullet.gif" alt="" />  Listings<br />
    
    
    
    
    </p>
    </div>
    
    </div>
    
    <![if ! IE]>
    <div style="clear:both;width: 888px; height: 20px; 
    background: transparent;"></div>
    <![endif]>
    
    </div>
    
    <div id="foot"><br />Copyright &#169; 2005</div>
    </body>
    </html>

  • #14
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    It looks like you usede the first to last try I made at it. Don't. i's buggy. Too buggy to fix correctly. Use the last one. As far Ive played with it it seems to work fine. A little tricky and I can't get the side borders on the h2s to work right on both FF and IE6. I attached the background image to simulate the columns as well. Im not sure what your #ce and #cemain were. I took a stab and played #cemain to want centered text as pertaining to your question.

    If you look at my breakdown of thelayout that I did element by element you should be able to cipher what all the things do for each browser. There reallyonly 2 hacks and the one conditional comment so it shuld be workable.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; 
    
    charset=ISO-8859-1" />
    <style type="text/css">
    * {
    padding: 0;
    margin: 0;
    }
    body {
    color: #000;
    background-color: #fff;
    }
    
    #pageContainer {
    width: 888px;
    position: relative;
    margin: 0 auto;
    background-color: #ADC3C9;
    background: url(ribofill.jpg) top center repeat-y;
    }
    #banner {
    background: #fff url('images/banner.gif');
    background-repeat: no-repeat;
    width: 888px;
    height: 208px;
    margin: 0 auto;
    position: relative;
    }
    #login {
    position: absolute;
    bottom: 13px;
    right: 60px;
    }
    #password {
    margin-left: 20px;
    }
    #menu {
    background-color: #FFFFFF;
    height:60px;
    }
    
    
    a:link { 
    color: #465768;
    font-family: arial;
    font-size: 10pt;
    font-weight: bold;
    	text-decoration: none;
    
    	}
    a:visited { 
    	color: #465768;
    font-family: arial;
    font-size: 10pt;
    font-weight: bold;
    	text-decoration: none;
    	}
    a:hover { 
    	color: #E8945C;
    	text-decoration: none;
    font-family: arial;
    font-size: 10pt;
    	}
    a:active { 
    color: #465768;
    
    font-weight: bold;
    font-family: arial;
    font-size: 10pt;
    	text-decoration: none;
    	}
    .box {
    width: 888px;
    overflow:auto;
    z-index: 2;
    float: left;
    clear: both;
    position: relative;
    
    }
    .box[class] {
    background: #ADC3C9 url(ribofill.jpg) top center repeat-y;
    }
    .left {
    float: left;
    clear: left;
    width: 30%;
    background: transparent;
    position: relative;
    margin-bottom: 10px;
    }
    .right {
    float: right;
    clear: right;
    width: 30%;
    background: transparent;
    position: relative;
    margin-bottom: 10px;
    }
    p {
    margin: 11px;
    color: #465768;
    font-weight: bold;
    font-size: 11pt;
    }
    #content {
    width: 888px;
    position: relative;
    height: 1px;
    float: right;
    overflow: visible;
    }
    #content #inner {
    width: 100%;
    height: auto;
    background: #ADC3C9;
    background: url(ribofill.jpg) top center repeat-y;
    }
    #content #inner p {
    background: transparent;
    color: #465768;
    width: 330px;
    position: relative;
    margin: 10px auto 0 auto;
    height: auto;
    z-index: 11;
    }
    .foot {
    width: 888px;
    height: 40px;
    background: #fff;
    clear: both;
    position: relative;
    background-image: url('images/footer.gif');
    background-repeat: no-repeat;
    margin: 0 auto;
    color: #465768;
    font-weight: bold;
    font-size: 11pt;
    text-align:center;
    line-height: 40px;
    }
    
    h2 {
    width: 100%;
    background-color: #57839F;
    border-bottom: 1px solid #FFFFFF;
    text-align: center;
    color: #ffffff;
    font-size: 12pt;
    padding-top: 5px;
    padding-bottom: 5px;
    z-index: 11;
    position: relative;
    }
    .center[class] {
    position: relative;
    margin: 0 auto;
    z-index: 11;
    width: 40%;
    margin-top: 1px;
    }
    #cemain {
    text-align: center;
    }
    </style>
    </head>
    <body>
    
    <div id="pageContainer">
    <div id="banner">
    <div id="login"><input type="text" name="username" 
    
    size="10"></input><input id="password" type="text" 
    
    name="username" size="10"></input></div>
    </div>
    <div id="menu"><br /><a href="#">ABOUT</a> | <a href="#">CHRONICLE</a> | <a href="#">COBS 
    
    FORUM</a> | <a href="#">COBS CALENDAR</a> | <a href="#">CONTACT US</a></div>
    <div id="content">
    <div id="inner">
    <h2 class="center">The Chronicle</h2>
    <p>
    
    <span>
    <span id="ce"><img src="images/cepic.gif" alt="" /></span>
    </span></p><p id="cemain">
    
    <img src="images/bullet.gif" alt="" />  Job 
    
    Opportunities<br /><br />
    <img src="images/bullet.gif" alt="" />  Internship 
    
    Opportunities<br /><br />
    
    <img src="images/bullet.gif" alt="" />  Listings<br />
    </p>
    </div>
    
    <![if ! IE]>
    <div class="foot">copyright 2006</div>
    <![endif]>
    
    </div>
    <div class="box">
    <div class="left">
    <h2 class="hleft">Around Campus</h2>
    <p>
    <img src="images/bullet.gif" alt="" />  Job 
    
    Opportunities<br /><br />
    
    <img src="images/bullet.gif" alt="" />  Internship 
    
    Opportunities<br /><br />
    <img src="images/bullet.gif" alt="" />  Listings<br />
    </p>
    </div>
    <div class="right">
    <h2>COBS Calendar</h2>
    <p>
    
    <img src="images/bullet.gif" alt="" />  Career Fair<br /><br />
    
    <img src="images/bullet.gif" alt="" />  How Jesus Makes 
    Prophets On Wall ST
    Tuesday, 11/1/05
    </p>
    </div>
    </div>
    <div class="box">
    <div class="left">
    <h2>Contact Us</h2>
    <p>
    For more information 
    about COBS,please 
    e-mail us at info@cobs.net 
    
    </p>
    </div>
    <div class="right">
    <h2>COBS Forum</h2>
    <p>
    <img src="images/bullet.gif" alt="" />  Who owns your education?...<br />
    </p>
    </div>
    </div>
    <div class="foot">copyright 2006</div>
    </div>
    </body>
    </html>
    Attached Thumbnails Attached Thumbnails Keeping two floating divs aligned.-ribofill.jpg  
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #15
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    with the corrections I pm'd you about:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; 
    
    charset=ISO-8859-1" />
    <style type="text/css">
    * {
    padding: 0;
    margin: 0;
    }
    body {
    color: #000;
    background-color: #fff;
    }
    
    #pageContainer {
    width: 888px;
    position: relative;
    margin: 0 auto;
    background-color: #ADC3C9;
    background: url(images/ribofill.jpg) top 
    
    center repeat-y;
    }
    #banner {
    background: #fff url('images/banner.gif');
    background-repeat: no-repeat;
    width: 888px;
    height: 208px;
    margin: 0 auto;
    position: relative;
    }
    #login {
    position: absolute;
    bottom: 13px;
    right: 60px;
    }
    #password {
    margin-left: 20px;
    }
    #menu {
    background-color: #FFFFFF;
    height:60px;
    }
    
    
    a:link { 
    color: #465768;
    font-family: arial;
    font-size: 10pt;
    font-weight: bold;
    	text-decoration: none;
    
    	}
    a:visited { 
    	color: #465768;
    font-family: arial;
    font-size: 10pt;
    font-weight: bold;
    	text-decoration: none;
    	}
    a:hover { 
    	color: #E8945C;
    	text-decoration: none;
    font-family: arial;
    font-size: 10pt;
    	}
    a:active { 
    color: #465768;
    
    font-weight: bold;
    font-family: arial;
    font-size: 10pt;
    	text-decoration: none;
    	}
    .box {
    width: 888px;
    overflow:auto;
    z-index: 2;
    float: left;
    clear: both;
    position: relative;
    
    }
    .box[class] {
    background: #ADC3C9 
    
    url(images/ribofill.jpg) top center 
    
    repeat-y;
    }
    .left {
    float: left;
    clear: left;
    width: 30%;
    background: transparent;
    position: relative;
    margin-bottom: 10px;
    }
    .right {
    float: right;
    clear: right;
    width: 30%;
    background: transparent;
    position: relative;
    margin-bottom: 10px;
    }
    p {
    margin: 11px;
    color: #465768;
    font-weight: bold;
    font-size: 11pt;
    position: relative;
    }
    #content {
    width: 888px;
    position: relative;
    height: 1px;
    float: right;
    overflow: visible;
    }
    #content #inner {
    width: 100%;
    height: auto;
    background: #ADC3C9 
    
    url(images/ribofill.jpg) top center 
    
    repeat-y;
    }
    #content #inner p {
    background: transparent;
    color: #465768;
    width: 330px;
    position: relative;
    margin: 10px auto 0 auto;
    height: auto;
    z-index: 11;
    }
    .foot {
    width: 888px;
    height: 40px;
    background: #fff;
    clear: both;
    background-image: url('images/footer.gif');
    background-repeat: no-repeat;
    color: #465768;
    font-weight: bold;
    font-size: 11pt;
    text-align:center;
    line-height: 40px;
    }
    h2 {
    width: 100%;
    background-color: #57839F;
    border-bottom: 1px solid #FFFFFF;
    text-align: center;
    color: #ffffff;
    font-size: 12pt;
    padding-top: 5px;
    padding-bottom: 5px;
    z-index: 11;
    position: relative;
    }
    .center[class] {
    position: relative;
    margin: 0 auto;
    z-index: 11;
    width: 40%;
    margin-top: 1px;
    }
    #cemain {
    text-align: center;
    }
    #ce {
    margin: 0 auto;
    width: 194px;
    height: 145;
    display: block;
    }
    </style>
    </head>
    <body>
    
    <div id="pageContainer">
    <div id="banner">
    <div id="login"><input type="text" name="username" 
    
    size="10"></input><input id="password" type="text" 
    
    name="username" size="10"></input></div>
    </div>
    <div id="menu"><br /><a href="#">ABOUT</a> | <a href="#">CHRONICLE</a> 
    
    | <a href="#">COBS 
    
    FORUM</a> | <a href="#">COBS CALENDAR</a> | <a href="#">CONTACT 
    
    US</a></div>
    
    <div id="content">
    <div id="inner">
    <h2 class="center">The Chronicle</h2>
    <p>
    
    <span>
    <span id="ce"><img src="images/cepic.gif" 
    
    alt="" /></span>
    </span></p><p id="cemain">
    
    <img src="images/bullet.gif" alt="" />  Job 
    
    Opportunities<br /><br />
    <img src="images/bullet.gif" alt="" />  
    
    Internship 
    
    Opportunities<br /><br />
    
    <img src="images/bullet.gif" alt="" />  
    
    Listings<br />
    </p>
    </div>
    <![if ! IE]>
    <div class="foot">copyright 2006</div>
    <![endif]>
    
    
    </div>
    <div class="box">
    <div class="left">
    <h2 class="hleft">Around Campus</h2>
    <p>
    
    <img src="images/bullet.gif" alt="" />  Job 
    
    Opportunities<br /><br />
    
    <img src="images/bullet.gif" alt="" />  
    
    Internship 
    
    Opportunities<br /><br />
    <img src="images/bullet.gif" alt="" />  
    
    Listings<br />
    </p>
    
    </div>
    <div class="right">
    <h2>COBS Calendar</h2>
    <p>
    
    <img src="images/bullet.gif" alt="" />  
    
    Career Fair<br /><br />
    
    <img src="images/bullet.gif" alt="" />  How 
    
    Jesus Makes 
    Prophets On Wall ST
    Tuesday, 11/1/05
    </p>
    </div>
    </div>
    <div class="box">
    <div class="left">
    <h2>Contact Us</h2>
    <p>
    For more information 
    about COBS,please 
    e-mail us at info@cobs.net 
    
    </p>
    </div>
    
    <div class="right">
    <h2>COBS Forum</h2>
    <p>
    <img src="images/bullet.gif" alt="" />  Who 
    
    owns your education?...<br />
    </p>
    </div>
    </div>
    <div class="foot">copyright 2006</div>
    </div>
    </body>
    </html>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •