CSS - Making A Section Invisible

Hi all!

I have some DIVs and I want only one of them to be visible. Here is some simplified code:

Code:

<p>
	<a href="javascript:void(0);" onclick="document.getElementById('div1').style.visibility='visible';document.getElementById('div2').style.vis  ibility='hidden';">Show DIV 1</a>
	<a href="javascript:void(0);" onclick="document.getElementById('div1').style.visibility='hidden';document.getElementById('div2').style.visi  bility='visible';">Show DIV 2</a>
</p>

<div id="div1" style="visibility:visible">
	this is the content of div 1
	<br/>line 2
	<br/>line 3
</div>
	
<div id="div2" style="visibility:hidden">
	this is the content of div 2
	<br/>line 2
</div>

By clicking the <a> link, one DIV becomes visible, the other is hidden.

The problem is that there is a gap between them, both in FF2 and IE7. Can someone explain me why there is this gap, and if there is a way I can remove it?

TIA
Alex

Ok, I know IE is buggy, but this one has been driving me nuts for a while now... I'm applying borders to the edges of a div as shown by A list apart. Pretty simple stuff and I have it working perfectly under Mozilla Firefox. IE on the other hand isn't taking it so well (imagine that). The thing is, it's like nothing I've ever seen. I changed some positioning on the page one night and ever since then it's been doing it. The lower right hand image is just not rendering. What's worse, is if I add a border to the element it will displace things as a border should but the border itself doesn't show up! I don't know how I managed to muck things up this way, but I would appreciate a hand with it if anyone has any ideas.

Here is the IE Screenshot and the Firefox Screenshot

Also...
The CSS and The HTML

I have a site with a cityscape and need text/image div to appear to pass behind skyscrapers. The javascript for all the div motions are worked out.

I had planned to just overlay a higher z-index graphic of the skyscraper where I wanted the text to pass behind, but as the site now requires the ability to scale the images on a window resize, that has become difficult if not impossible to make work seamlessly.

So what I would like to do is have one div (textDiv) pass behind another (towerDiv) that shows through to the background, but when it does, it is hidden in the same way it would have been if passing behind a div with an image or background. Is it possible to make a div behave this way with css configuration?

Z-index Visible
30 towerDiv
20 >-------textDiv---------> >------------->
10 CityCityCityCityCityCityCityCityCityCityCityCityCityCity

An alternative I've thought of would be to have the textDiv jump from one div container to another somehow, but that would require javascript and I'll place that question there.

Thanks

Hi,

I am using this class for

.textbox, input.text_class, select.select_class{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #000000;
background-image: url(./textbox_shadow.gif);
height: 18px;
width: 160px;
margin: 0px;
padding: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #BFBFBF;
border-right-color: #E2E2E2;
border-bottom-color: #EEEEEE;
border-left-color: #C8C8C8;
}

for text box , how can I made tghe text box invisible or hidden

style.display = "none";

Hi Guys,

Is there a way to make a DIV invisible in IE but still available for mouse events? I have an arrows image used for navigating a map, I have placed invisible DIV boxes at select places on the arrows image and have various events triggered when these DIV's are clicked, this works fine in FF but in IE (as per usual) if the DIV doesn't have its backgroundColor set then the mouse events don't fire, it is like IE is saying 'the user can't see them therefore they aren't there'. Is there any way around this?

P.S I can't use any kind of opacity (as it will effect the map image below the arrow image) and I have to use DIV's, slicing the image or <map> aren't an option for this.

Cheers,

Chris

the contentWrapper div section collapse prematurely in mozilla, but displays fine in IE. Anyone know why?

http://www.mgan.net/work/10-06-04/layout1.html

Is there a css rule I don't understand in firefox that IE is overlooking?

hi

I have a page which has the top menu section fixed (using CSS), and the remainder of the page can be scrolled ... i.e. there are no frames.

However the code below works well in firefox, but not IE.

Could anyone please help make the code the work in IE (and all other major browsers).

cheers
nathan

here's the code:

Code:

	<style type="text/css" media="screen">


		html, body
		{
			margin: 0;
			padding: 0;
			height:100%; 
			max-height:100%; 
			font-size: 90%;
			font-family: verdana, sans-serif, arial, helvetica;
			background-image: url('gradient.jpg');
			background-repeat: repeat-x;
			background-color:#fff;
		}
		
		#header
		{	position: fixed;
          		top: 0px;
           		left: 0px;
           		width: 100%;
           		height: 100px;
           		z-index: 1;
			height: 50px;
			margin-bottom: 2em;
			background-image: url('gradient2.jpg');
			background-repeat: repeat-x;
		}

		#topmenu
		{
			position: absolute;
			left: 250px;
			top: 30px;
			width:505px;
		}

		#stats
		{
			position: absolute;
			right: 15px;
			top: 5px;
			text-align: center;
		}

		#gutter
		{
			float: left;
			width: 3%;
			height: 1px;
		}
		
		#col1
		{
			float: left;
			width: 45%;
			margin-bottom: 1em;
			border-right: 1px solid #ccc;
			padding-right: 3%;
			margin-top: 5.5em;
		}
		
		#col2
		{
			float: left;
			width: 15%;
			margin-left: 3%;
			margin-bottom: 1em;
			padding-right: 3%;
			margin-top: 5.5em;
		}
		
		#col3
		{
			position: absolute;
			right: 30px;
			margin-left: 3%;
			margin-bottom: 1em;
			margin-top: 5.5em;
		}
		
		#footer
		{
			clear: both;
			height: 50px;
			padding: .5em;
			font-size: 11px;
		}

		#footer ul {
			border-top: 1px solid #ccc;
			margin: 0;
			padding: 1em 0 0 0;
			list-style: none;
		}

		#footer li a, #footer li span {
			display: block;
			float: left;
			padding: 5px 1em;
			border-right: 1px solid #ccc;
		}

		#footer li span.copyright {
			border-right: none;
		}

		a:hover {
			color: #003;
		}
		
		h1
		{
			margin: 0;
			padding: .5em;
		}
		
		h2 { margin-top: 0; }

<!--[if IE 6]>

body
  {
  overflow: hidden;
  }
div.content
  {
  height: 100%;
  overflow: auto;
  }

<![endif]--> 
</style>

There is a problem with What's New section's appearance (right bottom). I want it appear just like here

http://aslanyurek.com/atolye/index.asp

but instead, it appears as.

http://www.refinethetaste.com/html/



Style I created for the whole right block.
PHP Code:
/*right block*/
#rblock .notice    { width:375px; height:30px; font-size:13px; line-height:30px; color:#f3f2f1; background:#5f5548 url(../images/isaret_2.gif) no-repeat 1% 55%;  text-indent:15px; }
#rblock .search    { width:325px; margin-top:1px; background:#9e0b0e url(../images/icon_arama.gif) 3% 50% no-repeat; padding:5px 5px 5px 45px;}
#rblock .search span { color: #FFFFFF; font-size:9px;}
#rblock .news    { width:375px; border-bottom:1px dotted #CCCCCC;}
#rblock h1    { font-size: 14px; color:#716759; background:#ece7d1; text-indent:15px; line-height:25px;}
#rblock .news h2    { font-size: 12px; color:#534741;}
#rblock .news p    { font-size: 10px;}
#rblock img#news{    float:left; margin:10px; height: 60px; width: 66px; border:1px solid #b39f87; padding:1px; background:url(../images/load.gif) center no-repeat;    }
#rblock .clear { clear:both; height:1px; width:1px; overflow:hidden; } 

Is it possible to set up a section of a page to not have the sylings the rest of the page has? e.g. a div?

I have a page which has a linked CSS sheet for the template. I also have the content running from a CMS. I want the content from the CMS (from MySQL to not have any of the pages syles enforced onto it.

Is this possible?

#null {
?????
}
<div id="null">
CMS CONTENT HERE
</div>

Hi
I am a blogger user and write an English blog. I want to add a section in my blog's sidebar for adsense. It is a three column template, what I want it to add a single column at the top of 2 columns of sidebar. http://linguisticslearner.blogspot.com/ And below is the template code.
Code:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
<meta content='JAoqkG38S809dZLsa5uoS08FSskzqxBwsprrllDajqY' name='google-site-verification'/>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Grid Focus
Designer: Derek Punsalan
URL:      www.5thirtyone.com
Updated by: Amanda Fazani (www.BloggerBuster.com)
Date:     14 August 2008
----------------------------------------------- */

/* Variable definitions
   ====================
   <Variable name="bgcolor" description="Page Background Color"
             type="color" default="#fff" value="#ffffff">
   <Variable name="textcolor" description="Text Color"
             type="color" default="#333" value="#333333">
   <Variable name="linkcolor" description="Link Color"
             type="color" default="#333" value="#333333">
   <Variable name="pagetitlecolor" description="Blog Title Color"
             type="color" default="#555" value="#555555">
   <Variable name="descriptioncolor" description="Blog Description Color"
             type="color" default="#555" value="#555555">
   <Variable name="titlecolor" description="Post Title Color"
             type="color" default="#333" value="#333333">
   <Variable name="sidebarcolor" description="Sidebar Title Color"
             type="color" default="#333" value="#333333">
   <Variable name="sidebartextcolor" description="Sidebar Text Color"
             type="color" default="#666" value="#666666">
   <Variable name="bordercolor" description="Border Color"
type="color" default="#eee" value="#eeeeee">
   <Variable name="metacolor" description="Meta DataColor"
type="color" default="#7f7f7f" value="#7f7f7f">
   <Variable name="bodyfont" description="Text Font"
             type="font" default="normal normal 100% Arial, sans-serif" value="normal normal 100% Arial, sans-serif">
   <Variable name="postfooterfont" description="Post Footer Font"
             type="font"
             default="normal normal 95% Arial, sans-serif" value="normal normal 95% Arial, sans-serif">
   <Variable name="startSide" description="Side where text starts in blog language"
             type="automatic" default="left" value="left">
   <Variable name="endSide" description="Side where text ends in blog language"
             type="automatic" default="right" value="right">
*/

/* Use this with templates/template-twocol.html */

html, body {
  background:$bgcolor;
  color:$textcolor;
  text-align:center; 
  margin: 0;
  padding: 0;
  font:12px arial,helvetica,verdana,sans-serif;
  } 
body #navbar-iframe {
  display: none;
  visibility: hidden;
  height: 0px;
}
/* Headings
----------------------------------------------- */
h1{font-size:22px; color: $pagetitlecolor;}
h1 a{color: $pagetitlecolor;}
h2{font-size:18px;}
h3{font-size:16px;}
h4{font-size:14px;}
a{color:$linkcolor;text-decoration:none;}
a:hover{color:#666;}

a img {
  border-width:0;
  }

/* Header
-----------------------------------------------
 */
/* masthead / footer - navigation and categories */
#masthead{padding:5px 0;}
#masthead h1 a{text-transform:uppercase;width:400px;float:left;margin:12px 0 0 0;color:$pagetitlecolor;}
#masthead h1 a em{font-style:normal;color:$pagetitlecolor;}
#authorBlurb {width: 400px; float: right; color: $descriptioncolor;}
#authorBlurb img{float:right;width:42px;height:42px;border:3px solid $bordercolor;}
#authorIntro a{font-weight:bold;} 
#authorIntro{line-height:1.4em;width:400px;float:right;margin:8px 0 0 0;}

#header-wrapper {
  margin:0 auto 10px;
  }

#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}

#header { 
  color:$pagetitlecolor;
}

#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }

#header a:hover {
  color:$pagetitlecolor;
  }

#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}
ul.nav{list-style:none;background:$bordercolor;padding: 0; margin-left: 0;}
.nav li{border-right:1px solid #DDD;float:left;display:block;width:100px;}
.nav li a{font-size:11px;outline:none;color:$titlecolor;text-decoration:none;display:block;padding:5px 0 12px 5px;width:99px;text-transform:uppercase;}
.nav li a span{font-size:11px;color:$metacolor;text-transform:lowercase;}
.nav li a:hover{background:$titlecolor;color:$bordercolor!important;width:95px;}
* html .nav li a:hover{background:$titlecolor;width:99px;}
.nav li.skip{border-left:1px solid #DDD;float:right;display:block width:100px;}
.nav li.skip a{width:100px;}
li.top{border-left:1px solid #DDD;float:right;display:block width:100px;}
li.top a{width:100px;}
.nav li.skip a:hover, li.top a:hover { background: transparent;color: $titlecolor !important;}
.fix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.fix{display:inline-block;} 
* html .fix{height:1%;}
.fix{display:block;}

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  border-top:3px solid $bordercolor;
  margin:20px auto;
  width:965px;
  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  margin:26px 0 0 0;
  width:410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  color:$sidebartextcolor;
  float:left;
  margin:25px 0 0 33px;
  width:250px;
  line-height:1.3em;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
.sidebar h2 {color: $sidebarcolor;}

.sidebar ul{list-style:none;margin:8px 0 4px; padding-left: 0px;}
.sidebar ul li{
  background:url('http://4.bp.blogspot.com/_0CLPmP1ydOo/Sa7zbixhCTI/AAAAAAAABNQ/GPsIktrM5tw/s1600/li.gif') no-repeat 0 3px;
  color:$sidebartextcolor;
  line-height:1.2em;
  border-top:1px solid #BBB;
  padding-left:16px; 
  padding-right:0; 
  padding-top:4px; 
  padding-bottom:4px;
}


#searchWrap input{vertical-align:middle;}
#searchWrap #s{font-size:1.1em;border:1px solid #BBB;padding:1px 2px;margin-right:3px;width:220px;}
#tertCol {color:$sidebartextcolor;}
#tertCol{float:left;width:214px;margin:10px 0 0 33px;}
#tertCol p{color:$sidebartextcolor;}

/* Posts
-----------------------------------------------
 */
h2.date-header {
  margin:1.5em 0 .5em;
  }
.postMeta{background:url('http://bloggerbuster.com/templates/grid-focus/images/dot.gif') repeat-x left center;text-transform:uppercase;font-size:11px;text-align:right;margin-bottom:5px}
.postMeta span.date{background:$bgcolor;color:$metacolor;padding:0 2px 0 4px;}
.postMeta span.comments{background:$bgcolor url('http://1.bp.blogspot.com/_0CLPmP1ydOo/Sa7yyg4qFKI/AAAAAAAABNI/2P6HSCDx4-g/s1600/chat_grey.gif') no-repeat left center;padding-left:15px;margin-left:2px}
.postMeta span.comments a,
.postMeta span.date a{color:$metacolor;}
.post{margin:0 0 15px 0;}
.post h2{line-height:1.2em;margin-bottom:7px;font-size: 18px;color:$titlecolor;}
.post h2 a{width:100%;display:block;outline:none;color: $titlecolor;}

.post-body {
  margin:0 0 .75em;
  line-height:1.6em;
}

.post-body blockquote {
  border: 3px solid $bordercolor;
  padding: 5px;
  line-height:1.3em;  
}

.post-footer {
  margin: .75em 0;
  color:$sidebarcolor;
  font: $postfooterfont;
}

.comment-link {
  margin-$startSide:.6em;
  }
.post img {
  padding:4px;
  border:1px solid $bordercolor;
  }
.post blockquote {
  margin:1em 20px;
  }
.post blockquote p {
  margin:.75em 0;
  }

/* Comments
----------------------------------------------- */
#comments h4 {
  margin:1em 0;
  font-weight: bold;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color: $sidebarcolor;
  }

#comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  }
#comments-block .comment-author {
  margin:.5em 0;
  }
#comments-block .comment-body {
  margin:.25em 0 0;
  }
#comments-block .comment-footer {
  margin:-.25em 0 2em;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
#comments-block .comment-body p {
  margin:0 0 .75em;
  }
.comment-general {background:$bgcolor ') top left;
  border:1px solid #BBB;
  margin-bottom:7px;
  padding:0 7px 7px;
}

.comment-blog-author {background:$bgcolor url('http://3.bp.blogspot.com/_0CLPmP1ydOo/Sa7zz4pTw_I/AAAAAAAABNY/7lF8YVNW-Go/s1600/lgrey_diag.gif') top left;
  border:1px solid #BBB;
  margin-bottom:7px;
  padding:0 7px 7px;
}

.deleted-comment {
  font-style:italic;
  color:gray;
  }

#blog-pager { clear: both; margin: 10px 0;}

#blog-pager-newer-link {
  float: left;
 }
 
#blog-pager-older-link {
  float: right;
 }

#blog-pager { 
  text-align: center;
 }

.feed-links {
  clear: both;
  line-height: 2.5em;
}

/* Sidebar Content
----------------------------------------------- */
.sidebar { 
  color: $sidebartextcolor;
  line-height: 1.3em;
 }

.sidebar .widget, .main .widget { 
  margin:0 0 1.5em;
  padding:0 0 1.5em;
 }

.main .Blog { 
  border-bottom-width: 0;
}


/* Profile 
----------------------------------------------- */
.profile-img { 
  float: $startSide;
  margin-top: 0;
  margin-$endSide: 5px;
  margin-bottom: 5px;
  margin-$startSide: 0;
  padding: 4px;
  border: 1px solid $bordercolor;
}

.profile-data {
  margin:0;
  text-transform:uppercase;
  letter-spacing:.1em;
  font: $postfooterfont;
  color: $sidebarcolor;
  font-weight: bold;
  line-height: 1.6em;
}

.profile-datablock { 
  margin:.5em 0 .5em;
}

.profile-textblock { 
  margin: 0.5em 0;
  line-height: 1.6em;
}

.profile-link { 
  font: $postfooterfont;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* Footer
----------------------------------------------- */
#footer-wrapper {
  margin: 10px 0;
}
#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}
.left {float: left;}
.right {float: right;}
.ctime {float: right;}
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important} 

]]></b:skin>
<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script> 
  </head>

  <body>

  <div id='outer-wrapper'><div id='wrap2'>

    <!-- skip links for text browsers -->
    <span id='skiplinks' style='display:none;'>
      <a href='#main'>skip to main </a> |
      <a href='#sidebar'>skip to sidebar</a>
    </span>

    <div class='masthead fix'>
      <b:section class='masthead' id='masthead' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Thoughts in Remote Language (Header)' type='Header'/>
</b:section>
    </div>

<div class='nav'>
	<ul class='nav fix'>

		<li><a expr:href='data:blog.homepageUrl' title='Return to the the frontpage'>Home<br/><span>Frontpage</span></a></li>
		<li><a href='http://awaz-e-dost.blogspot.com/' title='آوازِ دوست'>Link<br/><span>My Urdu Blog</span></a></li>

		<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Subscribe to the main feed via RSS'>RSS<br/><span>Syndicate</span></a></li>
		<li class='skip'><a href='#main' title='Skip to content'>Main<br/><span>Skip to content</span></a></li>
	</ul>
</div>
 
    <div id='content-wrapper'>

      <div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol' showaddelement='no'/>
      </div>

      <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
      </div>

      <div id='sidebar-wrapper'>
	<div id='searchWrap'>
<form action='/search' id='searchForm' method='get'>
	<input id='s' name='q' type='text' value=''/><input alt='Submit' id='searchsubmit' src='http://bloggerbuster.com/wordpress/wp-content/themes/grid_focus_public2/images/btn_search.gif' type='image'/>
</form>
</div>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='Gadget1' locked='false' title='Share It' type='Gadget'/>
<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'/>
<b:widget id='BlogArchive2' locked='false' title='Archive' type='BlogArchive'/>
<b:widget id='HTML1' locked='false' title='Follow Me' type='HTML'/>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
</b:section>
      </div>
      <div id='tertCol'>
        <b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='Gadget2' locked='false' title='' type='Gadget'/>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
<b:widget id='Feed1' locked='false' title='Recent Posts' type='Feed'/>
<b:widget id='Profile2' locked='false' title='About Me' type='Profile'/>
<b:widget id='LinkList1' locked='false' title='Favorite Links' type='LinkList'/>
<b:widget id='AdSense1' locked='false' title='' type='AdSense'/>
</b:section>
      </div>
      <!-- spacer for skins that want sidebar and main to be the same height-->
      <div class='clear'>*</div>

    </div> <!-- end content-wrapper -->

    <div id='footer-wrapper' style='margin-top: 10px;'>
    <div class='nav' style='clear: both;'>
	<ul class='nav fix'>
		<li><a expr:href='data:blog.homepageUrl' title='Return to the the frontpage'>Home<br/><span>Frontpage</span></a></li>
		<li><a href='#' title='Link title'>Link<br/><span>Short Desc</span></a></li>
		<li><a href='#' title='Link title'>Link<br/><span>Short Desc</span></a></li>

		<li><a href='#' title='Link title'>Link<br/><span>Short Desc</span></a></li>
		<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Subscribe to the main feed via RSS'>RSS<br/><span>Syndicate</span></a></li>
		<li class='top'><a href='#outer-wrapper' title='Return to the top'>Top<br/><span>Return to top</span></a></li>
	</ul>
	<p><a expr:href='data:blog.homepageUrl'><data:blog.title/></a>. <a href='http://5thirtyone.com/grid-focus' title='Grid Focus by: Derek Punsalan'>Grid Focus</a> by Derek Punsalan <a href='http://5thirtyone.com'>5thirtyone.com</a>. Converted by <a href='http://www.bloggerbuster.com/'>Blogger Buster</a></p>
</div>

      <b:section class='footer' id='footer'/>
    </div>

  </div></div> <!-- end outer-wrapper -->
<script type='text/javascript'>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type='text/javascript'>
try {
var pageTracker = _gat._getTracker("UA-15934010-2");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
                

I know very little about CSS, my wild guess is that I should change 'wrapper' classes in CSS but how? I do not know this. Can you please help me in this regard?
Many Thanks

Even though I tag my CSS - it's so large for my site that it's a pain to scroll through and use, even using the search.

Is it possible to reference more than one stylesheet from style tags - and have it all work ok? No duplicate classes or anything, I just would like to divide it up into a few different files, but before I do I wanted to know if there's issues with this.

Thanks!

Hi there

im fairly noob to css and I cant figure out how to do this, or if its at all possible?

please take a look at:

http://www.freelayouts.us/css/page2.html

this page display just fine, and the html code flows like this:
- header
- left column
- right column
- content
- footer

but what i want to do is make the source code flow like this:
- header
- content
- left column
- right column
- footer

BUT still display just like the above page.. is this possible?

here is what happens when I reposition the source code:

http://www.freelayouts.us/css/page1.html

is there anything I can do to the CSS that will make it appear like the first example but the source code flows like my 2nd example?

hope i didnt confuse you...

thanks in advance

Here is a test page... http://www.thedreyersonline.com/test.htm

It doesn't look horrible, so I can live with it, but it's designed so that the comments section will actually sit on the bottom like the "onbottom.gif" screenshot... It works if there is enough content in the "content" div prior to the "comments" div, but not when it's short.

An alternative solution would be like the "extended.gif" screenshot, but the onbottom shot is preferred.

Any help would be greatly appreciated!
Thanks
Bryan

for my website, i'm going to be using some css for every page in it, would it be advisable to store the css for each page in their own file? or even better in the actual page itself?
if i put it all into one css file i'll end up putting bit spacers:
/*-=-=-=-=-=-=---=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-*/
to block things apart