CODEWITHSUNDEEP
htmloverlap
Aiden Ryan
Aiden Ryan

Reputation: 845

DIVs overlapping when I use float

I'm trying to get 2 divs to sit side by side, a div for an ad (skyscraper_ad), and a main black (smaller_main) but when I add a float the DIV will overlap another DIV, can somebody help?

My css:

#skyscraper_ad {
     display: block;
     width: 160px;
     height: 600px;
     padding: 5px;
     margin-right: auto;
     background-color: #CCCCCC;
     border: 1px solid #AAAAAA;
     position:relative;
     margin-bottom: 4px;
}

#smaller_main {
     display: block;
     width: 605px;
     height: auto;
     background-color: #CCCCCC;
     border: 1px solid #AAAAAA;
     position:absolute;
     padding: 5px;
     float: right;
     margin-bottom: 4px;
}

Upvotes: 2

Views: 5888

Answers (1)

Shad
Shad

Reputation: 15451

This should work:

#skyscraper_ad {
     width: 160px;
     height: 600px;
     padding: 5px;
     background-color: #CCCCCC;
     border: 1px solid #AAAAAA;
     margin-bottom: 4px;
     float:left;
}

#smaller_main {
     width: 605px;
     background-color: #CCCCCC;
     border: 1px solid #AAAAAA;
     padding: 5px;
     float: left;
     margin-bottom: 4px;
}

I took out your references to margin, positioning, and display. (and a height:auto which was meaningless as far as i could see). The margin auto was meaningless, the positioning was probably causing overlap, and the display was redundant (divs are already block)

Upvotes: 0

Related Questions