Question

Hi I have a problem with my css for some reason I can’t get a div under another div so here is my code

Live demo adamlisik.co.uk/kantor2
This is my css

body{
margin: 0;
font-family: Arial, sans-serif;
font-size: 13px;
line-height: 18px;
padding:0px;
background-image:url('../images/bg-body.jpg');
background-attachment:fixed;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: inherit;
  font-weight: bold;
  color: inherit;
  }
h1 {
  font-size: 30px;
  line-height: 36px;
}
h2 {
  font-size: 24px;
  line-height: 36px;
}
h3 {
  line-height: 27px;
  font-size: 18px;
}
h4,
    h5,
h6 {
  line-height: 18px;
}
h4 {
  font-size: 14px;
}
h5 {
  font-size: 12px;
}
h6 {
  font-size: 11px;
  color: #999999;
  text-transform: uppercase;
}
p {
  margin: 0 0 9px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  line-height: 18px;
    color:#0d0d0d;
}
hr{ border:none; height:1px; margin:30px 0; background-color:#CCCCCC; color:#CCCCCC; }
    .hr{ border-top:1px solid #CCCCCC; margin:30px 0; }
.container {
width:1000px;
margin: auto;
padding:0px;
background:#FFF;
}
.header { 
position:relative; 
z-index:10; 
background-image:url('../images/logo1.jpg');
background-repeat:no-repeat;
background-position:left bottom; 
height:100px;
width:950px;
margin:auto;

}

ul#dropdown-menu{  float:right; list-style:none; margin-bottom:0px; padding-top:70px; }       
ul#dropdown-menu li{ float: left; }
ul#dropdown-menu li a{ display: block; padding:7px 21px 5px 0; font-size:16px; text-transform:none; color:#252525;text-decoration:none; font-weight:bold; }            
ul#dropdown-menu li a:hover{ color:#FF0000;}
ul#dropdown-menu li.hover a{ text-decoration:underline;  }           
ul#dropdown-menu li.current > a{ color: #FF0000; }                             
ul#dropdown-menu li .sub-menu li a{ color:#252525; }                               
ul#dropdown-menu li.last > a{ padding-right:0px; }

.money {
    margin-top:20px;
    background-image:url('../images/hr-bg.jpg');
    height:120px
}

.content {
padding:25px 50px 10px;
}

.footer {
padding:5px 15px 10px;
}

Now as soon as you add the next two classes in css to make the tables go to ether side

 .left {
float:left;
}
.right {
float:right;}

Every thing changes the hr is above tables and all the footer styles don’t work

Any idea how to fix this?

Answer 1

When you add the float property to an element it’s removed from the normal flow, so its parent, which is still in the normal flow, behaves as if the floated element isn’t its child anymore.

You can solve like this:

.hr{ clear: both; }

Hope it helps.