Again with the layout of the problem. There are 3 divas that should be displayed in a string. In Opera and FF, everything is fine, but IE makes incomprehensible indents from the central diva on the sides. This is how IE is displayed:

link

This is how it is displayed in Opera and should also be in IE

link

Code only divs in index.html:

<div class="all_content"> <div class="left_top"></div><div class="right_top"></div><div class="center_top"> </div> </div> <div class="all_content"> <div class="left_top"></div><div class="right_top"></div><div class="center_top"> </div> </div>

style.css

 .all_content { margin-top: 12px; margin-left: 10px; margin-right: 10px; margin-bottom: 12px; } .left_top { width: 340px; height: 202px; border-bottom: 2px solid #f5f8fc; border-top: 2px solid #f5f8fc; position: relative; float:left; color: #696969; font-family: Tahoma; font-size: 11px; } .center_top { width: 320px; height: 202px; border: 2px solid #f5f8fc; position: relative; color: #696969; font-family: Tahoma; font-size: 11px; } .right_top { width: 340px; height: 202px; border-bottom: 2px solid #f5f8fc; border-top: 2px solid #f5f8fc; position: relative; float:right; color: #696969; font-family: Tahoma; font-size: 11px; }
  • Maybe I could help, but unfortunately I don't see the screenshots for some reason ... can you reload? - Oleksandr Smaha
  • In general, everything below is not the same. Everywhere is crooked. And perezalil screenshots. - Eugene Shilin

5 answers 5

 <div class="all_content> <div class="left_top"></div> <div class="center_top"></div> <div class="right_top"></div> </div> 
  .all_content { margin-top: 12px; margin-left: 10px; margin-right: 10px; margin-bottom: 12px; font-family: 11px Tahoma; color: #696969; } .left_top { width: 340px; height: 202px; /*border-bottom: 2px solid #f5f8fc;*/ /*border-top: 2px solid #f5f8fc;*/ float: left; background-color: lightblue; /* включено для нагладности */ } .center_top { width: 320px; height: 202px; /*border: 2px solid #f5f8fc;*/ position: relative; float: left; background-color: pink; /* включено для нагладности */ } .right_top { width: 340px; height: 202px; /*border-bottom: 2px solid #f5f8fc;*/ /*border-top: 2px solid #f5f8fc;*/ position: relative; margin-left: 660px; /* ВНИМАНИЕ - это значение равно ширине "левого" и "центрального" дива + ширина "левых" и "правых" границ "левого" и "центрального" дива + ширина "левого" border "правого" дива. То есть, если брать знаxения ширины ваших div и border оно будет равно 664px; */ background-color: black; /* включено для нагладности */ }

Works in IE7 +

  • I do not know what you tested in IE, but everything is generally generally crooked. - Eugene Shilin
  • Look at the changed arrangement of the div. Create a clean file and check it works. I hope you are using reset.css - omgwtf
  • Almost got it. Now in IE, the left and center divas merged together, but moved all the way to the left. And the right diz is disconnected from them. - Eugene Shilin
  • I tried with the IE comments, it still does not work. Help! - Eugene Shilin

Eugene, an elementary problem, is solved in many ways.

  1. * {margin: 0px; padding: 0px;} * {margin: 0px; padding: 0px;} - clears all indents for all elements.
  2. block { display: inline; } block { display: inline; } - removes specific padding from blocks in ie.
  3. Here is a link to the future for the treatment of all kinds of "diseases" will definitely help: link doctor .
  • It means that you have been squinting somewhere or you are doing something wrong, I had a similar situation - it helped. Can you go to sleep? :) - Gene Ant
 .center_top{margin:0 340px} .all_content:after{display:block;clear:both;content:'';height:0px;}

add

  • Problem still exists. Did not help. - Eugene Shilin

Create a separate .css for ie (version), specify the comment specifically for ie (version) (add head to head).

Make sure that you already have a special under i.

ps screenshots are not displayed.

    probably what you need looks like

     <div class="all_content"> <div class="left_top"></div><div class="center_top"></div><div class="right_top"></div> </div> <div class="all_content"> <div class="left_top"></div><div class="center_top"></div><div class="right_top"></div> </div> <style> .all_content { margin-top: 12px; margin-left: 10px; margin-right: 10px; margin-bottom: 12px; display:table; clear:both; } .left_top { width: 340px; height: 202px; border-bottom: 2px solid #f5f8fc; border-top: 2px solid #f5f8fc; position: relative; float:left; color: #696969; font-family: Tahoma; font-size: 11px; } .center_top { width: 340px; height: 202px; border: 2px solid #f5f8fc; position: relative; color: #696969; float:left; font-family: Tahoma; font-size: 11px; } .right_top { width: 340px; height: 202px; border-bottom: 2px solid #f5f8fc; border-top: 2px solid #f5f8fc; position: relative; float:left; color: #696969; font-family: Tahoma; font-size: 11px; } </style>
    • It did not help - Eugene Shilin