0

Hi,
i have 4 div and I want to do so:
http://img15.imageshack.us/img15/2514/divd.png
But i have trouble whit right div. It is below the second div.

<html>
<head>
<style type="text/css">
body { 
margin:0; 
margin-top: 0; 
margin-bottom: 0;
text-align: center;
}
div.all{
width: 600px;
background-color: #5292d9;
}
div.left{
float: left;
width: 60px;
height: 500px;
background-color:#00ff00;
}
div.top{
float: left;
width: 460px;
height: 100px;
background-color:#223366;
}
div.center{
float: left;
width: 460px;
height: 400px;
background-color:#123d34;
}
div.right{
float: left;
width: 80px;
height: 500px;
background-color:#336699;
}
</style>
</head>
<body>
<div class = "all">
    <div class = "left">1</div>
	<div class = "top">2</div>
    <div class = "center">3</div>
	<div class = "right">4</div>
</div>

</body>
</html>
3
Contributors
3
Replies
4
Views
8 Years
Discussion Span
Last Post by leegeorg07
0
<html>
  <head>
    <style type="text/css">
      body { width:         600px; 
             margin:        0; 
             margin-top:    0; 
             margin-bottom: 0;
             text-align:    center; }

      div.all{ width:            600px;
               background-color: #5292d9; }

      div.left{ float:            left;
                width:            60px;
                height:           500px;
                background-color: #00ff00; }

      div.center{ float:            left;
                  width:            460px;
                  height:           500px;
                  background-color: #5292d9; }

      div.top{ float:            left;
               width:            460px;
               height:           100px;
               background-color: #223366; }

      div.bottom{ float:            left;
                  width:            460px;
                  height:           400px;
                  background-color: #123d34; }

      div.right{ float:            left;
                 width:            80px;
                 height:           500px;
                 background-color: #336699; }
    </style>
  </head>
  <body>
    <div class = "all">
      <div class = "left">1</div>
      <div class="center">
        <div class = "top">2</div>
        <div class = "bottom">3</div>
      </div>
      <div class = "right">4</div>
    </div>

    <img src='http://img15.imageshack.us/img15/2514/divd.png'/>
  </body>
</html>

A center container helps keep the columns together.

0

i would have thought to use

div.right{ 
float:right;
width:80px;
height:500px;
background-color: #336699;
             }
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.