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.
How do you line DIVs up so perfectly like this?
Moderator: General Moderators
-
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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: How do you line DIVs up so perfectly like this?
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?
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?
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.
All the best from the United Kingdom.
Re: How do you line DIVs up so perfectly like this?
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?
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.
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.
All the best from the United Kingdom.
Re: How do you line DIVs up so perfectly like this?
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?
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.
All the best from the United Kingdom.
Re: How do you line DIVs up so perfectly like this?
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.