Форум

Слейп · #1 (**permalink**) 14.02.2013, 13:08

есть 4 блока

<div class="work-box-news">
    <div class="work-box_center-news">
        <div class="left-area-work"></div>
        <div class="include-work_area"></div>
    </div>
</div>

.work-box-news {    
    background:#F0F0F0;    
    min-height:800px;    
    border-bottom: 1px solid #C1C1C1;
    border-top: 1px solid white;    
    border:3px solid gold;
}

.work-box_center-news {    
    width: 940px;    
    min-height:800px;    
    padding:20px 0;     
    position:relative;     
    display:inline-block; 
    vertical-align:auto;    
    border:3px solid black;  
}


.left-area-work{
    border:1px solid #929292;
    background: #FAFAFA;    
    width: 240px;
    min-height: 723px;    
    float:left;    
    border:3px solid green;
}

.include-work_area{    
    position: relative;        
    width: 650px;    
    min-height: 500px;
    font-family: PT Sans;
    left:25px;      
    float:left;   
    border:3px solid red;
}

Как выровнять work-box_center-news по центру по горизонтали, при том чтобы высота всех блоков была динамичной?

Слейп · #2 (**permalink**) 14.02.2013, 13:17

для ie8

danik.js · #3 (**permalink**) 14.02.2013, 13:19

text-align: center для родительского блока:

<!DOCTYPE html>
<title></title>
<style>
html{width:1200px;}
.work-box-news {   
    background:#F0F0F0;   
    min-height:800px;   
    border-bottom: 1px solid #C1C1C1;
    border-top: 1px solid white;   
    border:3px solid gold;
    text-align: center;
}
 
.work-box_center-news {   
    width: 940px;   
    min-height:800px;   
    padding:20px 0;    
    position:relative;    
    display:inline-block;
    vertical-align:auto;   
    border:3px solid black; 
}
 
 
.left-area-work{
    border:1px solid #929292;
    background: #FAFAFA;   
    width: 240px;
    min-height: 723px;   
    float:left;   
    border:3px solid green;
}
 
.include-work_area{   
    position: relative;       
    width: 650px;   
    min-height: 500px;
    font-family: PT Sans;
    left:25px;     
    float:left;  
    border:3px solid red;
}

</style>
<div class="work-box-news">
    <div class="work-box_center-news">
        <div class="left-area-work"></div>
        <div class="include-work_area"></div>
    </div>
</div>

Слейп · #4 (**permalink**) 14.02.2013, 13:36

спасибо большое, теперь он действительно по центру, чтобы все содержимое дочерних блоков было по левому краю немного подредактировал.

.work-box-news {    
    background:#F0F0F0;    
    min-height:800px;    
    border-bottom: 1px solid #C1C1C1;
    border-top: 1px solid white;    
    border:3px solid gold;
    position:relative;  
    
    text-align: center;  
}

.work-box_center-news {    
    width: 940px;    
    min-height:800px;    
    padding:20px 0;     
    position:relative;      
    display:inline-block;        
    border:3px solid black; 
    text-align: left; 
}


.left-area-work{
    border:1px solid #929292;
    background: #FAFAFA;    
    width: 240px;
    min-height: 723px;    
    float:left;    
    border:3px solid green;
    position:relative;

    text-align: left; 
}

.include-work_area{    
    position: relative;        
    width: 650px;    
    min-height: 500px;
    font-family: PT Sans;
    left:25px;      
    float:left;   
    border:3px solid red;

    text-align: left; 
}

НО, left-area-work (зеленый), в ie8, при увеличении высоты уходит за work-box_center-news(черный). Всю голову изломал уже...

Слейп · #5 (**permalink**) 14.02.2013, 13:40

извиняюсь, я нашел проблему но её не решил, если ручками поменять в css высоту зеленого блока то все нормально. У меня зеленый блок увеличивает высоту jQuery скриптом - Там выподающее вертикальное меню, во всех браузерах кроме ie8 нормально увеличивается высота... в чем может быть проблема ?

danik.js · #6 (**permalink**) 14.02.2013, 13:48

Сообщение от Слейп

в чем может быть проблема

Может быть в том что вы используете javascript там, где нужно использовать css?

Чем height: auto (это дефолтное значение кстати) не устраивает?

Слейп · #7 (**permalink**) 14.02.2013, 14:12

Все, сделал так:

<div class="work-box-news">
	    <div class="work-box_center-news">
	        <div class="left-area-work"></div>
	        <div class="include-work_area"></div>
                   <div style="clear: both;"></div>   <!-- ДОБАВИЛ ЭТУ СТРОКУ --!>
	    </div>     
</div>

И все стало отлично работать, спасибо большое что обратили внимание!

danik.js · #8 (**permalink**) 14.02.2013, 14:17

<div style="clear: both;"></div> - прошлый век.
Достаточно родителю задать

display: table;
zoom: 1;

Хотя table не всегда можно применить. А зачем вобще задавать блоку display: inline-block ?

display: block;
heigth: 800px;
margin: 0 auto;

это также отцентрирует блок по горизонтали.

Слейп · #9 (**permalink**) 15.02.2013, 09:57

Готовый вариант:

<div class="work-box-news">
	        <div class="work-box_center-news">
	            <div class="left-area-work"></div>
	            <div class="include-work_area"></div>
                       <div style="clear: both;"></div>
	        </div>
</div>

.work-box-news {    
    background:#F0F0F0;    
    min-height:800px;    
    border-bottom: 1px solid #C1C1C1;
    border-top: 1px solid white;       
    text-align: center;  
}

.work-box_center-news {   
    margin: 0 auto;
    min-height: 800px;
    padding: 20px 0;
    position: relative;
    text-align: left;
    width: 940px; 
}


.left-area-work{
    border:1px solid #929292;
    background: #FAFAFA;    
    width: 240px;    
    min-height: 723px;    
    float:left; 
    position:relative;
    text-align: left; 
}

.include-work_area{    
    position: relative;        
    width: 650px;    
    min-height: 500px;
    font-family: PT Sans;
    left:25px;      
    float:left;       
    text-align: left; 
}

ksa · #10 (**permalink**) 15.02.2013, 10:20

Сообщение от Слейп

Готовый вариант:

Можно еще "облегчить"...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.work-box-news {    
    background:#F0F0F0;    
    min-height:800px;    
    border-bottom: 1px solid #C1C1C1;
    border-top: 1px solid white;       
}
.work-box_center-news {   
    margin: 0 auto;
    min-height: 800px;
    padding: 20px 0;
    width: 940px; 
	overflow: hidden;
}
.left-area-work{
    border:1px solid #929292;
    background: #FAFAFA;    
    width: 240px;    
    min-height: 723px;    
    float:left; 
}
.include-work_area{    
    width: 650px;    
    min-height: 500px;
    font-family: PT Sans;
    margin-left:25px;      
    float:left;       
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="work-box-news">
	<div class="work-box_center-news">
		<div class="left-area-work">left-area-work</div>
		<div class="include-work_area">include-work_area</div>
	</div>
</div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript