Menu
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;}
452
Approach: The solution is to give some height (or min-height) and width (or min-width) to your HTML div. When you set a particular height and width for a div, it does not matter if it is empty or overflowed, it will only take up the space as given in the code.
You can simply use the CSS display property with the value inline-block to make a <div> not larger than its contents (i.e. only expand to as wide as its contents).
You can set the width of inline elements like <span> , <em> and <strong> , but you won't notice any effect until you position them.
One way you can achieve this is setting display: inline-block; on the div . It is by default a block element, which will always fill the width it can fill (unless specifying width of course).
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).
194
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
