1 reply [Last post]
bv_arvind
bv_arvind's picture
Offline
newbie
Last seen: 4 years 41 weeks ago
Timezone: GMT-8
Joined: 2014-12-29
Posts: 1
Points: 2

Hi
I am floating a div within a div with float attribute set on the child div. Not sure why the child div is displayed outside the parent. Any help would be appreciated.

HTML:

<body>
<form action="/login" method="post">
<div class="outer">
   <div class="header"></div>
   <div class="bg-image">
        <div class="login">
        </div>
   </div>
   <div class="clearer"></div>
   <div class="footer"> </div>
   <div class="bottom"></div>
</div>
 </form>
</body>

Here is the css code;

.header {
        background-color: rgba(231,152,51,1);
        height: 40px;
        width: 100%;
}
 
.bg-image {
        width: 100%;
        background: url("big.jpg") no-repeat;
        background-size: contain;
        padding-top: 47.61%;/* (img-height / img-width * width) */
        position: relative;
        overflow: hidden;
}
 
.outer {
        margin: 0 auto;
        width: 80%;
        height: auto;
        min-height: 100%;
}
 
.footer {
        background-color: rgba(231,152,51,1);
        height: 40px;
        width: 100%;
}
 
.bottom {
        height: 10%;
        width: 100%;
}
 
.login {
        height: 40%;
        width: 30%;
        margin-left: 60%;
        margin-top: 2%;
        background-color: rgba(88,78,78,0.6);
        position: absolute;
        overflow: auto;
        float: left;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 hours 6 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Position does you in

Remove all instances of the position property. Do not use this property without a clear and compelling reason. In this case, it is used without understanding how it works.

I don't know why you have the clear div. I see no reason for it.

It is possible to use absolute positioning for what I think you want, but I don't see the need. Nor is it necessary to float the .login element. You probably don't need the height or width properties either. The following seems to work just fine, though it's hard to debug a bunch of empty elements. You should always include sample content.

.login {
  background-color: rgba(88, 78, 78, 0.6);
  border: 1px solid black;
  margin-left: 60%;
  margin-top: 2%;
  }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.