CSS - Left, Floated Div Inside Of Right Div

hi

my page involves having a form element inside of a div. the div is floated left. relevant (seemingly) css from my stylesheet & html code (all simplified for readability)

form
{
margin: 0px;
padding: 0px;
}
.mydiv
{
float: left;
}

html looks vaguely like:

<div class="mydiv"><form name="blah" action="blahblah">
.... all form controls
</form></div>

PROBLEM!!!!

in mozilla, none of the form elements display.
in ie, everything displays as expected.

PLEASE HELP ME BEFORE I GO INSANE AND START KILLING INNOCENT PEOPLE.

thanks in advance.
d

Here's the site in Question: http://www.winchps.vic.edu.au

It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6.

Here's the CSS code for the basic layout:

Code:

body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}

#header {
width: 802px;
}

#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}

#content {
padding: 0px;
margin: 0px;
}

#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}

#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}

#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}

#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}

#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}

I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc).

Anyone got any ideas?

Hello,

I have two columns, one is on the left and another in the middle (center). Left column is where I want it to be, central column is also aligned properly, however, it is below left column. I want it to be on the same level as left.

See here

see how it got below ?

It is XHTML validated and CSS is fine too (some background color warnings).

Plz help me to make central column go up. Thanks.

I always seem to run into this problem and somehow get it fixed but this time I am stuck.

I have a main wrapper and 2 footers that line up together and are all floated to the left. I'm trying to put in a column to their right that runs vertical called "right", to be spaced out about 110 px from the top of the page so it sits vertically below the banner and the navs. I tried giving it a left margin to clear the floated DIV's but to no avail. You can see the page he http://yourthreshold.com/playground/ It seems to clear in Firefox but not in IE ..

The main CSS:

Code:

* {
 margin: 0;
 padding: 0;
}

body {
margin:0;
padding:0;
background-color:#e5e5e5;
}

#wrapper {
width: 640px;
height: 720px;
margin-left:0;
margin-top:0;
border: 2px solid gray;
border-bottom: 0px solid gray;
background-image:url(../images/banner.jpg);
background-repeat:no-repeat;
background-color:#c0c0c0;
float:left;
}

	#navigation {
	width: 640px;
	height: 22px;
	background-color:#c9c9c9;
	margin-top: 88px;
	}
	
	#insidewrapper {
	height:auto;
	width:99%;
	margin: 6px 1px 4px 1px;
	}

		/* Begin Left Side Info Boxes */
		#sidebar {
		width:150px;
		height:600px;
		margin-left:2px;
		float:left;
		border:1px solid #666666;
		border-bottom:0px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:9px;
		color:#666666;
		background-color:#ffffff;
		}
		
			.infobox {
			height:123px;
			font:Verdana, Arial, Helvetica, sans-serif;
			font-size:9px;
			padding:3px;
			border-top:0px;
			border-left:0px;
			border-right:0px;
			}
				.infopic {
				margin-top:9px;
				}
				
			.infobutton {
			height:20px;
			border-bottom:1px solid #666666;
			padding-left:3px;
			}
				
		/* Begin Main Content */
		#maincontent {
		width:465px;
		height:593px;
		margin-left:158px;
		border:1px solid;
		border-color:#666666;
		font:Verdana, Arial, Helvetica, sans-serif;
		font-size:12px;
		color:#333333;
		padding:3px;
		background-image:url(../images/background_trans2.gif);
		background-repeat:no-repeat;
		background-position:center;
		background-color:#ffffff;
		}
			/* Main Content for pages with textual content */
			#content {
			width:97%;
			height:auto;
			padding:5px;
			}

			/* Main Content for pages with products */
			#productWrapper {
			height:auto;
			width:100%;
			margin-top:10px;
			}
			
			#productLeft {
			height:auto;
			width:115px;
			float:left;
			}
			
			#productMiddle {
			height:auto;
			width:200px;
			margin-left:1px;
			float:left;
			}
			
			#productRight {
			height:auto;
			width:auto;
			}
	
	/* Begin Footer */
	#footerlinks, #footer {
	width:640px;
	height:auto;
	text-align:center;
	float:left;
	}
	
	#footerlinks {
	border-right: 2px solid gray;
	border-bottom: 1px solid gray;
	border-left: 2px solid gray;
	background-color:#c0c0c0;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	letter-spacing:1px;
	color:#555555;
	padding-bottom:4px;
	}
	
	#footer {
	margin-left:0;
	margin-top:0;
	margin-bottom:15px;
	padding-top:8px;
	border-top: 0px;
	border-right: 2px solid gray;
	border-bottom: 2px solid gray;
	border-left: 2px solid gray;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#555555;
	background-color:#a9a9a9;
	}
	
	/* Begin Rightside Column */
	#right {
	border: 1px solid orange;
	width:195px;
	margin-left:650px;
	padding-top:111px;
	}

OK, so I have this nice clean form that I wanted to style up like the table-forms of old. I did it by floating the labels and form elements left, then clearing the labels left so they use their own lines. This works beautifully in Firefox and Safari, but IE (Win, at least) seems to think everything not cleared left should go on the same line! Is this a known IE bug/discrepancy? If so, is there a way to combat it without introducing meaningless elements to the markup (such as encasing each label/element pair in a div)?
Here's some example HTML:
html4strict Code:
Original - html4strict Code <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Test</title> <style type="text/css"> @import url("style.css"); </style> </head> <body> <form name="form" action="test.php" method="post"> <label for="name">Name:</label> <input type="text" name="name" /> <label for="thoughts">Your Thoughts:</label> <textarea name="thoughts"></textarea> <label for="fun">Having fun?</label> <input type="checkbox" name="fun" value="yes" /> </form> </body> </html>

  

  


 <?xml version="1.0" encoding="iso-8859-1"?>


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">


 <head>


 <title>Test</title>


 <style type="text/css">


     @import url("style.css");


 </style>


 </head>


 <body>


  


 <form name="form" action="test.php" method="post">


     <label for="name">Name:</label>


         <input type="text" name="name" />


     <label for="thoughts">Your Thoughts:</label>


         <textarea name="thoughts"></textarea>


     <label for="fun">Having fun?</label>


         <input type="checkbox" name="fun" value="yes" />


 </form>


  


 </body>


 </html> 

And the CSS:
css Code:
Original - css Code label { display: block; float: left; clear: left; width: 8em; margin-right: .5em; text-align: right; } input, textarea { display: block; float: left; }

  

  


 label {


     display: block;


     float: left;


     clear: left;


     width: 8em;


     margin-right: .5em;


     text-align: right;


 }


 input,


 textarea {


     display: block;


     float: left;


 } 

Hi, I have this page:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}

p {padding: 0; margin: 0; }

html {padding:0; margin:0;}


.leftDiv {
	height: 100px;
	width: 30px;
	background-color: teal;
	float: left;
}

.mainDiv {
	padding: 5px 0 10px 0px;
	width: 200px;
	height: 20px;
	background-color: blue;

}

.mainPara {
	padding-left: 5px;
}

</style>
</head>

<body>
<div id="contentDiv" style="width: 700px; height: 700px;">
	<div class="leftDiv">
	
	</div>
	<div class="mainDiv">
		<p class="mainPara">
		First Para
		</p>
	</div>
	<div class="mainDiv">
		<p class="mainPara">
		Second Para
		</p>
	</div>
</div>
</body>

</html>

And have two questions. First, why the gap between the left div and mainDiv in IE? I thought 3px bug was only for block elements with no dimensions?

Second, why does padding left not take effect in FF untill I have overcome the width of the float? Even padding-left in the para does not take effect, which should be based off of its parent.

Any help is appriciated,

CJB

Hi, I'm having a familiar problem:
with this page

The the content on a contained and floated div is over running it's containing div.

I have had this problem before and using something like: Code:

#innerwrap:after {
	content:".";
	display:block;
	clear:both;
	height: 0; 
	clear: both; 
	visibility: hidden;
}

Has worked before, but this time it's not.

I'm having to specify a unique class and heitht for the #main box or use <br/>. It would be nice not to have to do this.

Can anybody advise me what to look into please.

Thanks
James

Hello,

I have a page where a left-floated <div> is nested within the main <div>. Content then is placed in a <div> next to the left-floated one.

My problem is that the main <div> does not stretch to the height of the left-floated <div>, rather just to the height of the content.

I placed:
Code:

<br style="clear: both;">

after the content <div> which usually does the trick but it's not working for some reason...

And even more confusing is the fact that if I change the <br> to something else like say <span>, the main <div> does stretch to the proper height BUT the content within the <h1> tag and the content <div> are not displayed until you do something like minimize the window then restore it or bring another window in front of it then bring it back to focus.

This happens in IE only.

Any ideas?

Page html/css:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 76%;
	background-color: #f9dcb3;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

#cRightPaneBot	{
	background-color: #D9E0EA;
	border: 1px solid #9DA7B5;
	margin: 23px 0px 0px 0px;
	padding: 15px 10px 15px 15px;
	/*
    width: 673px;
	height: 238px;
	*/	
}

.cLeftPane	{
    margin: 0px 20px 0px 0px;
	border: 1px solid #9DA7B5;
    overflow: hidden;
	float: left;
    background-color: #F5F7FB;
	height: 223px;
    /*
    */
}

h1  {
    font-size: 1.5em;
    /*
	display: inline;
	*/
}

.breakAfter {
    margin: 0px 0px 10px 0px;
}

</style>
</head>

<body>
<div id="cRightPaneBot">
	<h1 class="breakAfter">My Title</h1>
	<div class="cLeftPane" style="width: 200px;">
		hello
	</div>
	<div id="content">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tortor dui, imperdiet eu, porta vel, blandit in, augue. Morbi et sem ut libero tempus facilisis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vestibulum posuere neque. Nullam quis pede. Nulla posuere neque non pede. Etiam nec ante non eros sodales feugiat. Morbi malesuada lorem at velit. Praesent augue erat, sollicitudin sit amet, imperdiet eget, ornare at, dui. Curabitur at urna. 
	</div><br style="clear: both;">
</div>
</body>
</html>

As always IE woes...

Anyway I have a design that I'm currently reworking into a css/div positioned site.

I'm almost done with it, but the problem I'm having is that I have 2 floated divs below a horizontal navigation bar. In IE these two floated divs are not positioning themselves directly beneath the nav bar like they do in FF. There looks to be a 3px or so gap between them. I will post screenshots for a better idea of what I'm talking about.

The HTML is:
Code:

<div id="container">
  <div id="top"></div>
  <div id="brands">
   ....stuff here....
  </div>
  <div id="slides"></div>  <!-- Slides and Vert_nav are not appearing directly below brands in IE-->
  <div id="vert_nav">
     ....stuff here....
  </div>
</div>

CSS
Code:

/* CSS Document */

html, body {
  background: #000000;
  padding: 0px;
  margin: 0px;
  color: #FFFFFF;
}

#container {
  width: 760px;
  padding: 0px;
  margin: 0px;
}

#top {
  width: 760px;
  height: 239px;
  background: url(../images/top.jpg) top left no-repeat;
}

#brands {
  width: 760px;
  height: 31px;
}

#slides {
  width:  667px;
  height:  350px;
  float: left;
  background: url(../images/slides.jpg) top left no-repeat;
T}

#vert_nav {
  width: 93px;
  height: 350px;
  float: right;
}

should.jpg is how the page is supposed to look.

shouldnt.jpg is how it is appearing in IE.

Aaaah!
another problem...

now i have 2 divs, left one floated, and right one set that it's left margine distances him from left div.

when i print that page from FF it's ok, but when i try to print it from IE it looks like left one isn't floating - divs are one beneath other (right one shifted to right for that margin value).

what now?
thanks

Hi,
I have managed to rewrite my three column navigation page using floated divs instead of its original table (the page was written years ago and I am updating to get away from tables). This was hard for me because I am very new to CSS. My code validated and the page looks fine in IE but in Firefox the third or right column does not clear the middle column. I tried to google the problem but the explanations are way over my head. Also the only way I could get the blue border to not show up in firefox was to add the style directly to the image code. Can someone please help me. The link is www.medeaslair.net/myths.html.

Here is the CSS
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title>Greek Myths</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Rose A. Rosencrans" />
  <style type="text/css">
body {
  text-align: center;
  padding-top: 45px;
  background-image: url("images/tan_marble3.jpg");
  color: black;  
  font-family: papyrus;
  font-weight: bold;
  font-size: 15px; 
}

a:link {
  color: blue;
}

a:visited {
  color: green;
}

a image {
  border-style: none;
}

#container {
  margin: 0 auto;
  width: 750px;
  text-align: left;
  
}

#columnone {
  float: left;
  margin: 0;
  width: 250px;
  padding-top: 45px;
}

#columntwo {
  float: left;
  width: 250px;
  padding-top: 45px;
}


#columnthree {
  float: right;
  clear: both;
  padding-top: 25px;
}
  

h1 {
  text-align: center;
}

h3 {
  text-align: center;
}

#email {
  text-align: center;
  text-decoration: none;
  padding-top: 150px;
  border: 0;
}

ul {
 margin: 0 auto
 width: 750px;
}
   

li {
  text-size: 12px;
  text-decoration: none;
  padding-right: 4px;
  margin: 0 auto;
  margin-bottom: 2px;
  border-style: none;
  list-style-type: none;
}



</style> 
 </head>

Here is the HTML
Code:

<body>
<div id="container">
<img src="images/grapes-l.gif" style="float: left; width: 70px; height: 85px;" alt="Grapes" title="Grapes" />
<img src="images/grapestran.gif" style="float: right; width: 70px; height: 85px;" alt="Greek Man" title="Greek Man" />
<h1>Tales of Greek Mythology</h1>
<img src="images/bar66.gif" style="float: left; padding-left: 100px; width: 420px;" alt="Vine" title="Vine" />
<br />
<div id="columnone">
<ul>
<li style="font-size: 15px; text-decoration: underline; padding-bottom: 4px;">Gods and Goddesses</li>

<li><a href="aphrodite.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Aphrodite</li>

<li><a href="apollo.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Apollo</li>

<li><a href="artemis.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Artemis</li>

<li><a href="athena.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Athena</li>

<li><a href="dionysus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Dionysus</li>

<li><a href="hades.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Hades</li>

<li><a href="hera.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Hera</li>

<li><a href="hermes.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Hermes</li>

<li><a href="poseidon.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Poseidon</li>

<li><a href="zeus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Zeus</li>

<li style="font-size: 15px; text-decoration: underline; padding-top: 210px; padding-bottom: 4px;">Tales of Love and Woe</li>

<li><a href="hermes.html#baucis"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Baucis and Philemon</li>

<li><a href="cupid.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Cupid and Psyche</li>

<li><a href="pan.html#echo"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Echo and Narcissus</li>

<li><a href="pan.html#endymion"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Endymion</li>

<li><a href="artemis.html#orion"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Orion</li>

<li><a href="orpheus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Orpheus and Eurydice</li>

<li style="font-size: 15px; text-decoration: underline; padding-top: 60px; padding-bottom: 4px;">Giants and Beasts</li> 

<li><a href="artemis.html#otus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Otus and Ephialtes</li>

<li><a href="minotaur.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>The Minotaur</li>

<li><a href="cyclopes.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>The Cyclopes</li>
</ul>
</div>
<!-- end of columnone div -->



<div id="columntwo">
<ul>

<li style="text-size: 15px; text-decoration: underline;">Men and Heroes</li>

<li style="padding-top: 4px;"><a href="atreus.html#agamemnon"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Agamemnon</li>

<li><a href="atreus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Atreus</li>

<li><a href="daedalus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Daedalus and Icarus</li>

<li><a href="athena.html#erichthonius"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Erichthonius</li>

<li><a href="heracles.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Heracles</li>

<li><a href="apollo.html#hyacinthus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>
Hyacinthus</li>

<li><a href="hera.html#ixion"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Ixion</li>

<li><a href="atreus.html#orestes"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>
Orestes</li>

<li><a href="dionysus.html#pentheus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>
Pentheus</li>

<li><a href="perseus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Perseus</li>

<li><a href="phrixus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Phrixus</li>

<li><a href="pandora.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Prometheus</li>

<li><a href="hades.html#sisyphus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>
Sisyphus</li>

<li><a href="atreus.html#tantalus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>
Tantalus</li>

<li style="text-size: 15px; text-decoration: underline; padding-top: 42px;">Tales of The Sea</li>

<li style="padding-top: 4px;"><a href="sea.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" />
</a>Sea Myths</li>

<li><a href="circe.html#glaucus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Glaucus and Scylla</li>

<li><a href="sea.html#nereus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Nereus</li>

<li><a href="sea.html#sirens"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>The Sirens</li>

<li><a href="sea.html#triton"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Triton</li>

<li style="text-size: 15px; text-decoration: underline; padding-top: 100px;">Tales of Interest</li>

<li style="padding-top: 4px;"><a href="garden.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Mythic Garden</li>

<li><a href="samhain.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Blessed Samhain
</li>

<li><a href="thor.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Thor</li>

<li><a href="links.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Links and Credits
</li>
</ul>
</div>
<!-- end of columntwo div -->



<div id="columnthree">
<ul>
<li style="text-size: 15px; text-decoration: underline; padding-top: 20px;">Women and Witches</li>

<li style="padding-top: 2px;"><a href="heracles.html#alcmene"><img src="images/grape.gif" style="border-style: none;"
alt="grapes" /></a>Alcmene</li>

<li><a href="athena.html#arachne"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Arachne</li>

<li><a href="circe.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Circe</li>

<li><a href="dionysus.html#erigone"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Erigone and Icarius</li>

<li><a href="zeus.html#europa"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Europa</li>

<li><a href="zeus.html#io"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Io</li>

<li><a href="zeus.html#leda"><img src="images/grape.gif" style="border-style: none;" style="border-style: none;" alt="grapes" /></a>Leda</li>

<li><a href="leto.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Leto</li>

<li><a href="medea.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Medea</li>

<li><a href="leto.html#niobe"><img src="images/grape.gif" style="border-style: none;" style="border-style: none;" alt="grapes" /></a>Niobe</li>

<li><a href="pandora.html#pandora"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>
Pandora</li>

<li><a href="persephone.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Persephone</li>

<li><a href="dionysus.html#semele"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Semele
</li>

<li><a href="pan.html#syrinx"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Syrinx</li>

<li style="text-size: 15px; text-decoration: underline; padding-top: 42px;">Satyrs and Centaurs</li>

<li style="padding-top: 4px;"><a href="chiron.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Chiron</li>

<li><a href="dionysus.html#midas"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>King Midas
</li>

<li><a href="apollo.html#marsyas"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>
Apollo and Marsyas</li>

<li><a href="chiron.html#nessus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Nessus</li>

<li><a href="pan.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Pan</li>

<li><a href="chiron.html#peirithous"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>
Peirithous</li>
</ul>
</div>
<!-- end of columnthree div -->

   </div>
  <!-- end of container div -->
 </body>
</html>

I am new to css, and am eager to build the equivalent of a work-week calendar using only css. Basically, a five item table without using table tags.
I have succeeded with firefox, but for some reason I am getting an odd reordering of the div elements in IE. I will post the html and the css below, and could really use some pointers. I am sure it has something to do with the float commands, but am not even sure what to call this problem to search for it!

Here's the html page



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="killmer.css">
<title>Killmer's Science Page - Chemistry Assignments</title>
</head>

<body >

<div class="left">
<h1><a href="chemcalendar.html" class="one">Chemistry Calendar</a></h1>
</div>

<div class="left">
<h1>Chemistry Textbook Online</h1>
</div>

<div class="left">
<h1>Chemistry Today Calendar</h1>
</div>

<div class="left">
<h1>Chemistry Today Textbook Online</h1>
</div>

<div class="right">
<img src="./images/logo.jpg" ></img>
</div>

<div class="right">
<h2>Chemistry Daily Assignments</h2>.
</div>

<div class="right">
<div class="monday">
<h1>MONDAY</h1>
</div>

<div class="tuesday">
<h1>TUESDAY</h1>
</div>

<div class="wednesday">
<h1>WEDNESDAY</h1>
</div>

<div class="thursday">
<h1>THURSDAY</h1>
</div>

<div class="friday">
<h1>FRIDAY</h1>
</div>



<div class="monday">
<h1>MONDAY</h1>
</div>

<div class="tuesday">
<h1>TUESDAY</h1>
</div>

<div class="wednesday">
<h1>WEDNESDAY</h1>
</div>

<div class="thursday">
<h1>THURSDAY</h1>
</div>

<div class="friday">
<h1>FRIDAY</h1>
</div>




</div>


</body>
</html>

And here's the css
a.one:link
{color:black; text-decoration: none;}
a.one:visited
{color:black; text-decoration: none;}
a.one:hover
{color:red; text-decoration: none;}
a.one:active
{color:black; text-decoration: none;}

body
{
background: url(./images/backgroundblend.jpg);
background-repeat: repeat-y;
background-color:black;

}
h1
{
color:black;
font-family:"times new roman",serif;
font-size:100%;
}
h2
{
color:silver;
font-family:"times new roman",serif;
}

div.left
{
border:black;
padding:3px;
border-style:outset;
border-width:2px;
background-color:silver;
width:150px;
font-family:courier, monospace;
float:left;
clear:left;
margin:5px;
}
div.right
{
margin-left:250px;
margin-top:0px;
margin-right:0px;
margin-botton:0px;
padding:0px;
}
div.monday
{
border:black;
padding:3px;
border-style:outset;
border-width:2px;
background-color:silver;
width:15%;
font-family:courier, monospace;
margin:1px;
float:left;
clear:left;
}
div.tuesday
{
border:black;
padding:3px;
border-style:outset;
border-width:2px;
background-color:silver;
width:15%;
font-family:courier, monospace;
margin:1px 1px 1px 1px;
float:left;}
div.wednesday
{
border:black;
padding:3px;
border-style:outset;
border-width:2px;
background-color:silver;
width:15%;
font-family:courier, monospace;
margin:1px 1px 1px 1px;
float:left;
}
div.thursday
{
border:black;
padding:3px;
border-style:outset;
border-width:2px;
background-color:silver;
width:15%;
font-family:courier, monospace;
margin:1px 1px 1px 1px;
float:left;
}
div.friday
{
border:black;
padding:3px;
border-style:outset;
border-width:2px;
background-color:silver;
width:15%;
font-family:courier, monospace;
margin:1px 1px 1px 1px;
float:left;

}

Thanks for the time!

Hi Folks [I don't think my last attempt went through - I made a mistake],

I have a page here with a problem that's occupied me for over a day. I can't get my non-floated 'DIV#left' to sit beside my floated 'DIV#right'. The DIV#left containing the subnav slips, or is forced down the page;

http://johniwhite.com/tests/ireland/level_2.html

I'd love to hear the easy answer! Here's the CSS:

div#left_level2 {
width: 130px;
height: 50px;
vertical-align: top;
padding: 0;
margin: 0px;
/* display: inline;*/
/* border: 1px solid #0F0;*/
}
div#right_level2 {
float: right;
width: 594px;
height: 50px;
padding: 0 0 0 0;
margin-top: 0px;
margin-right: 0px;
vertical-align: top;
}

----

The code for a more simple version at
http://johniwhite.com/tests/ireland/2_col_test.htm

<div id="middle">
<div id="right_level2"><!--the floated div for content--></div>
<div id="left_level2"><!--the non-floated div for subnav--></div>
</div>
----------

Love to hear thoughts, thanks
John

I am creating a top nav with links that are turned into floated blocks. I have 2 issues that I can't seem to figure out.

1. How do I keep the elements from wrapping?
2. How do I make the set of floated items centered?

Here is what I have so far (see code below). Because the items are floated to the left, they stay anchored to left and aren't centered. I tried giving the nav div a width. That did allow it to be centered, but I don't know what the exact width of the combined link blocks would be, so if it is too short, it wraps, and if it is too wide it doesn't center evenly.
Code:

#nav{
text-align:center;
padding-top:24px;
}
#nav a{
display:block;
float:left;
padding:13px;
text-transform:uppercase;
color:#9BA047;
background:#FFF;
line-height:1em;
text-decoration:none;
font-weight:bold;
}
#nav a:hover{
color:#85231C;
}
#nav a#logo{
float:left;
padding:0px;
}

<div align="center">
<div id="nav">
<a href="/" id="logo"><img src="images/logo.gif" alt="Associated Group" border="0" /></a><a href="/about-us.html">About Us</a><a href="/exterior.html">Exterior</a><a href="/interior.html">Interior</a><a href="/display.html">Display</a><a href="/employment.html">Employment</a><a href="/location.html">Location</a><a href="/contact.html">Contact</a>
<div class="clear"></div>
</div>
</div>