Не получается расположить div'ы стык в стык

В разных браузерах по-разному получаются разрывы между колонками на сайте.
Прочитав кучу инфы по верстке сделал такой шаблон.

HTML:

Код

<?xml version="1.0" encoding="windows-1251"?>

<!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=windows-1251" />
<title>ТЕСТ</title>
<style type="text/css" media="all">
 
@import "style.css";
 
</style>
</head>
<body>
<div id="head_row">
    <div id="head_left">
        left
    </div>
    <div id="head_center">
        <div class="wrap">
            center
        </div>
    </div>
    <div id="head_right">
        right
    </div>
</div>
<div id="main">
    <div id="content">
            center
    </div>
    <div id="left_col">
        left<br>1
    </div>
    <div id="right_col">
        right
    </div>
</div>
<div id="footer">
    футер
</div>
</body>
</html>

CSS:

Код

html, body {
  width:100%;
  margin: 0px;
  height: 100%;
  min-height: 100%;
  min-width: 600px;
  padding: 0px;
  position:relative;
  background: #ffa;
  font: 0.9em/1.1em Verdana;
}

.wrap {
    margin: 7px;
}

#head_row {
    width: 100%;
    background: #fff;
    height: 20%;
    overflow: hidden;
}

#head_right {
    height: 100%;
    width: 20%;
    background: magenta;
    float: right;
}

#head_left {
    width: 20%;
    height: 100%;
    float: left;
    background: black;
    color: white;
}

#head_center {
    background: blue;
    height: 100%;
    width: 60%;
    float: left;
}

#main {
    background: white;
    width: 100%;
    min-height: 400px;
    overflow:hidden;
}

#content {
    float: left;
    width: 60%;
    background: magenta;
    margin-left: 20%;
    padding-bottom:32767px; margin-bottom:-32767px;
}

* html #content {
      margin-left:10%;
    margin-right:-3px;
}

#left_col {
    float: left;
    background: red;
    width: 20%;
    margin-left:-80%;
      padding-bottom:32767px; margin-bottom:-32767px;
}


#right_col {
    float: right;
    padding-bottom:32767px; margin-bottom:-32767px;
    background: green;
    width: 20%;
    
}

#footer {
    height: 40px;
    background: gray;
}

Суть проблемы видна на скриншотах:
в ie6

в firefox

Помогите, пожалуйста, сделать все div'ы стык в стык.

Расположить элементы без класса Автор AlexB	Ответов: 4 Просмотров: 1032	21.01.2021, 12:47:08 от AlexB
Как улучшить качество своего курсора? Коряво получается почему-то Автор cantsave	Ответов: 5 Просмотров: 2027	12.10.2018, 09:06:26 от dynamit
не получается отцентрировать картинки Автор Cardamon	Ответов: 1 Просмотров: 1137	19.02.2016, 01:27:29 от dmitry_stas
[Решено] Не получается приделать горизонтальный скрол в нужной позиции Автор TitanFighter	Ответов: 5 Просмотров: 1144	13.03.2015, 07:22:26 от AlekVolsk
Как счетчики liveinternet, rambler и др. расположить в ряд а не по вертикали? Автор yunusov2706	Ответов: 9 Просмотров: 3283	16.02.2015, 23:51:26 от bogolinr

Не получается расположить div'ы стык в стык - Вопросы по CSS

Новости Joomla

VKGallery — плагин вставки альбомов VK для Joomla.VKGallery — расширение для Joomla 3.x–5

Swiper.js, документация на русском языке

Модуль материалов Joomla на Vue.js.Модуль выводит материалы с помощью JavaScript фреймворка Vue.js

Не получается расположить div'ы стык в стык

one_more

Re: Не получается расположить div'ы стык в стык

Похожие темы