How do you line DIVs up so perfectly like this?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

How do you line DIVs up so perfectly like this?

Post by simonmlewis »

http://www.hpiracing.co.uk/news.php
This is not my web site, or do I promote it as such - I use this purely to demonstrate the central DIV boxes.

I Want to know, how you do these sort of block divs, that a) stay lined up at left/right sides, and when expanded browser, they stay that way, or even add new columns.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: How do you line DIVs up so perfectly like this?

Post by Weirdan »

They do it with javascript (see ResizePromoBox function in dynamicproductlisting.js file). You could do it with pure css and media queries though.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you line DIVs up so perfectly like this?

Post by simonmlewis »

How with CSS only?
I did strip back their page and found if I removed those JS files, it went wrong. So how do you do it with CSS?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do you line DIVs up so perfectly like this?

Post by Celauran »

Set the container to a percentage width and float the boxes inside it.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you line DIVs up so perfectly like this?

Post by simonmlewis »

So how do you then add margins, and with percentages, get them lined up perfects whatever the width of the outter container?
ie.
width: 33.3%
margin-right: 10px;

That wouldn't work.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do you line DIVs up so perfectly like this?

Post by Celauran »

If you want the individual boxes to to also be percentage-based, then you'll need to start using breakpoints and adjust their widths as the page scales down. Using fixed sizes for the boxes will keep them lined up perfectly and allow the flow to update with the page size, but they won't always fill the containing element.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you line DIVs up so perfectly like this?

Post by simonmlewis »

So to do it for a fixed width, I guess one has to calculate the exact pixel width needed, bearing in mind the exact pixels or right margins.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do you line DIVs up so perfectly like this?

Post by Celauran »

No. If the boxes need to be a set width, it can't be made to fill the container perfectly. If your boxes must be 200px wide, and your 75% width containing div ends up being 600px wide, you've got a wide margin and no way around it.
Post Reply