[CSS] Center DIV within DIV

This is one of those that'll give you nightmares.

You have a wrapper div and an inner DIV:

<div id="wrapper">
<div id="inner">
  <!-- your rubbish here -->
</div>
</div>

Css styling below will do the trick - text-align: center will work on IE but won't work on other browsers (css compliant) which require margin: 0 auto:

/* for IE */
div#wrapper {
text-align: center;
}

div#inner {
margin: 0 auto; /* this centers the DIV */
width: 30%; /* whatever */
}

alternatively you could set left and right margin separately.

[CSS] DIVs next to each other (and DIVs VS Tables all over again)

Let me guess - you need a page header/footer and you wanna use DIVs 'cause your buddy on digg or reddit says tables are soooooooo uncool? 

Here's a few CSS classes that will get you were you want to be:

.left {
width: 80%;
heigth: 10%;
position: relative;
float: left;
}

.right {
width: 20%;
heigth: 10%;
position: relative;
float: right;
}

.wrapper {
width: 100%;
position: relative;
clear: both;
}

And here's an example of the markup you might be looking for:

<div class="wrapper">
 <div class="left">
  <!-- Whatever - maybe a lame logo -->
 </div>
 <div class="right">
  <!-- Whatever - maybe login stuff -->
 </div>
</div>
<div class="wrapper">
 <!-- Content -->
</div>

You can repeat this basic Header structure as much as you want if you need nested divs to resemble (here I say it) tables.

But - on a side note - using a table would be much more intuitive 'cause you know what a table is and how it looks like. You certainly don't need to remember loads of crazy CSS properties semantically and visually unrelated to what your trying to do.

Ok, if we're really doing this ... truth is everyone started using DIVs because the word has been spread that using nested tables is unprofessional. This is not totally untrue, but guess what - nesting hundreds of DIVs will bring you nowhere good in terms of maintainability at much lower speed.

My personal choice is a moderate one, try to stay in control finding the balance using a bit of both, DIVs within tables or tables within DIVs, to keep the built-in simplicity of tables and the advantages of DIVs.

Look at this:

If Amazon uses that many nested tables (that's 35 results for the table opening tag in the home page) no-one's gonna bug you for using a few (except those W3C pansies).

[CSS, Javascript] How to make your <DIV> disappear

This is a quick how to for beginners.
I'll show you how to make a DIV element disapper using a button, like in this way:

This div will disapper!!!

This is done changing the class attribute of the selected DIV, as is done in the following javascript function.

<script type="text/javascript">

function hideDiv()

{

  var isIE = (window.ActiveXObject)?true:false;

  var attributeClass = (isIE)?"className":"class";

  var element = document.getElementById("hiddenDiv");

 if(element==null)

   return;

   if(element.getAttribute(attributeClass)=="hidden")

        element.setAttribute(attributeClass, "visible");

   else

        element.setAttribute(attributeClass, "hidden");

}

</script>

This won't work without the definitions of the CSS classes used and the button that send the event onClick:

<STYLE>

.hidden{ display:none; }

.visible{}

</STYLE>



<input type="button" onClick="javascript:hideDiv();" value="hide"/>



<div id="hiddenDiv" >This div will disapper!!!</div>

Actually the .visible class is empty, because by default an element will be visible, so there is no need to specify that it should be visible: this is needed just to override the .hidden class.
You can use the hideDiv method with each control you wish to use that can launch an event (an hyperlink, an image, ...).

Besides, you can use also another CSS attribute, the visibility attribute; this simply makes the entity invisible/visibile, but it still occupies its space: that's why you need to insert manually a zero width and height, like in this way:

.hidden{ visibility:none; width:0px; height:0px;}
.visible{visibility:visible; }

And that's all!
See ya!

[Javascript] Change HTML "class" and "style" attributes

It seems trivial, and it is, but if you are going to write a cross browser script, you can find that sometimes (i.e. always) most used browsers, Firefox and Internet Explorer, work in different ways...damn it!
One of those troubles is the class attribute of a generic HTML; I found that in IE you cannot simply set a class attribute to your own HTML node, but you have to set a className node with the list of your CSS classes.
This is THE code:

  /* find out which is the browser */
  var isIE = (window.ActiveXObject)?true:false;
  var isMozilla = (document.implementation.createDocument)?true:false;
 
  /* the name of the attribute, depending on the browser */
  var attributeClass = (isIE)?"className":"class";
 
  /* set the attribute */
  htmlNode.setAttribute(attributeClass,"classX dummyClass");

Moreover there is also another strange behavious as for the style attribute; if you want to set the whole CSS text of a node's style (and not a particular sub attribute), this is the syntax:

[UPDATE 01 feb. 2008 - 17:50]
Max and other users made me notice that "else if(isMozilla)" may exclude other
kind of browser, not allowing a wide "cross browsering". Thanx guys!

  var styleString ="font-size:10px;";

  if(isIE)
     div.style.cssText=styleString ;
  else //if(isMozilla)
     div.setAttribute("style",styleString);

I assure you: writing cross browser script is a really butchery task! Try if you don't believe me!