Home/ Questions/Q 8638443
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T10:43:47+00:00

I am building a fluid site comprised of 50% width divs and 25% width

  • 0

I am building a fluid site comprised of 50% width divs and 25% width divs, the problem I am having is alignment, specifically with Chrome.

I have uploaded the code here: http://tekulated.com/test100/

.half { float: left; width: 50%; }
.quater { float: left; width: 25%; }
.half img, .quater img { width: 100%; display: block; }

If you load up the example in Firefox and resize the browser you will see it works perfectly. In Chrome however the divs grow unproportionately and as a result create large gaps.

~ Removing display: block corrects the problem however I get image padding issues.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok, so what’s going on is that the big red box in your example gets a little too big compared to its row-mates and edges into the bottom row’s area, which then pushes the boxes to the right, and then making the last box wrap to the next (logical) line

    I think ensuring the big-red image is of a height proportional to the smaller row height would help. It’s just an image resizing issue that’s all.

    Hope that helps.

    • 0