newtvis

Я нашел только один способ: HTML: <div class="wrap"> <div class="red"></div> <div class="green"></div> <div class="blue"></div> </div> CSS: * { margin:0; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { height:100%; } .wrap { min-height: 100%; height: auto !important; height:100%; position: relative; } .red { background: red; width:100%; height:200px; position: absolute; top:0; left:0; z-index: 1; } .green { background: green; width: 35%; height:100%; position: absolute; top:0; left:0; padding-top: 200px; } .blue { background: blue; width:65%; height:100%; position: absolute; top:0; right:0; padding-top: 200px; } Может есть какой-то другой способ, я особо не думая прикинул макет. P.S. А вообще не рекомендую такую верстку =)

Сейчас я продемонстрирую современное решение. Если не поймешь что к чему - Гугл в помощь. Гугл все таки лучше Попова в этом плане =) HTML: <nav> <ul class="nav"> <li><a href="#">Текст</a></li> <li><a href="#">Текст</a></li> <li><a href="#">Текст</a></li> <li><a href="#">Текст</a></li> <li><a href="#">Текст</a></li> </ul> </nav> CSS: .nav li{ display: inline-block; /* Для няшного IE */ *display: inline; *zoom: 1; } .nav li a { text-decoration: none; font-family: Arial, sans-serif; padding:4px 10px; color: #369; border: 1px solid transparent; } .nav li a:hover { color:#fff; background: #0080b4; background: -moz-linear-gradient(top, #0080b4 0%, #006f98 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0080b4), color-stop(100%,#006f98)); background: -webkit-linear-gradient(top, #0080b4 0%,#006f98 100%); background: -o-linear-gradient(top, #0080b4 0%,#006f98 100%); background: -ms-linear-gradient(top, #0080b4 0%,#006f98 100%); background: linear-gradient(to bottom, #0080b4 0%,#006f98 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0080b4', endColorstr='#006f98',GradientType=0 ); border: 1px solid #0080b4; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 1px 0 0 rgba(255,255,255,.5) inset; -moz-box-shadow: 1px 0 0 rgba(255,255,255,.5) inset; box-shadow: 1px 0 0 rgba(255,255,255,.5) inset; } И никаких картинок не нужно.

От себя посоветую использовать метод от boilerplate, где text-indent задается только для IE ниже 9 версии. .ir { background-color: transparent; border: 0; overflow: hidden; /* Для старых версий IE */ *text-indent: -9999px; } .ir:before { content: ""; display: block; width: 0; height: 100%; }