|
CSS - Center Floated Blocks?
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>
Similar TutorialsIn Firefox, I've got a right div that is not repsonding to an auto width in FF. I am not a pro a CSS (yet ) and I hope that someone can give me the one line solution that I am missing. I've included a screen shot of the problem, any help is greatly appreciated. - K CSS Code Code:
#MainContainer
{
float: left;
width: auto;
}
#Main
{
margin-right: 0.2em;
}
#MainContent
{
padding: 0.5em 0.5em 0.5em 0.5em;
}
#SidebarContainer
{
float: right;
width: 250px;
border-top: 1px solid #C0C0C0;
padding-top: 5px;
clear: right;
}
#Sidebar
{
padding-bottom: 5px;
background: #ADADAD;
background-image: url(../images/SidebarBackground.jpg);
background-repeat: no-repeat;
clear:left;
}
#SidebarContent
{
margin: 0.2em 0.2em 0.2em 0.2em;
}
Hi, I'm a bit confused with the relative/absolute positioning issue. I thought that relative would carry the normal flow of things, but as you can see with the code below, all of the DIV items that should follow each other are overlapping even though positioning is set to relative. Can anyone help me out as to what I am doing wrong? Thanx <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> body { padding : 0; margin-top:10px; margin-bottom:0px; background:#FFF; height: 0px; width: 0px; margin-right: 0px; margin-left: 0px; } .titleBlue{ font-family: Arial; font-size:18px; color : #003896; } .darkBlue{ font-family: Verdena; font-size:11px; color : #003896; font-weight : bold; } .smallStyle{ font-family: verdana; font-size:10px; color : #000000; text-decoration : none; } #content{ position : relative; left:50%; width:730px; margin-left:-365px; } #hrColumn{ position : absolute; top : 0; left : 0; width : 149px; border-right: 1px dotted #5D89D1; margin-right : 5px; } #hrLogo{ position : relative; top : 0; margin-bottom:5px; } #linkSection{ position : relative; margin-bottom:10px; } #columnLink{ position : relative; } #linkArrowItem{ position : absolute; top : 3px; } #linkItem{ position : absolute; left : 12px; } </style> </head> <body> <div id="content"> <div id="hrColumn"> <div id="hrLogo" class="titleBlue">Blablabla</div> <div id="linkSection" class="smallStyle"> <div id="columnLink"> <div id="linkArrowItem"><img src="arrowLogo.jpg" width="8" height="7" border="0" /></div> <div id="linkItem"><a href="#">Programs and Forms</a></div> </div> <div id="columnLink"> <div id="linkArrowItem"><img src="arrowLogo.jpg" width="8" height="7" border="0" /></div> <div id="linkItem"><a href="#">Development and Training</a></div> </div> <div id="columnLink" class="smallStyle"> <div id="linkArrowItem"><img src="arrowLogo.jpg" width="8" height="7" border="0" /></div> <div id="linkItem"><a href="#">Careers</a></div> </div> <div id="columnLink" class="smallStyle"> <div id="linkArrowItem"><img src="arrowLogo.jpg" width="8" height="7" border="0" /></div> <div id="linkItem"><a href="#">More...</a></div> </div> </div> </div> </div> </body> </html> I am using "Stylin' With CSS" book to learn how to do my website layout and I need to put some images on my website. I just need something simple... I have an image showing what I am trying to do but I can't post the url.... I basically just need to create a horizontal row of n images, n being 1 to 5. The images are very close in dimensions, but not exactly the same. How can I do this... Thanks, CD Code: a {
display:blocks;
width:100px;
height:20px;
border:1px solid #000000;
background:#CCCCCC;
}
This code works great in Internet Explorer, but Firefox doesn't seem to like the width and height settings. Does anyone know a way to do this in firefox? Thanks in advance! I have a multi-column layout. The "main" column has text within <p> tags defined thusly:
Code: #main p {
font-family: Helvetica, Verdana, Geneva, Arial, sans-serif;
font-size: 12px;
line-height: 1.7em;
padding:0 10px;
}
Within that main columns are some <div> blocks that are arranged in a row at a certain place, define like this: Code: .mid_nav {
float:left;
width:110px;
margin:0px 10px 8px;
background:url("./images/pic_nav_bg.gif");
background-repeat: repeat-y;
}
I would like to define different qualities to the <p> tags within these <div> blocks, but the original #main p definitions seem to over-ride whatever I try. Incidently, the reason I've defined the font-size in pixels is I need uniformity between IE and FF. Any suggestions? Hi, i'm almost finished with my first css design. Everything works fine as far as i tested it. But when i refresh the graphical page (broadband) or click on the broadband link when i'm on the broadband page i get a white block on the left and right side of the page. It is very strange because it disappears when you scroll down and back up. Sometimes i have to refresh a couple of times, or switch between small- and broadband to see the effect. Code: http://users.pandora.be/jef_patat/test/index.htm I have no clue at all greetings, de Jef Hi, I'm having a problem which I though should be fairly simple, but I've been hacking at it for many hours now. I want to align blocks horizontally at the bottom of a containing block. The containing block has a fixed height while the contained block do not. Here's a mockup of what I want: URL How should I modify the following code so that it renders like the above? Code: <div style="height:50px">
<div style="float:left">one</div>
<div style="float:left">two</div>
</div>
Thanks! Hello. My first post at this section I'm trying to familiarize with all the positioning properties in CSS but got stuck when trying to migrate the table at the bottom of this code, to div blocks: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<style>
body
{
margin: 0;
padding: 0;
font-size: 90%;
font-family: "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
background-color: #FFF;
color: #000;
}
table, div {
padding: 15px;
margin: 0;
background-color: #464646;
height: 30px;
width: 100%;
}
tr, div div {
color: #FFFFFF;
font-size: 18px;
height: 100%;
}
</style>
<body>
<table class="top"><tr><td>Product Name</td><td align="right">Company Name</td></tr></table>
</body>
</html>
I tried wrapping two <span> inside a <div> and float the second <span> to the right, but from what I read so far, floating is not the solution because it sets the element as a block even if it's inline. Although it works using plain old tables - btw why is IE rendering a somewhat different page then FF? - and I should follow the KISS rule I want to learn how can I make this work. Thank you a lot! hi, im not sure if im posting in the right page but after viewing the page source, i think its the best way to post it right here i just want to know what should i learn to make such beautiful block/tables whatever call it just like at kathymarks dot com? any suggestion what should i learn from? links? thanks! on the side note, how about the tables/blocks on deviant art? thanks for the replies! I am using the following code how do I change it so that it would show up in the center of the brower window? Thanks Tim PHP Code: <div style="position: absolute; left: 0px; z-index: 1; top: 0px; align: center\"> <object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0 ,0\" width=\"544\" height=\"396\" id=\"cardio\" align=\"middle\"> <param name=\"allowScriptAccess\" value=\"sameDomain\" /> <param name=\"movie\" value=\"ads/cardio3.swf\" /> <param name=\"loop\" value=\"false\" /> <param name=\"quality\" value=\"high\" /> <param name=\"wmode\" value=\"transparent\" /> <param name=\"bgcolor\" value=\"#ffffff\" /> <embed src=\"ads/cardio3.swf\" loop=\"false\" quality=\"high\" wmode=\"transparent\" bgcolor=\"#ffffff\" width=\"544\" height=\"396\" name=\"cardio\" align=\"middle\" allowScriptAccess=\"sameDomain\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" /> </object> </div> APPEARS TO BE HASLAYOUT ISSUE IMAGE WITHIN ANCHOR NOT CLICKABLE. Hi Guys looking for a spot of help please. IE is driving me up the wall. Ive wrote a jQuery script for scrolling a list horizontally upon user clicking left or right. The list has anchors within it which are blocks which I want to be clickable with an image inside (fine in FF etc) but in IE the image within the anchor loses its ability to be clicked the rest if fine apart from I manually have to set the cursor to pointer to show the user its clickable still. Just when they click the item image within the anchor it does nothing. Here is a slim version of the HTML : Code:
<ul>
<li><a href="/page1.html"><span class="box_wrap"><span class="img"><img src="1.jpg" border="0" height="75" /></span><span>Item 1</span></span></a></li>
<li><a href="/page2.html"><span class="box_wrap"><span class="img"><img src="2.jpg" border="0" height="75" /></span><span>Item 2</span></span></a></li>
<li><a href="/page3.html"><span class="box_wrap"><span class="img"><img src="3.jpg" border="0" height="75" /></span><span>Item 3</span></span></a></li>
<li><a href="/page4.html"><span class="box_wrap"><span class="img"><img src="4.jpg" border="0" height="75" /></span><span>Item 4</span></span></a></li>
<li><a href="/page5.html"><span class="box_wrap"><span class="img"><img src="5.jpg" border="0" height="75" /></span><span>Item 5</span></span></a></li>
<li><a href="/page6.html"><span class="box_wrap"><span class="img"><img src="6.jpg" border="0" height="75" /></span><span>Item 6</span></span></a></li>
<li><a href="/page7.html"><span class="box_wrap"><span class="img"><img src="7.jpg" border="0" height="75" /></span><span>Item 7</span></span></a></li>
<li><a href="/page8.html"><span class="box_wrap"><span class="img"><img src="8.jpg" border="0" height="75" /></span><span>Item 8</span></span></a></li>
<li><a href="/page9.html"><span class="box_wrap"><span class="img"><img src="9.jpg" border="0" height="75" /></span><span>Item 9</span></span></a></li>
<li><a href="/page10.html"><span class="box_wrap"><span class="img"><img src="10.jpg" border="0" height="75" /></span><span>Item 10</span></span></a></li>
<li><a href="/page11.html"><span class="box_wrap"><span class="img"><img src="11.jpg" border="0" height="75" /></span><span>Item 11</span></span></a></li>
<li><a href="/page12.html"><span class="box_wrap"><span class="img"><img src="12.jpg" border="0" height="75" /></span><span>Item 12</span></span></a></li>
<li><a href="/page13.html"><span class="box_wrap"><span class="img"><img src="13.jpg" border="0" height="75" /></span><span>Item 13</span></span></a></li>
<li><a href="/page14.html"><span class="box_wrap"><span class="img"><img src="14.jpg" border="0" height="75" /></span><span>Item 14</span></span></a></li>
</ul>
CSS Code: Code:
ul {
width: 9999px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
position: absolute;
top: 0;
}
ul li {
display:block;
list-style:none;
margin:0;
padding:0;
border:0;
text-align:center;
float:left;
width:118px;
height:133px;
}
ul li a{
display:block;
border-right:1px solid #e2f5fe;
outline:none;
text-decoration:none;
background:#FFF;
padding:3px 2px 3px 2px;
line-height:15px;
}
ul li a:hover{
background:#e2f5fe;
color:#fe0084;
}
ul li span.box_wrap {
display:block;
background:#FFF;
height:127px;
}
ul li span.box_wrap span{
padding:0px 3px;
font-size:12px;
}
ul li span.img {
padding:2px 0px 2px 0px;
display:block;
}
Just when you try to click any of the images within the boxes its not clickable. Really stumped. Any help or pointers would be greatly appreciated. Thanks in advance! 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. 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 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 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>
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, I've got a little problem. I have two floated DIVs (left and right) inside a non-floated DIV. Below that, I have another non-floated DIV. In Internet Explorer, the bottom DIV appears where the floating DIVs end. In Firefox, however, the bottom DIV god underneath the floated DIVs and sticks to the top. here's the related CSS: css Code: Original - css Code #content { padding: 34px 26px 0 26px; text-align: left; } #content #leftcol, #content #rightcol { height: 30px; padding: 0px; display: block; margin: 0px; } #content #leftcol { width: 532px; float: left; } #content #rightcol { width: 230px; float: right; } #footer { height: 95px; background-image: url(images/footerstrip.gif); background-repeat: repeat-x; width: 100%; text-align: center; margin: auto; float:left; }
The floated DIVs need to be height-flexible, so floating the bottom DIV relatively would not work. The bottom div needs to start at the bottom of the floating DIVs. I hope somebody can lend a hand - thanks in advance, all. Hi Please let me know if I am posting what is required for answering my questions as I would like to make things as easy as possible for you. Here is my first problem:- I have been trying to move our sitesdesign across to being css based and in the large part have succeeded but I have run into difficulties when it comes to displaying our results. I am trying to wrap 9 search results on a page using float but the results I am getting are different between mac IE 5.1, opera 5 Mac (not that bothered though) and Windows IE 6.0. My problem is that on windows the float works as it should and wraps so that I have a grid of 9 images, on a mac the images wrap but jump to the bottom of my left floated navigation and then continue the grid and on opera they just don't wrap. The URL is URL CSS file URL Can anybody shed any light on why this might happen as I am a little lost. TIA hanonman I've never run into this before, but I have the following document structure and the right div's top margin is about 10px below the left in FF and Opera.(aligns fine in IE-AMAZING, but true) Every other time I have simply set the margin and padding both to 0px of my floated divs and it has brought it to the same height as my left div: NOTE: I apologize, I don't have a link, this is being developed off line right now. CSS code: Code: /* You guessed it, my container div */
div.container {
clear: both; /* clears two divs above it */
text-align: right;
width: 100%;
}
/* Left div */
div.left {
margin: 0px;
padding: 0px;
width: 49%;
}
/* Right div */
div.right {
float: right;
margin: 0px;
padding: 0px;
width: 49%;
}
xhtml markup: Code: <div class="container"> <fieldset class="info"> <legend>Get Information For Your Next Trip Here!</legend> <p> Before you venture out on your next road trip, get your directions here. </p> <form action="myform.php" method="get"> <div class="right"> <ul class="none"> <li><img src="images/end.png" class="mapimg" alt="Enter Where Your Trip Will End" title="Enter Where Your Trip Will End" /> <label for="address2">Address/Intersection:</label> <br /> <input type="text" class="fbgcolor" id="address2" name="2a" size="35" maxlength="80" /></li> <li><label for="city2">City:</label> <br /> <input type="text" class="fbgcolor" id="city2" name="2c" size="35" maxlength="50" /></li> <li><label for="state2">State:</label> <label for="zip">Zip:</label> <br /> <input type="text" class="fbgcolor" id="state2" name="2s" size="2" maxlength="2" /> <input type="text" class="fbgcolor" id="zip2" name="2z" size="10" maxlength="10" /></li> <li><input type="submit" value="Get Directions" /></li> </ul> </div> <div class="left"> <ul class="none"> <li><img src="images/start.png" class="mapimg" alt="Enter Where Your Trip Will Begin" title="Enter Where Your Trip Will Begin" /> <label for="address">Address/Intersection:</label> <br /> <input type="text" class="fbgcolor" id="address" name="1a" size="35" maxlength="80" /></li> <li><label for="city">City:</label> <br /> <input type="text" class="fbgcolor" id="city" name="1c" size="35" maxlength="50" /></li> <li><label for="state">State:</label> <label for="zip">Zip:</label> <br /> <input type="text" class="fbgcolor" id="state" name="1s" size="2" maxlength="2" /> <input type="text" class="fbgcolor" id="zip" name="1z" size="10" maxlength="10" /></li> </ul> </div> </form> </fieldset> <!-- End Container Div --> </div> Both my code and css validate just fine. Any ideas or good links? |
|||||||