Browsing articles in "CSS Tricks"
Feb
25

Powerful CSS-Techniques For Effective Coding

By rzelazko  //  CSS Tricks  //  No Comments

In this post we present 50 new CSS-techniques, ideas and ready-to-use solutions for effective coding. You definitely know some of them, but definitely not all of them. More details at: http://www.smashingmagazine.com/(…).

Jul
10

Height 100% with divs.

By rzelazko  //  CSS Tricks  //  No Comments

If you need set height of one div as long as other div (both div float left) you must do some tricks.

Base code:

1
2
3
#wrapper { clear: both; }
#cola { float: left; width: 100px; }
#colb { float: left: width: 100px; }
1
2
3
4
<div id="wrapper">
  <div id="cola"></div>
  <div id="colb">Some content.</div>
</div>

Now if you want to have same height in cola and colb you must add:

1
2
#wrapper { overflow: hidden; }
#cola { margin-bottom:-32767px; padding-bottom:32767px; }
Apr
18

Min-height (working in IE and FF)

By rzelazko  //  CSS Tricks  //  No Comments

CSS min-height which works fine in IE and FF:

1
2
3
height: 60px;
height: auto !important;
min-height: 60px;
Apr
18

Vertical align to multiline content

By rzelazko  //  CSS Tricks  //  No Comments

Problem solved on: www.jakpsatweb.cz

Apr
18

Vertical align to one line of text

By rzelazko  //  CSS Tricks  //  No Comments

Info

Setting vertical aligment to middle for one (!!!) line of text.

Solution

In css styles:

1
2
3
4
5
.mid {
height: 2em;
line-height: 2em;
background-color: #eee;
}

In html code:

1
<p class="mid">Lorem ipsum etc.</p>