...

View Full Version : Keeping two floating divs aligned.



Riboflavin
12-29-2005, 08:53 PM
http://img518.imageshack.us/img518/5625/image6tx.th.jpg (http://img518.imageshack.us/my.php?image=image6tx.jpg)

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?

ecnarongi
12-29-2005, 09:29 PM
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?

Riboflavin
12-29-2005, 09:35 PM
Like I said, I haven't started coding yet, I want to plan it out before hand and need some help.

Masterslave
12-29-2005, 09:41 PM
Maybe this will help you:


<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:


#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.;)

harbingerOTV
12-30-2005, 01:44 AM
Good on FF - :thumbsup:
good on Opera - :thumbsup:
good on IE6 - :thumbsup:


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.)



<!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>

Riboflavin
01-02-2006, 05:54 AM
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:


* {

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:


<!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>

harbingerOTV
01-03-2006, 12:15 AM
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.


#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.



* 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:


<!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.

Riboflavin
01-03-2006, 12:40 AM
Pure genious, thank so much for your help!

By the way I nominated you for helpfull member :thumbsup:


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.


#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.



* 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:


<!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.

Riboflavin
01-03-2006, 12:49 AM
Ugh, I'm so stupid :rolleyes:

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


<!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>

harbingerOTV
01-03-2006, 01:49 AM
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:



<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.

harbingerOTV
01-03-2006, 02:25 PM
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:



<!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?

harbingerOTV
01-04-2006, 03:34 AM
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:


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


#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


.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.


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


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


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


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


#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.


#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.


#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.


.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.



<!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.

It will not validate because of the conditional comment.

Riboflavin
01-10-2006, 04:44 AM
Thank you Harbinger, you have been so, so much help!

I just have one more issue :o

The middle column doesn't center in IE :confused:




<!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>

harbingerOTV
01-10-2006, 06:34 AM
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.



<!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>

harbingerOTV
01-11-2006, 02:01 AM
with the corrections I pm'd you about:



<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum