|
CSS - Ie6 Issue: Spacer Div In Right Column Sits Below Bottom Of Left Column
Hi all,
I've tried searching around for this issue, but I've not found any help so far and it's driving me nuts. I hope someone here can advise. This is an abridged version of the site's code for example: Code: <style type="text/css">
<!--
#main1 {
padding: 0px;
margin: 0px;
}
#left {
width:260px;
margin:0;
padding:0;
float: left;
}
#left-top {
background-image: url(../images/panel-top-left.gif);
background-repeat: no-repeat;
background-position: center top;
height: 16px;
margin: 0px;
padding: 0px;
}
#left-middle {
background-image: url(../images/panel-middle-left.gif);
background-repeat: repeat-y;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 2px;
}
#left-bottom {
background-image: url(../images/panel-bottom-left.gif);
background-position: center;
height: 18px;
}
#logo {
background-image: url(../images/swalingslogo.gif);
background-position: center top;
width: 260px;
height: 120px;
background-repeat: no-repeat;
}
/* Navigation List */
#navlist
{
padding-left: 0;
margin-bottom:10px;
width: 217px;
}
#navlist li
{
list-style: none;
margin-bottom:4px;
padding: 0;
font-size:1.2em;
line-height:1.8em;
width:217px;
height:32px;
background-image:url(../images/nav2.gif);
background-repeat:no-repeat;
margin-top: 0;
margin-right: 0;
margin-left: 0;
}
#navlist li a:link, #navlist li a:visited {
display:block;
text-decoration: none;
color:#039;
width:207px;
height:32px;
font-weight:bold;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
#navlist li a:hover {
text-decoration: none;
color:#FF6600;
}
/* Testimonials */
div#fscroller {
width:200px;
height:200px;
background-image:url(../images/bg-testimonials.gif);
background-repeat:no-repeat;
margin-left:8px;
}
div#fscroller p {
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 5px;
}
/* Middle Column */
#middle {
margin-top: 0;
margin-right: 0px;
margin-bottom: 0;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
text-align: justify;
margin-left: 260px;
}
#middle #top-left {
background-image: url(../images/panel-top-rightleft.gif);
height: 16px;
font-size: 2px;
background-repeat: no-repeat;
}
#middle #top-right {
float: right;
margin-top: -16px;
background-image: url(../images/panel-top-rightright.gif);
height: 16px;
width: 20px;
font-size: 2px;
}
#middle a {
color: #003399;
}
#middle a:hover {
text-decoration: none;
}
/** Country Titles **/
#middle h2#unitedkingdom {
background-image: url(../images/title-unitedkingdom.gif);
background-repeat: no-repeat;
height: 26px;
width: 201px;
margin-bottom: 6px;
}
#middle h2#antigua {
background-image: url(../images/title-antigua.gif);
background-repeat: no-repeat;
height: 26px;
width: 128px;
margin-top: 16px;
margin-bottom: 6px;
}
/* Minisite Links */
div.minisite {
float: left;
}
div.minisite span {
display: none;
}
div.minisite a {
background-position: top;
background-repeat: no-repeat;
height: 168px;
width: 190px;
display: block;
}
div.minisite a:hover {
background-position: bottom;
}
a#minisite-swimminglessons {
background-image: url(../images/swimming-lessons-uk.jpg);
}
.clear {
clear:both;
}
.hidden {
display: none;
}
.notopgap {
margin-top: 0;
}
.nobottomgap {
margin-bottom: 0;
}
.inside {
background: #EFEFEF;
padding-left: 10px;
padding-right: 10px;
}
-->
</style>
<div id="main1">
<div id="left">
<!-- Logo -->
<div id="logo"></div>
<div id="left-top"></div>
<div id="left-middle">
<!-- Navigation -->
<!--#include file="../inc/nav2.asp" -->
<!-- Testimonials -->
<!--#include file="../inc/testimonials.asp" -->
<!--#include file="../inc/special-offers.asp" -->
</div>
<div id="left-bottom"></div>
</div>
<!-- Middle Column -->
<a name="skipnav" class="hidden"></a>
<div id="middle">
<div class="top-left"></div><div class="top-right"></div>
<div class="insideleft"><div class="insideright"><div class="inside"><div class="gap-saver"></div>
<!-- UK Sites -->
<h2 id="unitedkingdom"><span class="hidden">United Kingdom</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swimming Lessons</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Residential Courses</span></a></div>
<div class="clear"></div>
<!-- Antigua Sites -->
<h2 id="antigua"><span class="hidden">Antigua</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Soccer</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Parties and Events</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings International School of Swimming</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Babysitting and Nanny Agency</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Rugby</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Volleyball</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="clear"></div>
<div class="gap-saver"></div>
</div></div></div>
<div class="bottom-left"></div><div class="bottom-right"></div>
</div>
<!-- End Middle Column -->
</div>
I've placed the Country Title in an H2 tag, then beneath that, each anchor is enclosed in a DIV, and is set as a left-floated block. Then I placed a spacer DIV (clear: both) to create a new line, then repeated with H2 and links. This all works fine in Firefox, IE7 and Opera, but of course IE6 is being a pig as usual. The spacer DIV is pushed to sit alongside the bottom of the left column, and I can't figure out how to (or if I can) stop this. I can't add in links properly, so I hope this is acceptable under the rules -- The site in question is: www.swalings .com/swalings/index4.asp and here's a screenshot of IE6 behaviour: www.swalings .com/images/swalings-ie6-troubleshoot.jpg Hopefully that's enough information to go on, please let me know if there's something I missed out. Thanks a lot! Rob Similar TutorialsHello, My first CSS site was going fine; I was learning as I went and drawing from different resources. My code and CSS probably isn't very pretty ( I validated it, I know it needs to be cleaned up) but things were working. Then I went back and made some adjustments concerning the widths of my column divs. Now I find that Firefox is respecting the rightcolumn div (specifically: <div id="contentright">)but IE keeps kicking it to the bottom left. I've tried messing with the column lengths so everything fits accordingly as specified in the frame div width. Can anyone please take a look and offer a suggestion? thanks. http://www.brinjac.com/test/binnspark.html can i make my left column, the same height as my right column? or infact, if the left is taller than the right, the right extends to it and if the right is taller than the left the left extends to it? is this possible, cheers heres my css: left column, is #leftNav and the right column is #contentMain PHP Code: #content { margin:0px auto; padding: 0; width: 760px; } #contentMain { padding: 0; margin: 0; float: right; width: 632px; } #leftNav { color: #000; float: left; margin: 0; padding: 0; width: 128px; } Hi, hopefully you enjoyed the title, I had a good laugh thinking of it in that split second it took me to write it. So, I found a 3 column css layout on a CSS generator website, because I got sick of trying to hack up layouts I've made in the past that didn't work. Anyhow, it was working fine with one line of content in each column when I tested it out, however, once content in the middle column was added, and stretched vertically beyond a certain point, it will drag the left columns content down with it. The right column is not affected in any way. I have spent a few hours trying to look for reasons as to why it would happen, but I had no luck. I would appreciate any help... so thank you in advance if you take a stab at it. Here's the html: Code: <body> <div id="pagewidth"> <div id="header"></div> <div id="wrapper" class="clearfix" > <div id="twocols" class="clearfix"> <div id="maincol">Main Text, woot. (aka hi hi hi)</div> <div id="rightcol">Sidebar, yippee.</div> </div> <div id="leftcol"> <div id="navigation">test</div> </div> </div> <div id="footer"></div> </div> </body> and the CSS: Code: html, body
{
background: #333399;
margin:0;
padding:0;
text-align:center;
font-family: Verdana, Arial, Tahoma;
font-size: 12px;
font-weight: normal;
color: black;
}
#pagewidth
{
width: 750px;
text-align:left;
margin-left:auto;
margin-right:auto;
background: #333399 url('images/bodycontent.gif') repeat-y center top;
}
#header
{
position:relative;
height:138px;
background: url('images/header.gif') center;
width: 100%;
}
#leftcol
{
width: 118px;
float: left;
left: 25px;
position: relative;
background-color: transparent;
margin:0; padding:0;
}
#twocols
{
width: 700px;
float: right;
position: relative;
}
#rightcol
{
width:180px;
right: 25px;
float:right;
position:relative;
background-color: transparent;
}
#maincol
{
background-color: transparent;
float: left;
left: 100px;
display: inline;
position: relative;
width: 390px;
}
#footer
{
text-align: center;
height:39px;
background: url('images/footer.gif');
clear:both;
}
.clearfix:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */
/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
/*hide the right column when printing*/
#rightcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}
Again, thank you in advance if you can come up with anything. 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. Hi there, I have a left coloumn that is used for my navigation. However, I want it to go all the way down the page so it is the same height as my content div. I have tried the following, but it is not working. PHP Code: float: left; width: 200px; background-color: #070c12; padding: 15px; height: 100%; Any ideas? Thanks Hi, I have a table in my website and i want in one column to place an image at the bottom of it (and stay there when the height of the table changes). The column already has a repeated background image. Thanks Ok, so I'm really new to this, but I've spent several hours over the last few days tinkering with things but nothing I'm doing works: In my two column CSS layout my left navigational column is stuck hanging out underneath the center column. It looks like this both in IE and Firefox. I've searched around on here and haven't found anything, but maybe I'm not using the right keywords. Any help or suggestions for this newbie greatly appreciated! My html code: 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>
<meta http-equiv="Content-Type" content=
"text/html; charset=us-ascii" />
<title>Art</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- begin header -->
<div id="header"><center><img src="logo.jpg" alt="logo" /></center></div>
<!-- end header -->
<!--begin container div - no content should be outside of the container div -->
<div id="container">
<!-- begin main content -->
<div id="center" class="column">
<br />
<img alt="Still Life" src="slc08.jpg" height="391" width="784" />
<h5>Still Life with Colour '08</h5>
</div>
<!-- end main content -->
<!--begin left nav list -->
<div id="left" class="column">
<br />
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About the Artist</a></li>
<li><a href="resume.html">Artist's Resume</a></li>
<li><a href="gallery.html">Gallery</a></li>
</ul>
</div>
<!--end left nav list -->
<!--close content div -->
</div>
<!--begin footer information -->
<div id="footer">
<center><p class="foot">Copyright 2008</p></center>
</div>
<!-- end footer information -->
</body>
</html>
My CSS Code: Code: body{
background-color: White;
font-size: 16px;
margin: 0;
padding: 0;
}
#header{
background-color:#333;
height:150px;
}
#container {
padding-left: 200px; /* LC width */
padding-right: 100px; /* RC width */
}
#left{
float:left;
width:200px;
background-color:#afeeee;
min-height:650px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:650px; /* for IE5.x and IE6 */
}
#center {
background-color:#ffffff;
min-height:650px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:650px; /* for IE5.x and IE6 */
}
#footer {
clear:both;
background-color:#48d1cc;
height:100px;
}
/*** IE6 Fix ***/
* html #left {
left: 150px; /* RC width */
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}
ul.nav {
list-style: none;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: large;
}
ul.resume {
list-style: disc;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
line-height: 1.3em;
}
#left a {
border-bottom: 1px solid #333;
border-top: 1px solid #333;
display: inline;
font-family: tahoma,verdana,sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 2.75em;
margin: 0;
margin-right: 2px;
text-align: center;
text-decoration: none;
}
#foot {
font-family: Arial, Helvetica, sans-serif;
font-size: xx-small;
}
A website generally has a header/footerand then a left column and main column. The left column contains links and the main column contains the content. Years ago I saw a design that was validated and used CSS to achieve a tableless design that actually had the main column content BEFORE the left column links in the sourcecode, but on the site itself, it was like a normal site (left column was on the left and main content was on the right or center). Does this achieve better search engine results by having the main content first in the eyes of the search engines, but in reality, to the people, the left links actually shows up first. Also, can someone provide a link to this or show some coding on what you have seen done to achieve this? http://zeroonedesign.com/beyond%2Dmap/www/ Take a look at it first in Firefox, and then in IE. As you can see IE seems unable to understand what display:inline means, or perhaps its interpreting the pixel values I set differently. I have tried a whole pile of different things. I've tried taking out the containing <div style="relative> and it makes no difference. I've tried setting everything static with no sizes but then it all collapses. I am THIS close to moving to a table based layout... sometimes CSS is just so frustrating. Can anyone spot something I'm just missing? Many thanks hey , i need help guys,, www.bekirhoca.com < this is my site and the left columns height is not fixed to the content. I want all the columns at the same height. But when the middle content is long the left column remains short. And also I have a problem with that menu or something. Just go over the menus without clicking and you'll see the scrollbar is going crazy and the lower part of the page acts crazy when mouse is over links. And the page is a little bit heavy acting for that reason,, but that problem is okay in firefox although not in ie. Please help me... thanx from now for your replies example is at http://bluewebpages.com/arch.php I am fairly proficient at coding css and think it's about time to clean(organize) it all up, even though it does validate. Anyway I was wondering if someone could please help me with the overlap problem for the right (smaller) column. I want the entire main content of the page, the part before the footer, to extend down when there is more content to side, not just the left/main content side. EDIT: Fixed .. thanks! The `clear:both;` was what it needed I've spent the last two days struggling, trying to get the footer to stay at the bottom of the window and the two right most columns in my layout to stretch to the footer. I've search this site thorough for answers, and yes, there were many of them. But still, after implementing everyone I came across, I can't get the layout to do the above criteria in both IE and Firefox. HTML 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> <title>Mall</title> <link href="css/template.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="main"> <div id="header"> <div id="ecommerce"> <div id="logo"><img src="images/logo.jpg" width="188" height="18" alt="Mall" title="Mall" border="0" /></div> <div id="text"><a href=""><img src="images/cart.gif" width="16" height="16" alt="Master Basket" title="Master Basket" border="0" /> Basket</a> | <a href="">Register</a> | <a href="">Login</a></div> </div> <div id="content"> <div id="searchform"> <form> <fieldset> <legend>Search Shopping Mall</legend> <div id="search_btn"><input type="submit" value="Search" class="button" /></div> <div id="search_type"> <select> <option>Products</option> <option selected="selected">Stores</option> </select> </div> <div id="search_input"><input type="text" name="query" id="query" value="" size="22" maxlength="200" /></div> </fieldset> </form> </div> <!-- end searchform --> </div> <!-- end content --> </div> <!-- end header --> <div id="mall"> <!-- top navigation --> <div id="topnav"> <div id="nav-container"> <ul id="nav"> <li id="nav-home"><a href="index.html" accesskey="1">Home</a></li> <li id="nav-browse"><a href="browse.html" accesskey="2">Browse Mall</a></li> <li id="nav-getastore"><a href="getastore.html" accesskey="3">Get A Store</a></li> <li id="nav-featstore"><a href="featstore.html" accesskey="4">Featured Store</a></li> <li id="nav-featitem"><a href="featitem.html" accesskey="5">Featured Item</a></li> <li id="nav-aboutus"><a href="aboutus.html" accesskey="6">About Us</a></li> <li id="nav-contactus"><a href="contactus.html" accesskey="7">Contact Us</a></li> <li id="nav-help"><a href="help.html" accesskey="8">Help</a></li> </ul> </div> </div> <!--<div id="topnav"> <div id="menu"><a href="index.html">Home</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="browse.php">Browse Mall</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="">Get A Store</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="">Featured Stores</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="browse.php">Featured Items</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="">About Us</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="">Contact Us</a><span id="sp"><img src="images/navsp.gif" align="absmiddle" /></span><a href="">Help</a></div> </div>--> <!-- banner image --> <div id="banner"><img src="images/banner.jpg" width="764" height="150" alt="Welcome to the Mall!" title="Welcome to the Mall!" border="0" /></div> <div id="midspacer"></div> <div id="mallbody"> <!-- left navigation --> <div id="leftnav"> <div class="menu_topleftcorner"><img src="images/menu_topleftcorner.jpg" width="6" height="6" border="0" /></div> <br/> <div class="sections">Mall Categories</div> <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">Home</a></li> <li><a href="">Books, Music & Movies</a></li> <li><a href="">Clothing & Apparel</a></li> </ul> </div> <br/> <div class="sections">Shop by Store</div> <ul id="navlist"> <li id="active"><a href="#">Salsa Products</a></li> </ul> <div class="menusp"></div> <div class="menu_bottomleftcorner"><img src="images/menu_bottomleftcorner.jpg" width="6" height="6" border="0" /></div> </div> <!-- content --> <div id="content"> <p><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/></p> </div> <!-- right navigation --> <div id="rightnav"> <p></p> </div> </div> </div> <!-- end mall --> </div> <!-- end main --> </div> <!-- end wrapper --> <div id="footer"> <div id="bg"> ads ad ad a </div> <div id="compliant"> <a href="http://validator.org/check/referer" target="_blank"><img src="images/compliant/w3cxhtml10.png" width="80" height="15" alt="W3C XHTML 1.0 Validated" title="W3C XHTML 1.0 Validated" border="0" /></a> <a href="http://jigsaw.w3.org/check/referer" target="_blank"><img src="images/compliant/w3ccss.png" width="80" height="15" alt="W3C CSS 1.0 Validated" title="W3C CSS 1.0 Validated" border="0" /></a> <a href="http://www.mozilla.org" target="_blank"><img src="images/compliant/mozilla.png" width="80" height="15" alt="Mozilla Firefox Browser Compatible" title="Mozilla Firefox Browser Compatible" border="0" /></a> </div> </div> <!-- end footer --> </body> </html> PS - Kravitz, I've check alot of the links you have posted. While they were helpful, I wasn't successful in implemented many of the techniques suggested in them to solve my problems. I have the following: Quote: <div class="video"> <h1>Header</h1> <p><a href="#" title="title"><img src="images/01.jpg" alt="alt" width="150" height="150" class="img-left border"/></a></p> <div class="redBG border" style="margin-left:180px;"> <p><strong>Content</strong></p> </div> </div> <div class="video"> <h1>Header</h1> <p><a href="#" title="title"><img src="images/01.jpg" alt="alt" width="150" height="150" class="img-left border"/></a></p> <div class="redBG border" style="margin-left:180px;"> <p><strong>Content</strong></p> </div> </div> Not the nicest of code but it'll do for now. I want each div with class=video to come under one another but at the moment, the 2nd div starts just after the text in the first div and not actually under it. This is in the middle column of a 3 column CSS layout. The bottom is what the .video class has. Quote: .video { margin-bottom:10px; } Any help? Using my http://www.thatspotonline.com as an example I'll explain my problem. I'm trying to use a 3 column fluid layout with a header and a footer. I've gotten past the browser problem with IE and now face a new problem with proper display in firefox. With the included css and attached xhtml layout I end up with a rather large gap on the bottom of the design without adding quite a bit of content to make the page length grow. I've tested with about everything else and this problem doesn't show up. I would gladly take some advise if anyone has any thanks. Code: * {
margin:0 auto;
padding:0;
}
h2 {
font:bold 2em/1.4 "Lucida Bright", Georgia, Times, serif;
color:#8B9F86;
}
h3 {
font:bold 1em/1.6 "Lucida Bright", Georgia, Times, serif;
color:#845697;
}
a {
color:#4C53E0;
}
a:focus, a:hover, a:active {
color:#EB8518;
}
body {
background:#000000 url(images/body2.jpg);
background-repeat:repeat;
background-position:top left;
font-size:90%;
margin:0 auto;
padding: 24px 0;
}
#outer {
margin:0 auto;
width:80%;
min-width:40em;
max-width:70em;
border:10px solid #EEEEEE;
border-width:0 5px;
background:#EEEEEE;
}
ul#nav:after, #outer:after, #sub:after, form:after, form div:after {
content:".";
display:block;
visibility:hidden;
clear:both;
height:0;
}
* html #nav, * html #content, * html form, * html form div {
height:1%;
}
ul#access, .off {
position:absolute;
left:-1000em;
top:-1000em;
}
hr {display:none}
#header {
background:#EBEBE9 url(images/banner-bg2.jpg) repeat-x left bottom;
}
#header h1 {
padding-left:.6em;
font:bold 3em/2.5 "Lucida Bright", Georgia, Times, serif; /* line-height allows for image of buildings */
letter-spacing:1pt;
color:#FFFFFF;
background: transparent url(images/banner2.jpg) no-repeat right bottom;
}
#header h1 a {
color:#FFFFFF;
text-decoration:none;
}
ul#nav {
list-style:none;
margin:3px 0 1em;
text-align:center;
background:#FFFFFF;
border-top:2px solid #444444;
border-bottom:2px solid #444444;
}
#nav li {
list-style:none;
margin:0 auto;
width:94%;
min-width:40em;
max-width:70em;
display:block;
text-align:center;
background:#000000;
}
* html #nav li {
width:24.9%;
}
#nav a {
display:block;
font:bold 1em/1.8 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
text-decoration:none;
color:#444444;
margin:1px;
background:#FFFFFF;
}
#nav a:focus, #nav a:hover, #nav a:active {
border:1px inset #8B9F86;
margin:0;
color:#EB8518;
text-decoration:underline;
}
ul#nav li#active {
background:#FFFFFF;
font:bold 1em/1.8 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
color:#000000;
text-decoration:underline;
}
#sub, #right {
font: 1em/1.5 'Lucida Grande', arial, verdana, sans-serif;
word-spacing:.1em;
margin-bottom:1em;
}
#sub {
width:74%;
float:left;
position:relative;
}
#center {
width:65%;
float:right;
}
#left {
width:33%;
float:left;
}
#right {
width:25%;
float:right;
}
#center p {
margin:.5em 2% .5em 0;
}
img.img-right {
float:right;
}
#left h2 {
color:#845697;
font-size:1.5em;
}
#left p {
font-size:.9em;
}
#right {
font-size:.9em;
}
#right h2 {
font-size:1.2em;
}
/** Footer **/
#footer {
clear:both;
margin-top:1em;
font: 0.9em/1 'Lucida Grande', arial, tahoma, verdana, sans-serif;
border-top:3px double #C8DCC2;
}
#footer p {
margin:1em 1em 1em 0;
text-align:center;
padding: 21px 0;
}
#footer ul {
list-style:none;
margin-top:.7em;
}
#footer li {
display:inline;
border-right: 1px solid #C8DCC2;
padding:.3em 2%;
}
Hi I am trying to make a table to display some stuff within a fix sized window. I want to have 5 columns of fixed width and one column that spans the rest of the remaining space. The Idea is to allow the widths of the first 5 columns to be changed by a script and having the last one adapting as needed... html Code: Original - html Code <div class="container"><table cellspacing="0"> <colgroup> <col width="40" /> <col width="220" /> <col width="120" /> <col width="65" /> <col width="40" /> </colgroup> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th style="width: 100%;></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td style="width: 100%;></td> </tr> </tbody> </table></div> <div class="container"><table cellspacing="0"> <colgroup> <col width="40" /> <col width="220" /> <col width="120" /> <col width="65" /> <col width="40" /> </colgroup> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th style="width: 100%;></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td style="width: 100%;></td> </tr> </tbody> </table></div> css Code: Original - css Code div.container { height: 400px; width: 800px; overflow: scroll; } table { width: 100%; } td { border-style: solid; border-color: silver; border-width: 0px; padding: 1px 3px; } th { border-style: outset; border-color: silver; border-width: 2px; background: silver; padding: 1px 3px; }
It really does fill the entire space but the last column crushes all the other into their minimal width resulting in linebreaks between words inside the cells... Please help me Hi, I'm working on a website for a church and we're near completion, but I'm having trouble getting the site to display properly in IE7 on Windows XP and a few other browsers according to browsershots.org. CSS and XHTML both validate at w3c.org. I've ripped this thing apart and put it back together with no luck. The really weird thing is the Home page looks fine, but in the rest of the pages the body content gets pushed below the left and right navigation bars. Is it a CSS float problem? Margins or paddings??? Home page: Looks OK in IE7, at least on my machine - http://www.stlukeslutheran.com/index_temp.php Ministry page: Content is pushed to bottom of page - http://www.stlukeslutheran.com/mini...ns_ministry.php The CSS files are at http://www.stlukeslutheran.com/css/main.css and http://www.stlukeslutheran.com/css/common.css. Would anyone be willing to take a look? Thanks in advance. I'm attempting to get a page that has a header, footer, left navigation bar with a fixed width, with a right "fluid" content section. I can get it to work by giving the main content a "margin-left" of the width of the navigation panel, and absolutely positioning the navigation. Problem is, with the navigation being absolutely positioned, it takes it out of the flow and doesn't push the container to fit its contents. I've trying playing with using floated divs, which is I'm sure the way I'll have to go, but I want the navigation bar to always be a fixed width of 175px, and I want the content section to stretch to fill the remaining space. I'd also like to make sure the content portion appears BEFORE the navigation panel in the order it appears on the HTML for SEO purposes. I'm sure it's easy using Javascript, but I'd like to do a pure CSS solution, if possible. How do I do that? Here is the link if you want to have a look: http://www.chcs-ut.com/support.php?section=technical Hi all, I'm trying to achieve the following: <div id="left">This column is of blue background, and stretches all the way to the left.</div> <div id="center"> THIS COLUMN IS FIXED WIDTH, 760px </div> <div id="right">This column is of red background, and stretches all the way to the right.</div> Hope that is self explanatory.. I've Googled all this but can only find solutions for fluid "center" columns with fixed width right/left columns. I'm trying to do the opposite. Could anyone let me know how I can do this? I've got some messy CSS that definitely needs to be corrected, I'm trying out different things so here's my 'trial& error' code: Code:
#left {
background-color: blue;
float: left;
margin: auto;
position: absolute;
}
#center {
background: #DFDFEB url(../images/body/top.jpg) no-repeat;
width: 760px;
margin: 0 auto;
}
#right {
background-color: red;
}
Thanks in advance! |
|||||||