Question

I’m building webpage layout which includes 5px wide DIV which i use as spacer, if I define my style 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, of course 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, at least I put some contents inside, then DIV is text height tall.

I tried to inspect this element from firebug and while source is ok, HEIGHT is omitted 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?

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>