CODEWITHSUNDEEP
htmlcss
Jared Wilcox
Jared Wilcox

Reputation: 13

Adding Float Removes Background

I feel like I am missing something really simple here.

I have content on this page: http://wilcoxauto.wpengine.com/inventory/2014/Chevrolet/Camaro/MN/Forest%20Lake/2G1FB1E32E9313263/

At the top of the page there are three column of varying widths. Further down I have content under vehicle comments and vehicle specifications. Vehicle comments and vehicle specifications are in a div with the id eagle-content-detail-bottom. Each of the three columns are also in their own divs. Everything is in one wrapper that is providing the white background.

I want to move the comments and specifications up so that they are just underneath the vehicle images and pricing information. If I add float:left; to the css for the div eagle-content-detail-bottom I somehow lose the white background, except at the very top (under the vin number and print image) and the content doesn't move.

Any help would be greatly appreciated.

Thank you, Jared

Upvotes: 0

Views: 77

Answers (3)

Himanshu Aggarwal
Himanshu Aggarwal

Reputation: 1100

Firstly wrap up your divs properly, you can follow the below code for a clean and convenient design, 

<div id="product_details" class="container-fluid">
  <div id="eagle-content-detail-left">...</div>
  <div id="eagle-content-detail-center">...</div>
  <div id="eagle-content-detail-right">...</div>
</div>

then wrap your DESCRIPTION div and Similar Vechiles DIV in another row.

<div id="product_details" class="container-fluid">
  <div id="eagle-content-detail-bottom">....</div>
  <div id="eagle-content-detail-right">....</div>
</div>

CSS 

.container-fluid{width:100%;float:left;}
#eagle-content-detail-bottom{float:left;}

This will simply setup all your structure as per your desire.

Upvotes: 0

Sandeep Pal
Sandeep Pal

Reputation: 2175

Try this,Not a very proper solution but effective i guess

 #eagle-content-detail-bottom{
   position : absolute;
   top : 650px;
 }

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Whenever you float the element you need to clear them.

For eg.

<div class="main">
  <div class="one">one</div>
  <div class="two">two</div>
</div>

.one{float:left;}
.two{float:right;}
.main{overflow:hidden;}/*clear the float*/

You may use clearfix techniques, just search about it.

Have Fun with SO.

Upvotes: 2

Related Questions