Раздел DIV с CSS

Question

У меня возникла проблема с моим разделом DIV. Я хочу этого:

Но я не нашел решения. Кто-нибудь может мне помочь?

С помощью этого решения весь контейнер находится слева и не центрирован.

#logo-text{ 
    margin: 0 auto; 
    width: 600px; 
    float: left; 
} 

#image{ 
float: right; 
} 

Answer 1

Хотя вы не дали никаких примеров того, что вы пытались, я хотел бы дать вам этот пример:

http://jsfiddle.net/LRffh/

<div id="container"> 
    <div id="lineLeft"> 

     <div id="boxOne">box one</div> 
     <div id="boxTwo">box two</div> 

    </div> 
    <div id="lineRight"> 

     <div id="image">image</div> 

    </div> 

    <div class="clear"></div> 
</div> 

CSS

#container { 
    width: 1000px; 
    min-height: 1px; 
    background: red; 
    padding: 20px; 
} 

#lineLeft, #lineRight { 
    float: left; 
    width: 450px; 
    padding: 20px; 
    background: grey; 
} 

#lineLeft { 
    margin-right: 20px; 
} 

#boxOne, #boxTwo, #image { 
    background: white; 
    width: 100%; 
    min-height: 1px; 
} 

#lineLeft div, #lineRight div { 
    margin-bottom: 10px; 
} 

.clear { 
    clear: both; 
} 

Answer 2

HTML:

<div class='continer'> 
    <div class='logo'></div> 
    <div class='image'></div> 
    <div class='text'></div> 
</div> 

CSS:

.continer { 
    width:500px; 
    padding:10px; 
    background:red; 
    height:400px; 
} 

.logo { 
    width:200px; 
    padding:10px; 
    background:#ddd; 
    height:150px; 
    float:left; 
    margin:10px; 
} 
.text { 
    width:200px; 
    padding:10px; 
    background:#ddd; 
    height:150px; 
    float:left; 
    margin:10px; 
} 
.image { 
    width:200px; 
    padding:10px; 
    background:#ddd; 
    height:340px; 
    float:right; 
    margin:10px; 
} 

fiddle

Answer 3

<style> 
#wrapper 
{ 
    margin:0px auto; 
    padding:0px; 
    width:1000px; 
     } 
#side 
{ 
    margin:0px ; 
    padding:0px; 
    width:350px; 
    height:500px; 
    float:left; 

     } 
#first 
{ 
    margin:0px ; 
    padding:0px; 
    width:350px; 
    height:300px; 
    background-color:red; 
     } 
#Second 
{ 
    margin:0px ; 
    padding:0px; 
    width:350px; 
    height:300px; 
    background-color:blue; 
     } 
#content 
{ 
    margin:0px ; 
    padding:0px; 
    width:650px; 
    height:600px; 
    float:right; 
    background-color:green; 
     } 
</style> 

<div id="wrapper"> 
    <div id="side"> 
     <div id="first"></div> 
     <div id="Second"></div> 
    </div> 
    <div id="content"> 
    </div> 
</div> 

надеюсь, что это помогает http://jsfiddle.net/LSsMc/48/

Answer 4

Вот another take on the problem

HTML

<div class='table'> 
    <div class='cell'> 
     <div class='table'> 
      <div class='row'> 
       <div class='cell'></div>  
      </div> 
      <div class='row'> 
       <div class='cell'></div>  
      </div> 
     </div> 
    </div> 
    <div class='cell'></div>  
</div> 

CSS

html, body{ 
    width:100%; 
    height:100%; 
    padding:0; 
    margin:0; 
} 
body{ 
    position:fixed; 
} 
.table{ 
    display:table; 
    width:100%; 
    height:100%; 
} 
.cell{ 
    display:table-cell; 
    border:1px solid grey; 
    width:50%; 
} 
.row{ 
    display:table-row; 
    border:1px solid grey; 
} 

Answer 5

Вам необходимо создать класс-контейнер для примера, который содержит все элементы Чайлдс, чтобы центрировать содержимое.

HTML часть:

<div class="container"> 
<div id="left"> 
    <div id="logo-text"></div> 
    <div id="text"></div> 
</div> 
<div id="right"> 
    <div id="image"></div> 
</div> 

CSS часть:

.container { 
    background-color: red; 
    max-width: 1000px; 
    margin-left: auto; 
    margin-right: auto; 
    overflow: hidden; 
} 

/* Left part */ 
#left { 
    float: left; 
    padding: 20px; 
} 

#logo-text { 
    background-color: darkgrey; 
    width: 300px; 
    height: 300px; 
} 

#text { 
    background-color: darkgrey; 
    width: 300px; 
    height: 300px; 
} 

/* Right part */ 
#right { 
    float: right; 
    padding: 20px; 
} 

#image { 
    padding: 20px; 
    background-color: darkgrey; 
    width: 300px; 
    height: 300px; 
} 

jsfiddlehttp://jsfiddle.net/LSZfH/1/