DIV partition with CSS - css

Question

I got a problem with my DIV partition. I want this:
But i found no solution. Can anybody help me?
With this solution, the all container are on the left and not centered.
#logo-text{
margin: 0 auto;
width: 600px;
float: left;
}
#image{
float: right;
}

Answer 1

Although you have not given any examples of what you have tried, i'd like to give you this example:
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>
hope this helps
http://jsfiddle.net/LSsMc/48/

Answer 4

Here's 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

You need to create a container class for example who contains all the childs elements, to center the content.
html part :
<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 part :
.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;
}
jsfiddle http://jsfiddle.net/LSZfH/1/