Home/ Questions/Q 5966553
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T19:48:58+00:00

WHen I use display inline to place div#hlogo,div#hdesign and div#hTestimonial, the div collapse although

  • 0

WHen I use display inline to place div#hlogo,div#hdesign and div#hTestimonial, the div collapse although I ‘ve set a width on them..

HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org    /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slicing</title>

</head>

<body>
<div id="wrapper">
    <div id="header">
        <div id="hlogo">
                <div class="Hlogo">

                    <div id="Logoheader">RamblingSoul</div>
                    <div id="Logodesc">
                        <p> A Free CSS Template From </p>
                        <p>RamblingSoul</p>
                    </div>
                </div>

        </div>
        <div id="hdesign">

        </div>
        <div id="hTestimonial">

        </div>
    </div>
    <div id="body">
    </div>
    <div id="footer">
    </div>
</div>
</body>

CSS :

html,body{  
        margin:0px;
        padding:0px;
        width:100%;
        height:100%;

    }
div#wrapper{    
        margin:0px;
        padding:0px;
        width:100%;
        height:100%;
        line-height:normal;
        border: #060 thick groove;
        background-color:#FF3;
        font-size:10px;
        line-height:1.5px;
    }

div#wrapper div#header{
        width:100%;
        height:30%;
        border:#F00 medium double;

    }


div#wrapper div#body{
        width:100%;
        height:50%;
        border:#F00 medium double;

    }

div#wrapper div#footer{
        width:100%;
        height:20.0%;
        border:#F00 medium double;

    }



div#wrapper div#header div#hlogo{
        width:30%;
        height:100%;
        border:#F00 medium double;
        //float:left;
        margin:0px ;
    }

div#wrapper div#header div#hdesign{
        width:100%;
        height:100%;
        border:#F00 medium double;
        //float:left;
        margin:0px 250px;
    }

div#wrapper div#header div#hTestimonial{
        //width:40%;

        width:30%;
        height:100%;
        border:#F00 medium double;
        float:right;

    }

    div#wrapper div#header div#hlogo,div#wrapper div#header     div#hdesign,div#wrapper div#header div#hTestimonial{display:inline;}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Because that’s what the spec says to do.

    Content width: the ‘width’ property

    This property does not apply to
    non-replaced inline elements. The
    content width of a non-replaced inline
    element’s boxes is that of the
    rendered content within them (before
    any relative offset of children).

    • 0