Question

I was working with a leftbar for my website. Basically the leftbar comprises of three div elements with id="profile".
Also I have floated the child div elements towards left.

The issues I am facing:

I analysed the problem with firebug in mozilla firefox, the width of each is equal to the parent element but I don’t know how.

Secondly the height of the child div elements is not equal to the parent elements. I tried setting height of the div elements to be 100% or 34px, this doesn’t solves the problem.

Thirdly the I have added the gradient as a background for the leftbar but the background appears as some solid colour. I have added vendor prefixed prior to the normal gradient brackground. But I really don’t know why this happens.

I am adding a jsbin demo for this example

Answer 1

The CSS Syntax for firefox has to be changed to this:

-moz-linear-gradient(bottom, rgb(213,213,213) 0%, rgb(237,237,237), rgb(213,213,213) 100%);

The height is just set to the image container, not the leftbar, set the leftbar to height 34 (and/ or use line-height to center it vertically):

.leftbar{
  widh:70%;
  color:#000;
  font-family:Calibri;
  font-size:12px;
  font-weight:700;
  text-decoration:none;
  text-align:center;
  height:34px;
  line-height:34px;
  float:left;
}