Member Avatar for MarrkoR

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
  • 75 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by leegeorg07

Recommended Answers

All 3 Replies

Member Avatar for TeejMonster 
<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.

Member Avatar for MarrkoR

Thanks

Member Avatar for leegeorg07

i would have thought to use

div.right{ 
float:right;
width:80px;
height:500px;
background-color: #336699;
             }
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.