Problem with CSS and DIV height [UPDATED]

Question

Hello, I'm building webpage layout which includes 5px wide DIV which i use as spacer, if i define my steyle like that

    div#main_spc{
  display: block; 
  width: 5px; 
  background: url(../Images/contsep.gif) repeat-y top center; 
  float: left;
  position: relative;
 }

and put height inline

 <div id="main_spc" style="height: 356px;"></div>

everything works as it should, but when i alter my code to apply height from outside CSS file

 div.main_spc{
  display: block; 
  width: 5px; 
  background: url(../Images/contsep.gif) repeat-y top center; 
  float: left;
  position: relative;
 }

 div.main_spc.abc{
  height: 356px;
 }

and alter XHTML code like this

 <div class="main_spc abc"></div>

sorry for TYPO, ofcourse it always was CLASS instead of STYLE, i was writing this question in hurry and i missed that, If it was a case then firebug would got problem to point CSS definition in first place!

DIV is invisible, atleast i put some contents inside, then DIV is text height tall.

I tryied to inspect this element from firebug and while source is ok, HEIGHT is ommited by firefox (and probably other browsers) and firebug displays this CSS element as

     div.main_spc.abc{
  }

I wonder how to alter my CSS to make height not be dismissed from style definition?

Thanks in advance for all answers

MTH

Answer 1

Use the class attribute

Replace

<div style="main_spc abc"></div>

with

<div class="main_spc abc"></div>

You have defined two classes main_spc and abc and you an include a class using the 'class' attribute' and not style. Style is used for inline styling like

style='height: 356px;'

Edit

It is not the case that firebug emitted the height attribute. If you inspect the style section on the right side you can see the classes associated with the element and there you can see the height attribute in 'abc' class.

If you would set the overflow property to hidden then the content won't overflow. In your case I think you are trying to achieve a spacer with height 356px and width 5px. Then give

 

inside the div and see the result.

Modified your code for a blank spacer

div.main_spc
{
                display: block; 
                width: 5px; 
                background: url(../Images/contsep.gif) repeat-y top center; 
                float: left;
                position: relative;
}

.abc
{
         height: 356px;
}

<div class="main_spc abc">&nbsp;</div>

Answer 2

you seem to have switched been an ID selector (#) and a class selector (.) in which case you need to change either the CSS definition or

<div class="main_spc"></div>

Answer 3

You're making abc be a child of main_spc, not a sibling. So your CSS

div.main_spc{
        display: block; 
        width: 5px; 
        background: url(../Images/contsep.gif) repeat-y top center; 
        float: left;
        position: relative;
}

div.main_spc.abc{
        height: 356px;
}

is actually looking for xhtml like

<div class="main_spc"><div class="abc"></div></div>

Change the CSS to

div.main_spc{
        display: block; 
        width: 5px; 
        background: url(../Images/contsep.gif) repeat-y top center; 
        float: left;
        position: relative;
}

div.abc{
        height: 356px;
}

and then

<div class="main_spc abc"></div>

will work.