arunwebber arunwebber - 3 months ago 7
CSS Question

How to divide the content column in to two using css

I am trying to divide a web page in to three i am working with very basic scripts.

<html>
<head>
<title>HTML div Tag</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="left1">
<p>This is discribed in the style sheet as div.left1.</p>
</div>
<div class="left2">
<p>This is discribed in the style sheet as div.left2.</p>
</div>
<div class="right">
<p>This is discribed in the style sheet as div.right.</p>
</div>
</body>
</html>


And the css part

div.left1 {
background-color:#eeeeee;
width: 68%;
height:50%;
padding: 0 0 0 0;
float: left;
}
div.left2 {
background-color:#eeeeee;
width: 68%;
height:50%;
padding: 0 0 0 0;
float: left;
}
div.right {
background-color:#eeeeee;
width: 20%;
height:100%;
padding: 0 5% 0 0;
float: right;
}


I am expecting out put as the left content divided in to two and the right content is arranged in bottom of the page. But on the out put screen the left column is coming after the right column how to avoid it I only know some basics about css.

Answer

I think this is what you want, but I'm not sure

css

html, body{
  height:100%;
}
div.left1 {
  background-color:#eeeeee;
  width: 68%;
  height:50%; 
  padding: 0 0 0 0;
  float: left
}
div.left2 {
  background-color:#eeeeee;
  width: 68%;
  height:50%; 
  padding: 0 0 0 0;
  float: left
}
div.right {
 background-color:#eeeeee;
 width: 20%;
 height:100%;  
 padding: 0 5% 0 0;
 float: right;
 vertical-align:top;
}

html

<div class="left1">
  <p>This is discribed in the style sheet as div.left1.</p>
</div>
<div class="right">
  <p>This is discribed in the style sheet as div.right.</p>
</div>
<div class="left2">
  <p>This is discribed in the style sheet as div.left2.</p>
</div>

http://jsfiddle.net/5anxsa1m/

Your code was correct, you just had to change the position of the .right div in the Html