3 Replies - 639 Views - Last Post: 04 February 2013 - 03:56 PM

#1 Jay0830  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 58
  • Joined: 01-June 10

DIV spread evenly with float left

Posted 04 February 2013 - 02:56 PM

Hi, everyone,
I got a problem I have no idea how to slove it.

If I have 3 small divs in one big div.
How to make it spread evenly and the first DIV is in left most position, last DIV is in right most position.


When I add "float:left" would looks like the picture
Posted Image

and I want it looks like this.
Posted Image

Thanks for help.

Is This A Good Question/Topic? 0
  • +

Replies To: DIV spread evenly with float left

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3074
  • View blog
  • Posts: 10,270
  • Joined: 12-December 12

Re: DIV spread evenly with float left

Posted 04 February 2013 - 03:11 PM

Give the 3 floated divs each a left-margin.

Some choose to float two to the left and one to the right, but it really doesn't make a difference :). If, however, you decided to do this for some reason then give the two left ones left-margins and the right one a right-margin.

Hint: When working with float measurements don't try and measure precisely to the pixel; always allow at least one pixel leeway - to prevent float-drop due to inaccuracies inherent in browser rendering.

This post has been edited by andrewsw: 04 February 2013 - 03:14 PM

Was This Post Helpful? 1
  • +
  • -

#3 Jay0830  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 58
  • Joined: 01-June 10

Re: DIV spread evenly with float left

Posted 04 February 2013 - 03:37 PM

Hi, andrewsw,
Thanks for your quick reply.

so there is no way to make it automatically spread?

if I added 4th div, it would drop to second line, and first line would look like empty on the right side.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3074
  • View blog
  • Posts: 10,270
  • Joined: 12-December 12

Re: DIV spread evenly with float left

Posted 04 February 2013 - 03:56 PM

Not so much.. Well, with a bit of effort I suppose. Kind-of. You could play with this fiddle (not mine). It uses text-justify: distribute-all-lines; which is currently poorly supported in browsers, and you would have to see how if behaves if you drop in another div.

Is this for the layout of your page or is it a small area within the page? Tables shouldn't be used for layout but I suppose this would be an acceptable use for a table: saves piddling about and much easier to distribute evenly.

There are CSS3 rules that you can apply to the divs (display: table-cell; etc.) but these are not universally supported (in the different browsers and versions) - although more so than they were.

Actually, display: table-cell; and table-column, etc., are supported after IE7. caniuse
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1