Member Avatar for MarrkoR

Hi,
i have 4 div and I want to do so:

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
  • 90 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Member #361407

Dani AI

Generated

The right column is dropping because all four boxes were floated at the same level and their widths exceeded the 600px wrapper. With the numbers in the original post the browser is forced to wrap the last float: 60 + 460 + 460 + 80 = 1060, which is far larger than 600. That is the core issue, not a mysterious bug.

Both fixes shown in the thread are valid: kept the two center pieces together by nesting them in a single center column (so they stack instead of sitting side-by-side), and ’s float:right will pin the right column to the edge if the remaining center width is adjusted. For robustness also add box-sizing: border-box and make sure any padding/border is accounted for, or use a clearfix on the wrapper so floated children don’t collapse their parent.

A modern, simpler approach is to use Flexbox so the left and right columns keep fixed widths and the middle column expands and stacks its internal rows. Example structure and CSS:

<div class="layout">
  <div class="col-left">1</div>
  <main class="main">
    <div class="top">2</div>
    <div class="center">3</div>
  </main>
  <div class="col-right">4</div>
</div>
.layout { display:flex; width:600px; box-sizing:border-box; }
.col-left { width:60px; }
.col-right { width:80px; }
.main { flex:1; display:flex; flex-direction:column; }
.top { height:100px; }
.center { flex:1; }

Flexbox is widely supported and avoids float-related wrapping; see the MDN Flexbox guide for details and fallbacks. For legacy float-based layouts, ensure total widths fit the container or wrap center content as suggested.

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=''/>
  </body>
</html>

A center container helps keep the columns together.

Member Avatar for MarrkoR

Thanks

Member Avatar for Member #361407

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.