Problem with floated element?

HTML & CSS
1

I really am trying to figure out why the floated links at

dont all appear inline

1920×1080 384 KB

I tried to fire out the problemm but cant see whats the fix for this though…
Any help?

2

Maybe I’m having a dns problem, but your URL goes to “searchfusion”. Are you sure that the link is valid?

I’ve never heard that expression before :smile:

Is there maybe a 1px difference in the height of the images?

2 Likes
3

You have floats snagging due to unequal heights as Ron eluded to. Confirmed in FF inspector.
The #1 div is about 1 or 2px taller and it is causing #3 div to snag thus forcing #4 div to a new line of it’s own.

You got bigger problems with that site though. Those images are massive, one weighing in at 5.10 mb, another coming in at 4.36 mb. The fact that they are png images with that much detail is causing the bloat.

Convert them to jpg, reduce the pixel size, then compress them for the web at around 85% quality.

Your client would have lost me as a potential customer just because you forced me to download over 15mb worth of images just to view the homepage. Not only that, but the page crashed my browser twice.:weary:

The extra connections (waiting for and transferring data) to shopify were not helping either but that is probably beyond your control. It might get better though when you fix those images since they are coming from shopify.

3 Likes
4

A few fixes here:

  • semantics : this is a navigation element, a list with categories (nav > ul > li > title + figure + link
  • As most images seem to be roughly the same size, I would go for fixed dimensions (ratio based → height:0, padding bottom %)
  • self clearing grid (every element clears itself (margin-right -100%), new lines have to be forced (clear left)
  • because the figure has a fixed dimension the layout is already there, even before the images are loaded … slow image loading won’t make your interface jump … and you can use nice loading effects if you want.
    If you scale this … you can also adjust the figure ratio. (they take too much height in the mobile version IMO)
    You can replace the image with one of better dimensions for the size … or you can move the image in it’s frame (top: -20% if the figure ratio is less high).
  • Only one link … overlapping the full box (fully clickable).
  • too many html elements to center stuff.

Quick fix (wrote it fast, haven’t checked it but should be OK)
I rewrote the html completely … but you can just apply the same CSS principles on your existing code.

<style type="text/css">
  .teaser-list {
     list-style:none;
     overflow:hidden,
     width: 100%;
     margin: 0;
     padding: 0;
  }
  .teaser {
    width:50%;
    float:left;
    margin-right:-100%;
    position: relative;
  }
  .teaser:nth-child(2n+1) {
    clear: left:
  }
  .teaser:nth-child(2n+2) {
    margin-left:50%;
  }
  .teaser-title {
    position: absolute;
    z-index: 2;
    margin: 0;
    padding: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .teaser-figure {
    width:100%;
    height:0;
    padding: 0 0 66%;
    margin:0;
    position: relative;
    background: #000;
    overflow:hidden;
    z-index: 1;
  }
  .teaser-img, .teaser-button, .teaser-link {
     display: block;
     position: absolute;
     top: 0;
     left:0;
     margin: 0;
     padding: 0;
     width: 100%;
  }

  .teaser-button, .teaser-link {
    height: 100%;
  }
  .teaser-button {
    z-index: 3;
  }
  .teaser-link {
     text-indent: -999px;
  }


</style>
<nav class="teaser-nav">
  <ul class="teaser-list">

<li class="teaser">
  <h2 class="teaser-title">shirts</h2>
  <figure class="teaser-figure">
    <img src="//cdn.shopify.com/s/files/1/1307/8381/t/2/assets/home_ad_1.jpg?11053637368445073317" alt="5 people sitting on a boat, wearing nice URT tshirts" class="teaser-img">
  </figure>
  <p class="teaser-button">
    <a href="/collections/all/shirts" class="teaser-link" title="visit the URT tshirt category">
      <span class="teaser-link-inner">See all URT tshirts</span>
   </a>
  </p>
</li>
...

</ul>
</nav>
1 Like
5

As @ronpat said images are not equal that is why it’s not floating properly.

Solution 1: all the images are of different aspect ratio you must make sure they are all same. If you do that irrespective of the image size i.e. width and height browser will adjust them automatically since images are not using any fixed height or width in the html code.

Solution 2: resize all the images to same size.

Solution 3: set a max height for the images in css like this

.scaled-text-base img {    
   max-height: 334px;
}

and adjust them accordingly with media query. It’s a temporary solution if you don’t wish to resize the images.

1 Like
6

Even if you make all images the same size … it won’t be rendering well on all screensizes in all browsers.
Some browsers still have problems with rounding pxs.
He uses 50% for width … if the container is 999px wide … one image will be higher then the other in browsers that can’t calculate subpixels properly.
That one pixel might not be noticeable, but it will be enough for an even element to render on the right side instead of the left.
A clear:left on even elements is necessary IMO.

3 Likes
7

thanks

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.