Home/ Questions/Q 741529
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T08:38:33+00:00

what’s wrong with this code? The background disappears behind the divs when I add

  • 0

what’s wrong with this code?

The background disappears behind the divs when I add float: left to #text and #text2. But when I remove the float: left, everything looks good.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#first{
 width: 200px;
 background-color: #345752;
}
#left_b{
 background:transparent url('img/left.png');
 background-position: left top;
 background-repeat: repeat-y;
  min-height: 30px;
}
#right_b{
 background:transparent url('img/right.png');
 background-position: right top;
 background-repeat: repeat-y;
}
#text{
 float: left;
 width: 50px;
 height: 30px;
}
#text2{
 float: left;
 width: 70px;
 height: 30px;
}
</style>
</head>
<body>
<div id = "first">
   <div id = "left_b">
      <div id = "right_b"> 
         <div id = "text">text 1</div>
         <div id = "text2">text 2</div>
      </div>
   </div>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You container div #right_b is collapsing because its children are floating. You can fix this with the “Clear-Fix” technique. You may want to check out the following Stack Overflow post for a few solutions:

    One popular solution is to add overflow: hidden to your container div: #right_b:

    #right_b {
   background:transparent url('img/right.png');
   background-position: right top;
   background-repeat: repeat-y;
   overflow: hidden;
}

    Another common one is to add a <div style="clear: both;">&nbsp;</div> before closing your container div:

    <div id="first">
   <div id="left_b">
      <div id="right_b"> 
         <div id="text">text 1</div>
         <div id="text2">text 2</div>
         <div style="clear: both;">&nbsp;</div>
      </div>
   </div>
</div>
    • 0