• Locked
1 reply [Last post]
Mon, 2014-12-29 22:56
bv_arvind
bv_arvind's picture
Offline
newbie
Last seen: 8 years 12 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;
}

Top
Tags:
Tue, 2014-12-30 18:51
#1
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 3 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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.

Top
  • Locked