Member Avatar for Borzoi

Is there a way to make the width of the page, or an element within the page only change by a certain amount depending on the width of the screen?

For example, I have a white box with 6 items in. Each item is its own box and has a blue background with a set width. On a small resolution, there is 3 items per line within the white box but on a higher resolution, there may be more. What I want to do is minimise the white space and the best way I can think of is to make it so the white box only expands when the screen width reaches a certain increment of an initial size. For example, it'll expand when the browser is 100px, 200px etc. rather than expand as the browser is adjusted.

Another idea I had was to make it so the white space between each item expands equally (like with text-align: justify; ) but I can't figure out a way to do this either as using that just justifies the text within each item.

Any help will be appreciated.

  • 3 Contributors
  • 4 Replies
  • 119 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Borzoi
Member Avatar for aniyishay

Have you tried percentages for widths? It sounds like you want a Liquid layout, and the elements within to be percentage based.

Member Avatar for Borzoi

I don't want percentage based widths. It's probably best if I show an example. The page I'm working on isn't live but I'll put up a small test page and try to explain what I want when I can.

Member Avatar for Kraai

Borzoi, it will be interesting to see what you want, so yes, best is to put up that test page.

Member Avatar for Borzoi

Here is a quick example.

https://sites.google.com/site/theborzoi/test

What I want is to minimise the (in this case) blue space to the right of the boxes when the gap between one box and the right edge is too small to fit another box. I want to do this by either making the space between each box expand as the page expands (like justified text) until there's enough space to bring a box up a level or just centre all the boxes so that the space increases either side of the boxes rather than just the right but still be able to bring a box up a line when there's enough space.

Am I being clear enough or do you need more detail?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.