Category Archives: CSS

height:auto not working

I have been facing with css problem from long time, that i have three divs

  • container
  • leftbar
  • rightbar
    .container{
          height: auto;
         ....
         ...
 }
.leftbar{
          float:left;
         ....
         ...
 }
.rightbar{
        float:right;
.....
}

The problem i am facing is, when the rightbar div or the leftbar div height increases , the container div height remains the constant.
Finally i solved the problem by adding the property overflow hidden in the container div.

Here is the solution i solve the problem of Css height auto not working

    .container{
          height: auto;
         overflow: hidden;
         ....
         ...
 }
.leftbar{
          float:left;
         ....
         ...
 }
.rightbar{
        float:right;
.....
}

How to set cellpadding & cellspacing in CSS?

I’ve noticed quite a bit of discussion over Table element properties in regards to css replacement of cellpadding and cellspacing. Doing my own research ([w3.org ]) and reading in this discussion forum border-collapse, border-spacing, margin and padding are the replacement.

however I have not been able to find the answer on how to get border-collapse and border-spacing to work in IE using css. The properties work fine in Mozilla and Opera. Is there a solution to do this in css or are we to just use the cellpadding and cellspacing table element properties? It is my understanding that tables are to be used to show tabular data. Therefore I figured that the properties of the table element should be controlled using css, the styling.

in my case I have a table show tabular data and I wish to have a background border outside of the table and space between the table cells. The cells would alternate background color. The affect of creating horizontal and vertical lines to separate the data.

Here are some possible Solutions:
Extracted from Stack Overflow

	
Cellspacing :

table { border-collapse: collapse; }

As for cellpadding, you can do

table tr td, table tr th { padding: 0; }

Next Solution


None of the answers here are complete, so I'll merge into a comprehensive one.

First of all, you can control cellspacing by applying the border-spacing CSS property to your table. This will work in almost all popular browsers except for IE up through v7. For browsers which support it, this property will even allow separate horizontal and vertical spacing. If you need to support IE 5, 6, or 7, you're almost out of luck.

However, I say "almost" because these browsers still support the border-collapse property, which merges the borders of adjoining table cells. If you're trying to eliminate cellspacing (i.e. cellspacing="0") then border-collapse:collapse should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.

In short: for non-IE 5-7 browsers, border-spacing handles you. For IE, if your situation is just right (you want 0 cellspacing and your table doesn't have it defined already), you can use border-collapse:collapse.

Next Solution

table {
border-collapse:collapse;
border:1px solid #000;
}

th,
td {
padding:0;
border:1px solid #000;
} 


Next Solution

HTML4:

<table cellspacing="0" cellpadding="0">

CSS:

table { border-collapse: collapse; }
table tr td { padding: 0px; }



HTML4:

<table cellspacing="2" cellpadding="0">

CSS:

table { border-collapse: separate; border-spacing: 2px; }
table tr td { padding: 0px; }



HTML4:

<table cellspacing="2" cellpadding="2">

CSS:

table { border-collapse: separate; border-spacing: 2px; }
table tr td { padding: 2px; }