Трехколоночный резиновий макет

Mr.Black · November 29, 2010

Если проблема - http://img18.imageshack.us/img18/3449/96311259.png

<html>
<head>
<title>blu</title>
<style > 

* {margin: 0;padding: 0;}

#log {
border: 1px red solid;height: 25px;width: 100%;
}

#wrapper {border: 1px red solid;margin: 0 40px;}

#head {height: 100px;border: 1px yellow solid;}
#speedbar {width:100%;border: 1px black solid;height:20px;margin: 10px 0 0;}
#content {overflow: hidden;width: 100%;}
#left {float: left;border: 1px red solid;height:30px;width: 250px;margin: 10px 0;}
#center {border: 1px green solid;height: 40px;margin: 0px 270px 0px 260;}
#right {float: right;border: 1px red solid;height:30px;width: 250px;margin: 10px 0;}

</style>
</head>
<body>

<div id="log" ></div>

<div id="wrapper" >
<div id="head" ></div>
<div id="speedbar" ></div>
<div id="content" >
<div id="left" ></div>
<div id="center" ></div>
<div id="right" ></div>
</div>
<div id="footer" ></div>
</div>


</body>
</html>

Как зделать чтоб все было нормально,на сайте в макетах нет примера чтоб посмотреть =(

Great Rash · November 29, 2010

Блоки #left и #right должны идти перед блоком #center.

Mr.Black · November 29, 2010

Спасибо, а какая разница никак немогу понять....и хорошо так верстать макет????

Great Rash · November 29, 2010

Спасибо, а какая разница никак немогу понять...

Разница большая. Float != absolute и блок хоть и выпадает из контекста форматирования, но это не значит что он выпадает из потока.

и хорошо так верстать макет????

Нормально. Все так и делают. Ну может кроме случаев когда контент должен идти первым в коде.

Mr.Black · November 29, 2010

Спасибо

Sign In

Трехколоночный резиновий макет

Question

Mr.Black

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

Mr.Black

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Mr.Black

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information