|
CSS - Div Blocks Overlapping
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> Similar TutorialsI 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? 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 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 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>
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, 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! 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, 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! 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! Hi folks, Can anyone possibly help me with this layout, the blue slideshow box is overlapping the login box ? ~url removed~ Also, I am viewing this at 1440x900 screen res. Is anyone having probs with the view / layout? I am building a mail account (Inbox) which is using css.now there is a specific mail which contains some css elements like [code] <div>Dear all,</div> <div> </div> <div>wish u happy and safe diwali</div> <div> </div> <div>luv</div> <div>Vinoth<BR><BR><B><I>Palanivel_J@Dell.com</I></B> wrote:</div> <BLOCKQUOTE class=replbq style="PADDING-LEFT: 5px; MARGIN-LEFT: 5px; BORDER-LEFT: #1010ff 2px solid"> <META content="MSHTML 6.00.2900.2963" name=GENERATOR> <STYLE>v\:* { BEHAVIOR: url(#default#VML) } o\:* { BEHAVIOR: url(#default#VML) } w\:* { BEHAVIOR: url(#default#VML) } .shape { BEHAVIOR: url(#default#VML) } </STYLE> <STYLE>@page Section1 {size: 8.5in 11.0in; margin: 1.0in 1.25in 1.0in 1.25in; } P.MsoNormal { FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Times New Roman" } LI.MsoNormal { FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Times New Roman" } DIV.MsoNormal { FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Times New Roman" } A:link { COLOR: blue; TEXT-DECORATION: underline } SPAN.MsoHyperlink { COLOR: blue; TEXT-DECORATION: underline } A:visited { COLOR: purple; TEXT-DECORATION: underline } SPAN.MsoHyperlinkFollowed { when this mail is opened, its css interferes with the css of the page. as a result links all over the page are colored in blue. what is the method to avoid or ignore any css of the mail. Regards Rupam My problem can be viewed here http://emediastudios.com.au/emma/photography/babies.html My problem is i want the image on mouse over to be on top of the stack. CSS Code: #imgmenu {position:relative; top:0px; left:0px; width: auto; background-color: #FFFFFF; border:solid 1px #FFFFFF}
#imgmenu .p1 {display:block; width: auto; height: auto; text-decoration:none; background: #FFFFFF; top:0; left:0; border:0;}
#imgmenu .p1:hover {text-decoration:none; background-color: #FFFFFF; color:#000;}
#imgmenu .large {
display:block;
position:absolute;
width:0;
height:0;
border:0;
top:0;
left:0;
z-index: 601;
visibility: visible;
}
#imgmenu .p1:hover .large {display:block; position:absolute; top:-85px; left:50px; width: auto; height: auto; border:3px solid #FFFFFF;}
#info {z-index:500; height:22em;}
HTML Code: <td><div id="imgmenu"> <a class="p1" href="#nogo" title="thumbnail image"><img src="/emma/photography/babies/Ralph3.jpg" alt="Thumbnail image" border="0" title="Thumbnail image" / ><img src="babies/big/Ralph3.jpg" alt="Enlarged view of image" name="info" class="large" id="info" title="Enlarged view of image" /></a> </div> </td> Please Help New construction of a website. I've had no issue with any css. As soon as I started to put in my blog (Wordpress), I realized that changing a would effect other tags that were no encased in this . I dismissed as a flaw in my code that wasn't working correctly with the Wordpress theme. However, now I'm have the same issue with an RSS reader. The code works perfectly in IE9 and Chrome v7. But, it doesn't work in Firefox. http://www.imzac.com/truf.php http://www.imzac.com/common/master.css In the recent post section, you see my heading is larger and has a different weight. This is the only tag that code has allotted for these properties. However, it effects the "Continue Reading" and the link at the footer of my page. Again, no issues in IE9 and Chrome v7. Here's the RSS feed script. What's you're looking for is about halfway down and then near the end. It's the <title> lines. Code:
<?php
<?php
require_once("rsslib.php");
echo RSS_Display("http://www.xul.fr/rss.xml", 15);
? >
*/
$RSS_Content = array();
function RSS_Tags($item, $type)
{
$y = array();
$tnl = $item->getElementsByTagName("title");
$tnl = $tnl->item(0);
$title = $tnl->firstChild->textContent;
$tnl = $item->getElementsByTagName("link");
$tnl = $tnl->item(0);
$link = $tnl->firstChild->textContent;
$tnl = $item->getElementsByTagName("pubDate");
$tnl = $tnl->item(0);
$date = $tnl->firstChild->textContent;
$tnl = $item->getElementsByTagName("description");
$tnl = $tnl->item(0);
$description = $tnl->firstChild->textContent;
$y["title"] = $title;
$y["link"] = $link;
$y["date"] = $date;
$y["description"] = $description;
$y["type"] = $type;
return $y;
}
function RSS_Channel($channel)
{
global $RSS_Content;
$items = $channel->getElementsByTagName("item");
// Processing channel
$y = RSS_Tags($channel, 0); // get description of channel, type 0
array_push($RSS_Content, $y);
// Processing articles
foreach($items as $item)
{
$y = RSS_Tags($item, 1); // get description of article, type 1
array_push($RSS_Content, $y);
}
}
function RSS_Retrieve($url)
{
global $RSS_Content;
$doc = new DOMDocument();
$doc->load($url);
$channels = $doc->getElementsByTagName("channel");
$RSS_Content = array();
foreach($channels as $channel)
{
RSS_Channel($channel);
}
}
function RSS_RetrieveLinks($url)
{
global $RSS_Content;
$doc = new DOMDocument();
$doc->load($url);
$channels = $doc->getElementsByTagName("channel");
$RSS_Content = array();
foreach($channels as $channel)
{
$items = $channel->getElementsByTagName("item");
foreach($items as $item)
{
$y = RSS_Tags($item, 1); // get description of article, type 1
array_push($RSS_Content, $y);
}
}
}
function RSS_Links($url, $size = 15)
{
global $RSS_Content;
$page = "<ul>";
RSS_RetrieveLinks($url);
if($size > 0)
$recents = array_slice($RSS_Content, 0, $size + 1);
foreach($recents as $article)
{
$type = $article["type"];
if($type == <img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" /> continue;
$title = $article["title"];
$link = $article["link"];
$page .= "<span class=\"title\" style=\"font-color:469EB5;\"><a href=\"$link\">$title</a></span>\n";
}
$page .="</ul>\n";
return $page;
}
function RSS_Display($url, $size = 15, $site = 0, $withdate = 0)
{
global $RSS_Content;
$opened = false;
$page = "";
$site = (intval($site) == <img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" /> ? 1 : 0;
RSS_Retrieve($url);
if($size > 0)
$recents = array_slice($RSS_Content, $site, $size + 1 - $site);
foreach($recents as $article)
{
$type = $article["type"];
if($type == 0)
{
if($opened == true)
{
$page .="</ul>\n";
$opened = false;
}
$page .="<b>";
}
else
{
if($opened == false)
{
$page .= "<ul>\n";
$opened = true;
}
}
$title = $article["title"];
$link = $article["link"];
$page .= "<span class=\"title\" style=\"font-color:469EB5;\"><a href=\"$link\">$title</a></span>\n";
if($withdate)
{
$date = $article["date"];
$page .=' <span class="rssdate">'.$date.'</span>';
}
$description = $article["description"];
if($description != false)
{
$page .= "<br><span class='rssdesc'>$description</span>";
}
$page .= "</li>\n";
if($type==0)
{
$page .="</b><br />";
}
}
if($opened == true)
{
$page .="</ul>\n";
}
return $page."\n";
}
?>
Any help will be greatly appreciated. Thanks. been trying to get this to work for a while now , but have had no luck, this works fine in IE but firefox seems to overlap my footer div. http://www.urbandream.net/mms/common/layout/site.html if anyone could help or point me in the right direction I owuld be greatful. Also if anyone is on a mac, I owuld be greatful of a screen shot to see how it looks. scott http://www.mrossana.com/eesdvr/ The main thing that I am worried about here is in the header. The header looks exactly the way I want it to in Firefox (Mac and PC) and Safari (Mac), but, in Internet Explorer, the "headerborder" div overlaps the ul menu in the "header" div. The "header" ul comes before the "headerborder" div in the code, so, with the negative top marging, the "headerborder" div should be behind the ul menu. Any ideas on how to fix this in IE? Do I have to add some z-index values? Or is there a better way to do this layout? Any suggestions greatly appreciated. Hi, I'm creating a website for a new local buisness (Hat Hire Shop). I'm having some trouble with IE and getting images to overlap two <div>'s. If you look at this page using Firefox: http://209.123.229.141/hatz/index.html User: hatz Pword: hatz Then you can see the correct layout. If you view it in IE, then you will see that the images are in the top <div> only and will not overlap. CSS He http://209.123.229.141/hatz/css/ (Images used are only examples found on the Internet. Client will be providing images of their actual hats.) I am new to css, and i have a div that is overlapping another div if the page gets too long. It looks fine in IE, but not in Firefox.. here is what I have: style.css Code:
body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
background-attachment: fixed;
font-size: 11px;
color: #FFFFFF;
background-color: #000000;
background-image: url(images/page_bg.jpg);
margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;
padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;
background-repeat: repeat-x;
}
td
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFCC00;
}
#mainarea
{
background-color: #000000;
width: 756px;
align: center;
text-align: center
}
#logo
{
float: right;
width: 221px;
border: #CCCCCC; border-style:solid;
border-top-width: 2px; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 2px;
}
#quote
{
padding-top: 5px;
padding-left: 5px;
text-align: left;
border: #CCCCCC; border-style:solid;
border-top-width: 2px; border-bottom-width: 0px; border-left-width: 2px; border-right-width: 0px;
}
#mainimage
{
float: left;
width: 756px
}
#footer
{
background-color: #000066;
padding-bottom: 5px;
text-align: left;
padding-left: 5px;
vertical-align: top;
border: #CCCCCC; border-style:solid;
border-bottom-width: 2px; border-top-width: 0px; border-left-width: 2px; border-right-width: 2px;
}
#middlearea
{
background-color: #000000;
background-image: url(images/bg-mainarea.jpg);
text-align: left;
height: 415px;
vertical-align: top;
background-repeat: no-repeat;
background-align: left;
border: #CCCCCC; border-style:solid;
border-bottom-width: 2px; border-top-width: 0px; border-left-width: 2px; border-right-width: 2px;
}
#leftnav
{
float: left;
width: 198px;
vertical-align: top
}
#content
{
color: #999999;
float: right;
width: 527px;
padding-left: 7px;
padding-right: 7px;
padding-bottom: 7px;
padding-top: 15px;
line-height: 18px;
vertical-align: top
}
a
{
color: #FFFFFF;
text-decoration: none
}
a:hover
{
color: #6699CC;
text-decoration: underline
}
main.html Code: <html> <head> <title>Title Here</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div align="center"> <div id="mainarea"> <div class="style1" id="logo"> <img src="images/logo.gif"> </div> <div id="quote"> Put some kind of a quote/saying/slogan here?<br><br><br> </div> <div id="mainimage"> <img src="images/image-home.jpg"> </div> <div style="clear:both"> </div> <div id="middlearea"> <div id="content"> blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br> blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br> blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br> </div> <div id="leftnav"> Navigation Links Here </div> </div> <div id="footer"> Footer text here </div> </div> </div> </body> </html> Hey there CSS folk, Well, I have what appears to be an overlapping issue in both Chrome and Internet Exploder: Please go he http://www.ultimatelandsale.com/ If you notice on the right side, just below where it says "Browse," the word "Contact" gets cut off. I've tried lengthening the middle div, but to no avail...it still gets cut off. Any ideas as to what's causing this? Much thanks in advance! I'm trying to overlap two divs -- currently works fine in FF, but not IE 6 or 7. I need the left column to overlap the right column. Here's a sample of what I have: CSS Code: body {
background-color:#e4ebf7;
height:100%;
}
#outer {
position:relative;
margin:0 auto;
width:1000px;
padding:0px;
overflow:visible;
height:100%;
z-index:1;
}
#header {
position:relative;
height:28px;
border:1px solid #5e5e5e;
margin-bottom:5px;
z-index:2;
}
#left_column {
position:relative;
height:100%;
float:left;
width:277px;
overflow:visible;
z-index:4;
}
html #right_column {
height:768px;
}
#right_column {
position:relative;
background-color:#FFFFFF;
border:1px solid #5e5e5e;
border-left:none;
margin-left:5px;
min-height:768px;
height:auto;
z-index:3;
}
#footer {
clear:both;
height:35px;
background-color:#FFFFFF;
border:1px solid #5e5e5e;
margin:0;
margin-top:15px;
z-index:2;
}
HTML Code: <body> <div id="outer"> <div id="header">stuff here</div> <div id="left_column">bunch of other divs here</div> <div id="right_column">bunch of other divs here</div> <div id="footer">footer stuff here</div> </div> </body> |
|||||||