Не поднимается правая колонка в трехколоночном макете

@compik · Регистрация: 13.05.2014

Author24 — интернет-сервис помощи студентам

Уважаемые гуру! уже несколько дней бьюсь с трехколоночным макетом.. Не могу сделать так, чтоб 3-я колонка поднялась вверх (что-то явно ей мешает). Напишите в какую сторону копать.. Спасибо!

HTML5

<html>
<header>
<link rel="stylesheet" type="text/css" href="style.css">
</header>
<body>
<div id="main"> 
<div id="header">Header<div id="menu">Menu</div> </div>
<div id="clear"> </div>
<div id="wrap">
<div id="left_col">left</div>
<div id="slideshow">Slideshow</div> <div id="content">Content</div>
<div id="right_col">Right</div>
</div>
<div id="clear"> </div>
<div id="news">News</div><div id="search">Search</div>
<div id="clear"> </div>
<div id="footer">Footer</div>
</div>
</body>
</html>

CSS

body {
/*  background-image: url(img/bg.png); */
    background: lightblue;
}
 
#main {
    margin: 0 auto;
    width: 1000px;
}
 
#header{
    width: 996px;
    height: 130px;
    background-color: #FFF;
    border: 2px solid black;
}
 
#menu {
    width: 650px;
    height: 40px;
    background-color: yellow;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    border: 2px solid black;
}
 
#wrap {
    background: #FFF;
    overflow: hidden;
}
 
#left_col {
    width: 215px;
    float: left;
    padding-left: 5px;
    background-color: #FFF;
    border: 2px solid black;    
}
 
#slideshow {
    height: 250px;
    background-color: #FFF;
    margin: 0 207px 3px 227px;
    padding-left: 5px;  
    border: 2px solid black;
}
 
#content {
    background-color: #FFF;
    margin: 0 207px 0 227px;
    padding-left: 5px;  
    border: 2px solid black;
}
 
#right_col {
    width: 195px;
    float: right;
    padding-left: 5px;  
    background-color: #FFF;
    border: 2px solid black;
}
 
#news {
    width: 680px;
    min-height: 100px;
    float: left;
    padding-left: 5px;
    background-color: #FFF;
    border: 2px solid black;    
}
 
#search {
    width: 299px;
    min-height: 100px;  
    float: right;
    padding-left: 5px;
    background-color: #FFF;
    border: 2px solid black;    
}
 
#footer {
    background-color: #FFF;
    width: 996px;
    height: 70px;
    border: 2px solid black;    
}
 
#clear {
    clear: both;
    margin-bottom: 3px;
}

Прикрепляю файлы...

@Excubitor · 14.05.2014, 04:53

в чем проблема воспользоваться отрицательным маргином?

CSS

1
2
3

#right_col {
margin-top: -281px;
}

@compik · 14.05.2014, 09:01 **[ТС]**

Спасибо! проблему решил, поменяв последовательность div-ов..

HTML5

<html>
<header>
<link rel="stylesheet" type="text/css" href="style.css">
</header>
<body>
<div id="main"> 
<div id="header">Header<div id="menu">Menu</div> </div>
<div id="clear"> </div>
<div id="wrap">
<div id="left_col">left</div>
<div id="right_col">Right</div>
<div id="slideshow">Slideshow</div> <div id="content">Content</div>
</div>
<div id="clear"> </div>
<div id="news">News</div><div id="search">Search</div>
<div id="clear"> </div>
<div id="footer">Footer</div>
</div>
</body>
</html>

за левой колонкой прописал сразу правую..

	14.05.2014, 09:01