Page 1 of 1
How do you line DIVs up so perfectly like this?
Posted: Tue Jan 13, 2015 4:14 am
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.
Re: How do you line DIVs up so perfectly like this?
Posted: Tue Jan 13, 2015 6:04 am
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.
Re: How do you line DIVs up so perfectly like this?
Posted: Tue Jan 13, 2015 6:07 am
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?
Re: How do you line DIVs up so perfectly like this?
Posted: Tue Jan 13, 2015 6:30 am
by Celauran
Set the container to a percentage width and float the boxes inside it.
Re: How do you line DIVs up so perfectly like this?
Posted: Tue Jan 13, 2015 7:05 am
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.
Re: How do you line DIVs up so perfectly like this?
Posted: Tue Jan 13, 2015 7:15 am
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.
Re: How do you line DIVs up so perfectly like this?
Posted: Tue Jan 13, 2015 7:18 am
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.
Re: How do you line DIVs up so perfectly like this?
Posted: Tue Jan 13, 2015 7:22 am
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.