CSS - Nested Div Extending Outside The Parent Div

Hi

I found it:
**********************
Code:

#tableLeftCol ul.menu li#current a {
		background-image: url('../images/menu-active-rect.gif');
		background-position: right top;
		background-repeat: repeat-y;
	}
	
	#tableLeftCol ul.menu li#current ul li a {
		background-image: none;
	}

***************************

I have a nested list representing a menu.

I want the active menuitems (listitem) link to have a background image.

When active menuitem is a parent then all the childs also get the background image......

How to I change the CSS so only active menuitems link get the background image set, and not the child links of the parent?
If possible, I want to make it work without changing any in the HTML!

Here is current CSS and list structu

Code:

#tableLeftCol ul.menu li#current a {
		background-image: url('../images/menu-active-rect.gif');
		background-position: right top;
		background-repeat: repeat-y;
	}
	
	#tableLeftCol ul.menu li ul li#current a {
		background-image: url('../images/menu-active-rect.gif');
		background-position: right top;
		background-repeat: repeat-y;
	}

Code:

<div id="tableLeftColPadding">				
	<ul class="menu">
		<li id="current" class="parent active item54">
			<a href="/index.php?option=com_content&view=article&id=48&Itemid=54">
				<span>Parent</span>
			</a>
			
			<ul>
				<li class="item57">
					<a href="/index.php?option=com_content&view=article&id=50&Itemid=57">
						<span>Child-A</span>
					</a>
				</li>
				<li class="item81">
					<a href="/index.php?option=com_content&view=article&id=71&Itemid=81">
						<span>Child-B</span>
					</a>
				</li>
				<li class="item59">
					<a href="/index.php?option=com_content&view=article&id=52&Itemid=59">
						<span>Child-C</span>
					</a>
				</li>
			</ul>
		</li>
	</ul>
</div>

Hi

I have a vertical menu containing main and subcategories. subcats are hidden, when a main cat is clicked then subcats are displayed, all is done with css no javascript.

here is the structure,
Code:

<ul id="nav">
										                                            <li  class="level item-1 nav-clothes active parent">
<a href="/clothes.html"><span>Clothes</span></a>
<ol class="level item-1">
<li class="level1 nav-clothes-shirts">
<a href="/clothes/shirts.html"><span>Shirts</span></a>

</li>
<li class="level1 nav-clothes-tanks">
<a href="/clothes/tanks.html"><span>Tanks</span></a>
</li>
<li class="level1 nav-clothes-raincoats">
<a href="/clothes/raincoats.html"><span>Raincoats</span></a>
</li>
<li class="level1 nav-clothes-dresses">
<a href="/clothes/dresses.html"><span>Dresses</span></a>
</li>
<li class="level1 nav-clothes-swimsuits">
<a href="/clothes/swimsuits.html"><span>Swimsuits</span></a>
</li>

<li class="level1 nav-clothes-outerwear last">
<a href="/outerwear.html"><span>Outerwear</span></a>
</li>
</ol></li>
                                                                                    <li  class="level item-2 nav-beds parent">
<a href="/beds.html"><span>Beds</span></a>

here is my all related css,

external css file,
Code:

#nav { font-size:13.5px; color:#000; padding:0 0 0 0; margin:-20px 0 0  0; width:100%;}

/* All Levels */
#nav li { text-align:left; }


#nav li.over { z-index:999; }
#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }
#nav li li.parent {}

/* 0 Level */
#nav li { clear:both; position:relative;  display:block; }
#nav li.active a { color:#000; text-decoration:underline; }
#nav a { float:left;  padding:2px 14px 11px 0px; color:#000; font-weight:bold; }
#nav li.over a,
#nav a:hover { color:#000; text-decoration:underline; }

#nav .item-1 ul a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616;}
#nav .item-2 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-3 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-4 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-5 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-6 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-7 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-8 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-9 ul a {padding:0 0 0 0; color:#1A1616;}


#nav ul li a { padding:0 0 0 0;}
#nav ul li a:hover { padding:0 0 0 0; text-decoration:none;}

/* 1st Level */
#nav ul li,
#nav ul li.active { float:none; margin:0; padding:6px 0 0 29px; background:#FFFFFF; border-left:1px solid #E8E7E7; border-right:1px solid #E8E7E7; }
#nav ul li.over {}
#nav ul li.last { background:#FFFFFF; padding-bottom:15px; }

#nav ul a,
#nav ul a:hover { float:none; padding:0;}
#nav ul li a { font-weight:normal !important; }

/* 2nd level */
#nav ul { position:absolute; width:199px; top:23px; left:-10000px; background:url(../images/bg_sub_menu.gif) 0 0 no-repeat; padding:23px 0 0 0; border-bottom:1px solid #E8E7E7; margin-left:100px; }

/* 3rd+ Level */
#nav ul ul { top:5px; background:none; padding-top:0; border-top:1px solid #E8E7E7; }

/* Show Menu */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:100px; }
#nav li.over ul ul { left:-10000px; }

#nav ul li a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616; }
#nav ul li a:hover { color:#1A1616 !important; }
#nav ul span,
#nav ul li.last li span { padding:3px 15px 4px 15px; }


#nav li ul { display:none; }
#nav li:hover ul{display: block; }


#nav ol {  margin-left:5px; margin-bottom:10px;  }
#nav ol li { padding-left:15px; background-image:url(../images/ol_bg_lines.gif);  font-size:12px; font-weight:normal;    }
#nav ol li.last { background-image:url(../images/ol_bg_lines_last.gif); }

inline css code to overwrite the default behavior for target page

Code:

ul#nav {margin : 0 10px; margin-bottom:0px;}
ul#nav li {height : 14px; margin-top : 5px;}
ul#nav li a, ul#nav li a:hover  {}
ul#nav ul {margin-top : -8px; background : url(/images/drop-ul-bgr.gif) no-repeat; }
ul#nav ul li {height : auto; margin-top : auto;}

ul#nav ol li a { padding:0px;  }
ul#nav ol li  { margin:0px; padding:5px 0 5px 15px; }
ul#nav ol {  border:#ccc 1px solid; padding-bottom:30px;  }

I am attaching a screenshot to explain the problem, i have given border to the OL to explain the problem.

In the screenshot the pink arrow is pointing the place, BEFORE BEDS, where i want to give more space but the child list keeps overlapping rather than pushing the parent list downwards.

any help is much appreciated I am really stuck with this.

I'm totally stumped here.. Granted I'm still new to this, and learning as I go, but anyway

http://www.psyberarts.com/work/prism/index.html

There is a line in the content area that is being extended up from the footer color. I know it's from the footer color because when I change the footer background to white, it goes away.

Should I just make a repeat image for the footer and do it that way?

Hi. I am nearly finished with the main layout for my forums but just ran into this problem and can't quite seem to figure it out.

Right now I am updating vbulletin template to XHTML 1.1 and having some problems with tables / divs. I am attempting to keep the table code for the tabular data and use divs for the table headers/footers but for some reason the meat (table inbetween header and footer div) will not extend to meet the right border of the header and footer divs.

Here is the HTML:
Code:

<!-- TOP -->
 <div class="topOutter clearFloat">
  <div class="topInner floatLeft">

   <div class="floatLeft">

    <div class="floatLeft" style="width: 21px;">

     <img src="customStyle/structure/top_left.gif" alt="" />

    </div>

    <div class="floatLeft titleTxt" style="margin-left: 5px; padding-top: 12px;">

 <a class="darkLink" href="forumdisplay.php?f=16">Event TopiX</a> 
    </div>

   </div>

   <div class="floatRight">
    <img  src="customStyle/structure/top_end.gif" alt="" />
   </div>

  </div>

  <div class="floatRight">
   <img src="customStyle/structure/top_right.gif" alt="" />
  </div>

 </div>
<!-- /TOP -->



<!-- MIDDLE -->        

   <table style="border: 1px solid #000000;" cellpadding="0" cellspacing="0" width="100%" >
    
    
     <tbody id="collapseobj_forumbit_16" style="">
     

      <tr>
       <td class="thead" style="width: 100%; height: 17px;"></td>
      </tr>
  
     </tbody>

    
   </table>

<!-- /MIDDLE-->

<!-- BOTTOM -->
 <div class="bottomSpacer bottomOutter clearFloat">

  <div class="floatLeft">
   <img src="customStyle/structure/blc.gif" alt="" />
  </div>

  <div class="floatRight">
   <img src="customStyle/structure/brc.gif" alt="" />
  </div>

 </div>
<!-- /BOTTOM -->

The CSS Code (spacer and top/middle classes are just bordering and bottom margins):

Code:

.clearFloat { overflow: hidden; }

.floatLeft { float: left; }

.floatRight { float: right; }

Please see the attachment for the visual. This is only happening in IE, Firefox and opera render it fine.

And it only happens when I sandwhich a table between the header and footer divs. If the middle portion is also a div it does not display this problem.

Thx.

I really like this menu: http://alistapart.com/articles/horizdropdowns
(see demo: http://alistapart.com/d/horizdropdowns/horizontal.htm)

My problem is that it only works in one level. How can I modify it to support more levels?
Or do you guys know any simular menu, that support more levels?

Not 100% sure if this is CSS related, however:



The nav and image area below it are obviously 2 separate divs, as referenced by http://www.psyberarts.com/work/prism

What is the best way to accomplish this look (the hover image, which is actually just an image for an "Active" State on a page.)

I was thining about nested Divs for the pointed peice, but before I proceed I would rather get the opinion of someone who knows more than I do

I swear that I really am learning a great deal about CSS but you wouldn't think so as many threads as I've started in the past few days...

Anyhow, consider the following code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>My site</title>
    <style type="text/css">
      #base { 
        clear: both;
        padding-top: 1px;
        border-top: 1px solid #ffffff;
        border-bottom: 1px solid #ffffff;
        width: 100%; 
        background: #00ff00;  } /* end #base */

      #main { 
        background: #0000ff;
        margin: auto;
        text-align: left;
        width: 800px; } /* end #main*/

      #content { 
        background: #ffffff;
        border-left: 1px solid #0000ff;
        padding-top: 1em;
        padding-bottom: 1em;
        border-right: 1px solid #0000ff; } /* end #content */

      #bottom_part { 
        padding: 0;
        line-height: 130%;
        padding-left: 1em;
        padding-right: 1em;
        display: block;
        margin: 0;
        border: 0;
        clear: both; } /* end #bottom_part */

      #column_a {
        padding: 1em;
        margin: 0; 
        float: left;
        width: 33%; } /* end #column_a */

      #column_b {
        margin-left: 33%;
        margin-right: 33%;
        padding: 1em;
        padding-right: 0;
        width: 25%; } /* end #column_b */

      #column_c { 
        display: block;
        float: right; 
        padding: 1em;
        width: 33%; } /* end #column_c */

      #bottom { 
        background: #ff0000; 
        border: none; } /* end #bottom */

      .header { font-weight: bold; } 
    </style>
  </head>
  <body>
    <div id="base">
      <div id="main">
         <div id="content">
           <div id="bottom_part">
            <div id="column_a">
              <p class="header">Column A</p>
              <p>A - A</p>
              <p>A - B</p>
              <p>A - C</p>
            </div>
            <div id="column_c">
              <p class="header">Column C</p>
              <p>C - A</p>
              <p>C - B</p>
              <p>C - C</p>
              <p>C - D</p>
              <p>C - E</p>
              <p>C - F</p>
            </div>
            <div id="column_b">
              <p class="header">Column B</p>
              <p>B - A</p>
              <p>B - B</p>
              <p>B - C</p>
            </div>
          </div>
        </div>
        <div id="bottom">&nbsp;</div>
      </div>
    </div>
  </body>
</html>

The problem is that the content in Column C does not completely render inside the white box. The same problem occurs when the content is really long in Column A. Column B will extend the height of the white box and I'm certain it is because there is no float style associated with it. How can I achieve this for the other two columns? Removing the floats will do the trick but will also place the columns on top of each other.

I have a div that has a table inside of it. Even though the table expands with content added, the div does not.

It's important to me that the div extend with the table because this div in question has a background shadow border for the table.

Here is the CSS:

Code:

#right {
  float: right;
  width: 80%;
  height: 100%;
}

#rt_brdr {
 height: 100%;
 width: 100%;
 padding-bottom:5px;
 padding-right: 10px;
 margin-bottom: 5px;
 vertical-align: bottom;
 background: url(img/r_brdr.gif) repeat-y right;
}

My HTML:

Code:

<div id="right">
   <div id="rt_brdr">
    <table border="0" align="left" width="100%" style="height: 93%; margin-top: 2px;"  cellpadding="0" cellspacing="0">
       <tr>
         <td class="top" style="background: url(img/w_tl.jpg) no-repeat top left #FFFFFF;"></td>
         <td class="white_fill"></td>
         <td class="top" style="background: url(img/w_tr.jpg) no-repeat top right #FFFFFF;"></td>
       </tr>
       <tr class="white_fill">
         <td></td>
         <td></td>
         <td></td>
       </tr>
       <tr>
         <td class="bottom" style="background: url(img/w_bl.jpg) no-repeat bottom left #FFFFFF;"></td>
         <td class="white_fill"></td>
         <td class="bottom" style="background: url(img/w_br.jpg) no-repeat bottom right #FFFFFF;"></td>
      </tr>
    </table>
  </div>
  </div>

I have attached a screenshot. Note that I took the content out of the table in the post so that the code doesn't extend forever. I have put a black border around the right border to make it stand out in the screenshot.

I have a absolute layout in css with two colums. In left column i have a navigation bar, and then a footer which is positioned 10px from bottom of the div, and right column has content. both have height of 100%, however no matter what resolution, the height extends about 100px further than the browser window, so the header is not seen unless scrolled to, even if other content doesn't exceed the browser window.

I dont think its box model issue because there is no major vertical padding..any ideas?

I guess let me start with centering. I have
Code:

body {
	margin: 1%;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	line-height: 1.75em;
	background-color: #6E4E1C;
  	text-align: center;
}
#wrapper {
	background-color: #343457;
	width: 775px;
	position:absolute;
	margin: 0px auto;
	text-align: left;

By everything I read, setting the body's text-align to center, and the wrapper's margins to auto should do the trick. When I copy other stylesheets, they work. But when I type it in, it doesn't? Mozilla puts content at the left, and IE6 puts the left border of the wrapper in the center of the page causing horizontal scroll.
(actual pages at http://lgs.lambrite.com/new.css and http://lgs.lambrite.com/test2.htm

2nd, if you visit the htm page above you see that my content div does not extend down to meet the footer. I have looked at the faux columns, but can't make that work and keep my blue border at the bottom, unless I add another wrapper div to hold the background, inside of the primary wrapper div. This seems not the best way to do this. Any suggestions?

Lastly, in Mozilla, the url background on my sublinks nicely meets the content background, but in IE, there is a nice empty blue space between them I understand that this probably has to do with the box model issues, but have no idea how to fix it.

I'd also welcome any criticism on my stylesheet (aside from the fact that it is not in short-hand - I am not familiar enough yet).

You guys are great for newcomers - I know I really appreciate the help!

Sarah

It's hard for me to explain this so bear with me.

This is the page in question.

The right side is my float. If it is longer than the left side, then it continues, but the white background does not. I've tried doing height: 100% and so forth and can't get it to stretch.

I've tried reversing the float assigning it to the left side and it appears fine in Net/Moz, but IE won't run it right.


I don't really want to use float but I can't find another way to do it. I'm redoing the site from tables to CSS to make it cleaner. Floating has always been a problem but I've found ways to deal with it. Now, I'm realizing how finicky it is on different browsers.

Any suggestions or alternatives to float? The heights of both sides may change at any point so I don't really want to use any position elements. Will I have to?

Thanks in advance.

Tim

I have a site that is using the suckerfish style dropdown sorta...

On a previous version I had the li dropdown block entirely clickable, so a user could click in any part of the 160px block, but on a current site using the same navigation just dropped in you can only click on the word and nothing happens for the rest of the 'box'.. It works fine in Firefox but not IE, if there is an image aligned to the right of the link it extends the clickable region...

Any help would be appreciated.

Here is the CSS for that section:
Code:

 /*******************************/
	/*   BEGIN: Drop-Down Styles   */
	/*******************************/
	
	#navigation, #navigation ul {
		position:absolute;
		padding: 0;
		margin: 0;
		list-style: none;
		line-height: 20px;
		font-size: 11px;
		font-family: Arial, Helvetica, sans-serif;
		z-index: 10;
		font-weight: bold;
	}
	#navigation li.main {
		text-align: center;
		}
	
	#navigation ul {
		margin: 0 0 0 -1px;
	}
	
	#navigation a {
		display: block;
		background-color: transparent;
		color: #F1F1F1;
		text-decoration: none;
		padding: 2px 4px 2px 6px;
		z-index: 10;
	}
	
	#navigation li {
		float: left;
		width: auto;
		border: solid 1px #0f2344;
		border-right: none;
		background-color: #0f2344;
		color: white;
		z-index: 10;
	}
	
	#navigation li li {
		border-right: solid 1px black;
		border-bottom: none;
		width: 160px;
	}
	
	#navigation li.last {
		border-right: solid 1px black;
		border-bottom: solid 1px black;
	}
	#navigation li.hr {
		border-right: solid 1px black;
		border-bottom: solid 1px black;
		
	}
	
	#navigation li ul {
		position: absolute;
		width: 160px;
		display: none;
	}
	
	#navigation ul ul {
		margin: -20px 0 0 160px;
	}
	
	#navigation li:hover ul ul, #navigation li.over ul ul, #navigation li.over ul ul, #navigation li.over ul ul ul {
		display: none;
	}
	
	#navigation li:hover ul, #navigation li li:hover ul, #navigation li.over ul, #navigation li li.over ul, #navigation li li li.over ul  {
		display: block;
	}
	
	#navigation li:hover, #navigation li.over {
		color: black;
		background-color: #467BB4;
		cursor: pointer;
	}
			
	#navigation li:hover>a { /* IE/Win ignores this declaraion */
		color: black;
		background-color: #467BB4;
	}

And a segment of the HTML I'm using.

Code:

<ul id="navigation">
			<li><a href="http://links.com">Home <img src="http://links.com/comm_demo3/img/dn_arrow.gif" alt="" border="0"></a>
			  <ul>
			    <li><a href="http://links.com/comm_demo3/pages/news/news.asp">Newsroom</a>
				<li><a href="http://links.com/comm_demo3/pages/news/archives/archives.asp">Newsletter Archives</a>
				<li class="last"><a href="http://links.com/dashboard/corporat.htm">Dashboard</a>
				</li>
		      </ul>
			</li>

I have an issue where I have created a template for an organization and the horizontal drop menu can contain about 9 elements.

It has tiered drop downs which extend off the end of the page to the right.

Is there a way to make them flip left ONLY if they are at the end of the page?

I did do some javascript that takes the last element and gives it a class that can make it flip, as in the image. But if there are only 3 menu items that would look a bit goofy.

Anyone else encounter this issue and how did they resolve it?

I am quite new to css and have stumbled my way through making a page. My issue is the footer. My footer contains a background image that repeats across the page. In order to make the footer stick to the bottom I have placed it in a container. My issue is, when the page is minimized and you scroll over the right of the page, the menu that is on the bottom is on the right but the background image does not extend behind it.

Code:

/*---------------------------------------------
    Footer Area Starts here
----------------------------------------------*/
#FooterBody{
            background: #6f1e1a url(http://www.cleverchickcreations.com/images/footer.png) repeat-x;
			height:232px;
			width:100%;
			border:1px solid;
			color:#f2f1df;
			
			             
			}
#FooterContainer{
            
			      width: 936px; margin: 0 auto; padding: 0; text-align: left; 
				 
             
			}
			/*------------------------------------------------footer--------------------*/



#footer{
	width:100%;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding: 0px;
	float: left;
	height: 232px;
	background-image: url(http://www.cleverchickcreations.com/images/footer.png);
	background-repeat: repeat-x;
        position: relative;
}



#btmmenu_area{
	width:1100px;
	height:120px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	font-family: Tahoma;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #dcd66e;
	text-decoration: none;
	padding: 0px;
	float: none;
}



.navcolumn {
	float: left;
	width: 300px;
	height: 120px;
	margin-left: 10px;
        padding-left: 20px;
        padding-right: 20px;
}


.row1 {
	float: left;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
	width: 140px;
	text-align: left;
	margin-top: 10px;
	padding-left: 10px;
	line-height: 140%;
}
.row1 a:link, .row1 a:visited, .row1 a:active {
	float: left;
	color: #301010;
	text-decoration: none;
}
.row1 a:hover{
	color: #6d5f52;
	text-decoration: none;
}
.row2 {
float: left;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
	width: 130px;
	text-align: left;
	margin-top: 10px;
	padding-left: 20px;
	line-height: 140%;
}
.row2 a:link, .row2 a:visited, .row2 a:active {
	float: left;
	color: #301010;
	text-decoration: none;
}
.row2 a:hover {
	color: #6d5f52;
	text-decoration: none;
}
.row3 {
float: left;
font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
	width: 130px;
	text-align: left;
	margin-top: 10px;
	padding-left: 20px;
	line-height: 140%;
}
.row3 a:link, .row3 a:visited, .row3 a:active {
	float: left;
	color: #301010;
	text-decoration: none;
}
 .row3 a:hover {
	color: #6d5f52;
	text-decoration: none;
}


.foot-headers {
        font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #ef5f9b;
	line-height: 140%;
}


.footer_links {
	font-family: Arial;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	margin: 0px;
	float: left;
	height: 20px;
	width: 100%;
	color: #333333;
	padding-top: 35px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}



.footer_copyrights {
	font-family: Arial;
	font-size: 10px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	margin: 0px;
	float: left;
	height: 20px;
	width: 100%;
	color: #c2c093;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}



/*------------------------------------------------validation --------------------*/


#validation_area {
	width:100px;
	height:34px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	font-family: Tahoma;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #dcd66e;
	text-decoration: none;
	padding: 0px;
	float: none;
}


.validation {
	font-family: Arial;
	font-size: 9px;
	font-weight: normal;
	text-transform: uppercase;
	color: #FFFFFF;
	text-decoration: none;
	background-image: url(http://www.cleverchickcreations.com/images/validation.png);
	background-repeat: no-repeat;
	float: right;
	height: 16px;
	width: 44px;
	padding-top: 3px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 5px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.validation:hover {
	font-family: Arial;
	font-size: 9px;
	font-weight: normal;
	text-transform: uppercase;
	color: #FFFFFF;
	text-decoration: none;
	background-image: url(http://www.cleverchickcreations.com/images/validation-0.png);
	background-repeat: no-repeat;
	float: right;
	height: 16px;
	width: 44px;
	padding-top: 3px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 5px;
	margin-bottom: 0px;
	margin-left: 0px;
}

At first this was slightly amusing. The border in the lower middle column dubbed "News" extended underneath the other divs to the top in Firefox.

See he
www.djoj.net/test/indexwierd.html
Css: (Look at the way bottom of the CSS. The last 3 styles)
www.djoj.net/test/styles2.css

So I changed my div's to span's and wrapped them in one div labled "bottom" Now look...

www.djoj.net/test/index.html
Css: (once again, at the bottom)
www.djoj.net/test/styles.css

How can I fix this? It's a problem in both browsers. I don't want to use tables, I'd rather stick to CSS positioning.

Thank you in advance!

~B