PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Tue Sep 29, 2020 3:15 pm

All times are UTC - 5 hours




Post new topic Reply to topic  [ 8 posts ] 
Author Message
PostPosted: Tue Jan 13, 2015 5:14 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom

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.


Top
 Profile  
 
PostPosted: Tue Jan 13, 2015 7:04 am 
Offline
Moderator
User avatar

Joined: Mon Nov 03, 2003 7:13 pm
Posts: 5978
Location: Odessa, Ukraine
They do it with javascript (see ResizePromoBox function in dynamicproductlisting.js file). You could do it with pure css and media queries though.


Top
 Profile  
 
PostPosted: Tue Jan 13, 2015 7:07 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Tue Jan 13, 2015 7:30 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
Set the container to a percentage width and float the boxes inside it.

_________________


Top
 Profile  
 
PostPosted: Tue Jan 13, 2015 8:05 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Tue Jan 13, 2015 8:15 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
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.

_________________


Top
 Profile  
 
PostPosted: Tue Jan 13, 2015 8:18 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Tue Jan 13, 2015 8:22 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
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.

_________________


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 8 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 7 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group