Some basic CSS tricks to remember

While working with the interface, in some points the developers get stuck. I’m going through some of these issues, which we can keep in mind to avoid some extra time spent on getting things done.

Placing Multiple DIV Elements Side by Side

Sometimes we need to place several DIV elements side by side. For this type of requirements, previously the practice was using tables. We know that TABLE element is rigid & doesn’t hold any floating positioning by default. But achieving that type of rigidness using DIV is also not that much of a trouble if you just keep a few simple things in mind.

Whenever you need to place DIVs side by side, all of them should have the float attribute in style to be set to left other than the last one. The last one should be set to float to right. May be we can think of having the display to be set as inline. But the problem with inline is you cannot set a width to an inline element. The inline component will always flow with the content.

Padding in Fixed With DIV

When you are setting some padding in a div with fixed width or height, you will see some abnormal behavior. Suppose following is the definition for a DIV style:

#ContentDiv

{

  width: 240px;

  height: 60px;

  padding: 15px 20px;

  border: 1px solid #CCC;

}

The expected style should naturally be a DIV with 240 px width, 60 px height having padding of 15 px on top & bottom, 20 px on left & right. But whenever you fill the DIV with your content, you’ll find that the DIV is getting a width of 280 px & height of 90 px.

When a DIV has a defined height/width & alsodefined some padding, the effective width & height turns to be the total of width/height added with the padding in the corresponding sides. So whenever using both padding & fixed height, this point should be kept in mind.

DIV inside DIV: Alignment

We often need to place a DIV inside another DIV or TD. When we try to center align a DIV within another DIV, you will find some problem. Setting text-align to center will do the work in IE, but you will find it of no use in Firefox browsers. In this case, the inner DIV needs to have a margin set. So what will you do? Set the margin by calculating your content of the inner DIV & width of the outer DIV? That will not work when you have the inner DIV content generated dynamically. The workaround here is setting the DIV styles as follows:

#OuterDIV

{

  width:160px;

}

#InnerDIV

{

  width:60px;

  margin:0 auto;

}

The margin value (0 auto) will align the inner DIV to center of the outer element. When I first met this requirement, it took me 3 hours to find out why the alignment is not working.

Floating DIV: Positioning

A very common problem developers face is positioning DIVs placed after another DIV which have the float property set. Lets have a look at the following senario:

 <div id="divImagesClose">Close</div>

 <span class="badge_list_resize" style="float: left;" title="Wall Street">
 	<img class="badge_list_image" src="images/wall_street.png">
 </span>

 <div class="free">

 	<p>FREE</p>

 </div><br>

 <span class="badge_list_resize" style="float: left;" title="Silver Tint">

 	<img class="badge_list_image" src="images/silver_tint.png">

 </span>

 <div class="free">

 	<p>FREE</p>

 </div>

The CSS for this block is as follows:

#divImagesClose

{

 background:url(images/small-x.jpg) no-repeat 0px center;

 float:right;

 width:13px;

 height:12px;

 text-indent:-5000em;

 cursor:hand;

 cursor:pointer;

 margin:0 2px 5px;

}

.badge_list_resize

{

 width: 687px;

 height: 71px;

 clear:both;

}

.badge_list_image

{

 width: 100%;

 height: 100%;

}

The provided HTML block shows perfectly as expected in Firefox. But in Internet Explorer, you’ll find it not working correctly. Even though “badge_list_resize” class holds clear to be set as “both”, the position of the 1st span will not apply the clear as it should. As the DIV with float set to right has a smaller width than the element placed below it with clear value to right, the span on the left doesn’t apply the clear value in Internet Explorer. To resolve this, placing multiple wider elements below a floated element, they need to be wrapped within another DIV for which is clear is set to right as follows:

	<div id="divImagesClose">Close</div>

 <div style="clear:right">

 	<span class="badge_list_resize" style="float: left;" title="Wall Street">

 		<img class="badge_list_image" src="images/wall_street.png">

 	</span>

 	<div class="free">

 		<p>FREE</p>

 	</div><br>

 	<span class="badge_list_resize" style="float: left;" title="Silver Tint">

 		<img class="badge_list_image" src="images/silver_tint.png">

 	</span>

 	<div class="free">

 		<p>FREE</p>

 	</div>

 </div>