2012-02-29 4 views
0

У меня есть обертка, содержащая несколько div. Я хотел бы, чтобы эта обертка была центрирована по горизонтали, и я хотел бы, чтобы эта оболочка обертывала весь ее контент (высота auto). В приведенном ниже «прикрепленном» шаблоне JSFiddle вы увидите, что оболочка обертывает все его содержимое, но не центрируется по горизонтали. Если я удалю свойство float из обертки, он будет центрироваться по горизонтали, но обертка больше не завершает его содержимое. Надеюсь, кто-то может помочь мне, как сосредоточен, так и завернут. Заранее благодарю за ваши ответы. Приветствия. Марк.css - проблема с позиционированием оболочки

http://jsfiddle.net/xbcxs/1/

Мой HTML:

<div id="wrapper"> 
    <div id="column1" class="column"> 
     <div id="contentOne" class="content">contentOne</div> 
     <div id="contentTwo" class="content">contentTwo</div> 
    </div> 
    <div id="column2" class="column"> 
     <div id="contentThree" class="content">contentThree</div> 
    </div> 
</div> 

Мой CSS:

#wrapper { 
    margin:10px auto; 
    width:430px; 
    float:left; 
    height:auto; 
    border:2px solid blue; 
} 

.content { 
    border:1px solid black; 
    background-color:yellow; 
    width:200px; 
    height:100px; 
} 

.column { 
    float: left;   
} 

#contentThree { 
    height: 130px;   
} 

ответ

2

Изменение #wrapper CSS для:

#wrapper { 
    margin:10px auto; 
    width:430px; 
    height:auto; 
    border:2px solid blue; 
    overflow:hidden; 
} 

Обновлено jsFiddle: http://jsfiddle.net/xbcxs/2/

+1

спасибо, что посмотрели. Он работает очень хорошо ... – Marc

0

У меня был один и тот же вопрос несколько дней назад я использовал:

top: 50%; position: absolute; 

в обертке CSS и его работы хорошо для меня. попробуйте

Смежные вопросы