Floating divs, simple Im sure but goofy outcome

HTML & CSS
1

Two divs.

One on the left to hold a product image, one on the right to hold all of the product data.

The div on the left needs to be a static 135px wide and the div on the right needs to consume the remaining space and stretch with the browser.

What happens now, if the div on the right pops under the div on the left.

So the div on the left is set to width:135px; but what do I set the width on the div to the right to in order to have it consume 100% of the rest of the space without popping below the div on the left?

:eye:

2

Just don’t float the div on the right :). If the div on the left is 135px…just set a left margin of 135px on the right div.

Don’t float it though :slight_smile:

3

Set margin-left:135px on the right div.

If you are supporting IE6 then you will need to give the div “haslayout” also (zoom:1.0 or the height:1% hack).


.el{margin-left:135px}
* html .el {zoom:1.0}
/* or ...... * html .el {height:1%;overflow:visible} */
Edit:

too slow :slight_smile:

4

Grrr that worked perfectly but now I’m getting a different goofy gap that’s got me stumped.

see http://www.gophertelecom.com/phone-systems.html

On the column to the right in the center… you see the big ass gap between the add to cart button and the mini description? I can’t seem to figure out why that is happening. Driving me nuts :nono:

5

You have a <div class=“clear”> between it (on all of them) :).

Just remove it, or if it actually is a clearing element (in the future) give it a 0 height with clear :slight_smile:


.clear{
height:0;/*no gap*/
overflow:hidden;/*for IE6*/
clear:both;/*actual purpose of the element*/
}
6

added that to the css and irt didn’t change anything, which is really odd.

I would prefer to just remove it but I can’t seem to find where in this magento software is sooo sliced and diced over thousands of files… it’s gotta be somewhere

7

Found it! thanks for your help

8

Glad to be of some help :). You’re welcome.

In the future always post a linki in your first post-your problem just happened to be easy enough to figure out hte answer without needing a link (for your first problem anyway) :slight_smile:

9

ok well actuall come to find out it DOES need to be there. So added the code back as <div style="clear:both; "></div> and the huge gap comes right back

10

Because it stil has a height :). Set height:0;overflow:hidden; on that.

Trust me it does work ;).

Just went to the site. There are some <Br>'s there and bottom margins set on the .description element.

Plus, I don’t see a huge gap anymore, just one caused by margins/br’s :slight_smile:

11

i put two <br> tags in instead and that seems to have the right effect.

12

I tried that too right in the div tag and it didn’t seem to effect it. I have no idea why but the breaks seem to work thus far. Thanks again for your help, I really appreciate it.

13

Put it back to the way it was and I’ll tell you why it isn’t working :).

Break the site lol :slight_smile:

14

ok its back

15

it seems like it has more to do with the picture in the left div than anything… i dunno thats wierd

16

The problem is that clear will clear all previous floats before it in the html(which is why it clears your picture) .

Read this for an explanation and solution.

17

ahh interesting point, so it’s shoving it to bottom of the photo. Maybe I should relay the stuff out in a table. I just hate to have all that code repeated over and over.

18

There is no need for a table for this :). Besides, you have excess amounts of tables and nestings anyway :). Paul told you how to fix this.

19

You need to use a new block formatting context to control the floats and sibling elements (hasLayout in older IEs). Remove that clearing div for the reasons already mentioned.

Here is a working model, incorporating these methods.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="en">
<head>
  <meta name="generator"
        content=
        "HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" />
        
  <meta http-equiv="Content-Type"
        content="text/html; charset=utf-8" />

  <title>...</title>
  <style type="text/css">
/*<![CDATA[*/

  body {}

  .listing-item {
    border-top:1px solid #D9DDE3;
    overflow:hidden;
    padding:12px 10px;
    zoom: 1;   /* for IE<8 */
    }

  .product-image {
    float:left;
    width:135px;
    }

  .product-shop {
    margin-left:200px;  /* delete if you want this to abut image */
    overflow:hidden;
    zoom: 1;   /* sets hasLayout for IE<8 */
    }

  /*]]>*/
  </style>
</head>

<body>
  <div class="listing-item">
    <div class="product-image">
      <a href=
      "http://www.gophertelecom.com/norstar-616-phone-system-nt5b01.html"
           title="Norstar 616"><img src=
           "http://www.gophertelecom.com/media/catalog/product/cache/1/small_image/135x135/5e06319eda06f020e43594a9c230972d/t/1/norstar616ksu.jpg"
           width="135"
           height="135"
           alt="Norstar 616"
           title="Norstar 616" /></a>
    </div>

    <div class="product-shop">
      <h5><a href=
      "http://www.gophertelecom.com/norstar-616-phone-system-nt5b01.html"
         title="Norstar 616 Phone System NT5B01">Norstar 616 Phone
         System NT5B01</a></h5>

      <div class="price-box">
        <span class="regular-price"
             id="product-price-27"><span class=
             "price">$0.00</span></span>
      </div><button class="form-button"
           onclick=
           "setLocation('http://www.gophertelecom.com/checkout/cart/add/uenc/aHR0cDovL3d3dy5nb3BoZXJ0ZWxlY29tLmNvbS9waG9uZS1zeXN0ZW1zLmh0bWw,/product/27/')"><span>Add
           to Cart</span></button> 
           <!-- <div class="clear"></div> -->
      <!-- delete the following element -->
      <!--      <div style="clear:both; height:0; overflow:hidden;"></div> -->

      <div class="description">
        Discontinued in 1995, 6x16 Phone System. <a href=
        "http://www.gophertelecom.com/norstar-616-phone-system-nt5b01.html"
             title="Norstar 616 Phone System NT5B01"><small>Learn
             More</small></a>
      </div>

      <p class="add-to"><a href=
      "http://www.gophertelecom.com/wishlist/index/add/product/27/"
         class="link-cart">Add to Wishlist</a> <span class=
         "pipe">|</span> <a href=
         "http://www.gophertelecom.com/catalog/product_compare/add/product/27/uenc/aHR0cDovL3d3dy5nb3BoZXJ0ZWxlY29tLmNvbS9waG9uZS1zeXN0ZW1zLmh0bWw,/">
      Add to Compare</a></p>
    </div>
  </div>
</body>
</html>

cheers,

gary

20

all fixed up. Thanks