All geek questions in one place

Why is my empty div collapsing even though it has a width when using the built-in display?

When I use the inline display to place div # hlogo, div # hdesign and div # hTestimonial, the camber of the div, although I set the width for 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;}
+6
source share
1 answer

Because it says speculation.

Content Width: Property 'width'

This property does not apply to non-replaceable inline elements. width of the content of an irreplaceable built-in Element cells - these are elements of the displayed content inside them (up to any relative displacement of children).

+9
source

Source: https://habr.com/ru/post/889386/

More articles:


All Articles