|
CSS - Left Nav Column Stays Under Center
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;
}
Similar TutorialsHi 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! Probably there already was such question, but my Internet connection is very slow and I don't have time to search thru topics. So, when I put an image into centercolumn that has big width my right column stays where it was, but center column with the picture goes to the right widely, and right column stays over the picture. But I want right column always follow center column (stays on the right of centercolumn whatever size it is). How to fix it in css? here is my code: BODY { PADDING-RIGHT:0; PADDING-LEFT:0; BACKGROUND:url(img_86.gif) #ddd; PADDING-BOTTOM:0; MARGIN:0; PADDING-TOP:0; FONT-SIZE:12px; LINE-HEIGHT:18px; FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif; } .registered { BACKGROUND-COLOR:#ff9; } #centercolumn { BORDER-RIGHT:#666 0 solid; PADDING-RIGHT:4px; BORDER-TOP:#666 0 solid; PADDING-LEFT:4px; PADDING-BOTTOM:10px; MARGIN-LEFT:179px; BORDER-LEFT:#666 0 solid; MARGIN-RIGHT:179px; PADDING-TOP:10px; BORDER-BOTTOM:#666 0 solid; } #header { PADDING-RIGHT:8px; BORDER-TOP:#182746 2px solid; PADDING-LEFT:8px; BACKGROUND:url(img_87.gif) #314e8c; PADDING-BOTTOM:8px; PADDING-TOP:8px; BORDER-BOTTOM:#182746 2px solid; } #leftcolumn { MARGIN-TOP:4px; LEFT:0; WIDTH:180px; POSITION:absolute; FONT-SIZE:11px; LINE-HEIGHT:16px; } #rightcolumn { MARGIN-TOP:4px; RIGHT:0; WIDTH:180px; POSITION:absolute; FONT-SIZE:11px; LINE-HEIGHT:16px; } #footer { CLEAR:both; MARGIN-BOTTOM:12px; } .block { BORDER-RIGHT:#999 1px solid; PADDING-RIGHT:4px; BORDER-TOP:#999 1px solid; PADDING-LEFT:4px; BACKGROUND:#fff; PADDING-BOTTOM:4px; MARGIN:6px 6px 12px; BORDER-LEFT:#999 1px solid; PADDING-TOP:4px; BORDER-BOTTOM:#999 1px solid; } .block H3 { PADDING-RIGHT:4px; PADDING-LEFT:4px; FONT-SIZE:11px; BACKGROUND:#a7b6c9; PADDING-BOTTOM:4px; MARGIN:-4px -4px 4px; COLOR:#26344c; PADDING-TOP:4px; BORDER-BOTTOM:#999 1px solid; } .block P { MARGIN:0; } .content { BORDER-RIGHT:#999 1px solid; PADDING-RIGHT:4px; BORDER-TOP:#999 1px solid; PADDING-LEFT:4px; BACKGROUND:#fff; PADDING-BOTTOM:4px; BORDER-LEFT:#999 1px solid; PADDING-TOP:4px; BORDER-BOTTOM:#999 1px solid; } .entrycontent { BORDER-RIGHT:#999 1px solid; PADDING-RIGHT:12px; BORDER-TOP:#999 1px solid; PADDING-LEFT:12px; BACKGROUND:#fff; PADDING-BOTTOM:12px; BORDER-LEFT:#999 1px solid; PADDING-TOP:12px; BORDER-BOTTOM:#999 1px solid; } .content P { MARGIN:4px 2px; } H1 { DISPLAY:inline; FONT-SIZE:16px; MARGIN:4px; COLOR:#fff; } H2 { PADDING-RIGHT:2px; PADDING-LEFT:2px; FONT-SIZE:13px; PADDING-BOTTOM:2px; MARGIN:0; COLOR:#26344c; PADDING-TOP:2px; BORDER-BOTTOM:#999 1px dashed; } H3 { FONT-SIZE:13px; } .entryfooter { CLEAR:both; PADDING-RIGHT:0; PADDING-LEFT:0; FONT-WEIGHT:normal; FONT-SIZE:11px; PADDING-BOTTOM:6px; MARGIN:0; COLOR:#666; LINE-HEIGHT:16px; PADDING-TOP:6px; FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif; TEXT-ALIGN:right; } .entryfooter_linkdump { PADDING-RIGHT:0; PADDING-LEFT:0; FONT-WEIGHT:normal; FONT-SIZE:10px; PADDING-BOTTOM:6px; MARGIN:0; COLOR:#666; LINE-HEIGHT:16px; PADDING-TOP:6px; BORDER-BOTTOM:#666 1px dashed; FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif; TEXT-ALIGN:right; } A { COLOR:#253a69; } .prevnext_links { FLOAT:right; COLOR:#fff; } .searchbox { FONT-SIZE:10px; WIDTH:10em; } .searchbutton { BORDER-RIGHT:#000 1px solid; BORDER-TOP:#000 1px solid; FONT-SIZE:10px; BORDER-LEFT:#000 1px solid; BORDER-BOTTOM:#000 1px solid; } IMG.badge { BORDER-TOP-WIDTH:0; BORDER-LEFT-WIDTH:0; BORDER-BOTTOM-WIDTH:0; MARGIN-BOTTOM:2px; BORDER-RIGHT-WIDTH:0; } A IMG.badge:hover { MARGIN-BOTTOM:1px; BORDER-BOTTOM:#314e8c 1px solid; } P,HTML,TABLE,TD { FONT-SIZE:12px; LINE-HEIGHT:18px; FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif; } #leftcolumn P,#rightcolumn P { FONT-SIZE:11px; LINE-HEIGHT:16px; } H4,.subtitle { DISPLAY:inline; FONT-SIZE:14px; MARGIN:4px; COLOR:#fff; FONT-STYLE:italic; } .date_linkdump,.date { FONT-WEIGHT:normal; FONT-SIZE:10px; FLOAT:right; COLOR:#666; LINE-HEIGHT:16px; FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif; } .entryfooter A,.date A,.entryfooter_linkdump A,.date_linkdump A { FONT-WEIGHT:bold; COLOR:#5c6b8e; TEXT-DECORATION:none; } .date A:hover,.entryfooter A:hover { FONT-WEIGHT:bold; COLOR:#5c6b8e; TEXT-DECORATION:underline; } H1 A,.prevnext_links A { FONT-WEIGHT:bold; COLOR:#fff; TEXT-DECORATION:none; } and here's screenshot 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 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 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 am having difficulty with the center column on the following page: http://cbo4edu.org/index2.html I want to widen the center column so that the CBO NEWS heading touches the blue line which divides the center and right column. When I try to add width to the style sheet the left column moves out of alignment. Any help is much appreciated, thanks! Hi, Code: <div class="paginator"> <span style="float:left"><span class="prev_next"><a href="">PREV</a></span> <span class="page_links"><a href="">2</a><a href="">3</a><a href="">4</a></span> <span style="float:right"><span class="prev_next"><a href="">NEXT</a></span></span> </div> How do I create this layout? ------------------------------------ |PREV...............123..............NEXT| ------------------------------------ 123 must be in the middle. I have been trying to position it correctly but it always comes up messed up. Thank you. i want to position a div 383 pixels left of the center of my browser. i've tried using left:50% and a negative margin..anyone have suggestions on things to try? Every time I switch Web pages, the display starts at the far left and jumps to center. Is there a way to correct this and still allow for variations in screen sizes and resolution. http://www.madjazz.org/index.html http://www.madjazz.org/CSS/RobustLayout.css Thank you Hi, Please help! I have multiple ul lists and I'm trying to float each list left and center on the screen all of them using css. I'm not trying to have an inline list. I'm trying to keep the three list, float left but center on the page. floating works but I'm having problems centering on the page. I have used margin-left and right:auto but because I'm using float left if stays on the left. Does anyone have any solutions. thank-you in advance 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 all, http://www.jaysonsgroup.com/zpip2/z.html - please see the bottom four links (home, glossary, contact, credits) The HTML is as follows: Code:
<div class="centerlinks">
<table align='center'>
<tr>
<td>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Glossary</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Credits</a></li>
</ul>
</td>
</tr>
</table>
</div>
The CSS: Code:
.centerlinks {
float: left;
width: 550px;
text-align: center;
}
.centerlinks ul {
list-style-type: none;
}
.centerlinks li {
float: left;
padding-left: 10px;
padding-right: 10px;
}
As you can see, what I want is a simple UL list that is horizontal, plain text, and centers within the 550px div that surrounds it , even if I add a fifth <li> link in the future. On Internet Explorer, the <table align='center'> hacks fixes the problem. But it doesn't work on Firefox. Any ideas how I can center this? (I know I can use padding-left or margin-left but then this isnt a good solution when more menu items are added to that list) Thanks in advance!! I'm trying to position the image below vertically center and horizontally left to no avail. Its horizontally left but centers the top of the image in the center of the page. What am I doing wrong? <DIV style="position: absolute; top: 50%; left: 0px; border: none"><img src="images/right.jpg"></img></DIV> So I have a page where the content itself will be an 800px wide light column down the center of the page. But the background (to the left and right of the column) I want to be a gradient lightblue. I would usually accomplish this by making the background color lightblue and simply attaching the gradient to the top using CSS. Then I would create a table for the center column and make it the light background color. The problem is that on short pages, I want the center column to extend all the way to the bottom of the page, irregardless of the content. Unfortunately, height="100%" or it's CSS variants don't work for tables, cells, or even DIVS so I can't force the table to extend down to the bottom of the page. The only way it seems I could do this, then, is by using the body background image attribute or body background CSS to make the column color the background for the entire center of the document, but those attributes are already both used up creating the gradient. Any thoughts on how I might go about this. A sample of what I'm getting at is at http://www.poweredpages.com/fdr/index2.php. There, you can see the background gradient and the column that should extend to the bottom, even if there's very little text. Thanks, Jeremy Hello, 1st post on this forum. How can I create a three column layout with the left and right div-containers sticking to the left and right sides and then make the middle container stay centered? I would post links to the pages but this forum will not let me. Thanks for the help 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 |
|||||||