All geek questions in one place

My divs will not align correctly. What for?

This webpage looks great in Dreamweaver, but when I view it in any browser, 3 columns are not included in the wrapper2 id. He does not even appear. I can’t understand why.

This is my HTML code.

<body> <div id="wrapper"> <div id="header"> <div id="menu"></div> </div> <div id="wrapper2"> <div id="leftpane"></div> <div id="bodycontent"></div> <div id="rightpane"></div> </div> <div id="footer"></div> </div> </body>

here css

 #wrapper { width: 900px; background-color: #666; margin-right: auto; margin-left: auto; } #wrapper #header #menu { background-color: #00F; height: 50px; width: 900px; position: relative; top: 150px; } #wrapper #header { background-image: url(../images/index_03.gif); height: 200px; width: 900px; } #wrapper2 { position:relative; width:900px; background-color:#999; height:auto; } #leftpane { width:200px; height:347px; background-color:#C96; left:0px; top:0px; margin:5px; float:left; } #rightpane { width:200px; height:347px; background-color:#C96; margin:5px; float:right; } #bodycontent { width:400px; margin:5px; height:347px; background-color:#C96; float:left; } #footer { width:900px; height:80px; background-color:#0C6; }

Please help me with this?

+4
source share
1 answer

In appearance, you do not clear your #wrapper2 floating elements. Try cleaning the wrapper as follows:

 #wrapper2:before, #wrapper2:after { content:""; display:table; zoom:1; /* ie fix */ } #wrapper2:after { clear:both; }
+2
source

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

More articles:


All Articles