Good day, I needed a two-column layout on the center of the page, I threw it up, it does not work in chrome, who knows why?

<style> /* ОСНОВНАЯ РАЗМЕТКА */ body { display: table; text-align:center; width: 100%; height: 100%; margin: 0px; padding: 0px; } #main { display: block; margin: 0px; padding: 0px; min-width: 800px; max-width: 1000px; *width: 800px; height: 100%; } #header { display: block; width: 100%; background-color: red; } #helper { display: block; width: 300px; height: 100%; background-color: #FCFBF8; float:left; } #text { display: block; width: 100%; height: 100%; background-color: blue; } #footer { display: block; width: 100%; background-color: grey; } /* ОКОНЧАНИЕ ОСНОВНОЙ РАЗМЕТКИ */ </style> <meta http-equiv="content-type" content="text/html; charset=utf-8"></head> <body> <div id="main"> <div id="header">header</div> <div id="helper">helper</div> <div id="text">text</div> <div id="footer">footer</div> </div><!-- id="main" --> </body>
  • in chrome in the center does not get up the main part of the layout! - Dimastik86

2 answers 2

Please tell me how you came to the layout? Judging by several of your questions, there is a lack of a common understanding of the layout. Here are a few comments:

  1. Why does a div block do display: block; if he defaults to this?
  2. Never use the old style for layout (font, center, etc.), better use the full power of CSS.
  3. If you use only background-color: color; for the element's background, then it is better to use a shorter background: color; The same can be said about zero values ​​without designation of units.

By the way, if I understand your question correctly, you need at least:

  #text{ float: left;} #footer { clear: both;}

In general, for alignment in the center, use the margin property for the wrapper block, in your case it is:

 #main {margin: 0 auto; }
  • I am self-taught, so a little bit, here is a little ... I’m a general manager for the rental of road-building equipment, and I do the site in my spare time ... thanks, I will try! - Dimastik86
  • From my own experience, I advise you to read any explanatory book on CSS. You get answers to so many questions. - Gena Tsarinny,

here's the working version, wrap the content in the <center> , but how correct is it?

 <center> <div id="main"> <div id="header">header</div> <div id="helper">helper</div> <div id="text">text</div> <div id="footer">footer</div> </div><!-- id="main" --> </center>