View Full Version : layout based on percentages

09-13-2011, 08:20 PM
I have a simple layout but it needs to be altered to work so it takes on a liquid layout capability.


What I need to do is have my time slots be spaced out evenly based on a percentage. My overall width of the design is 1010px. I have my prev button set to float left and my next button floating right. Then for my slots div I have it set to a fixed left margin of 159px from the left floating previous button. the starting position of slots is represented by a white dotted line before the 7:00pm text. Then all my li elements are floated left inside the slots div. These need to expand according to percentages. I wanted to set a specific width which was say 80 px which is represented by the blue in the example. Then the yellow represents the margins left and right to allow for the spacing. This is where I'm lost how to work out the percentage of spacing needed between the li elements so it spaces out correctly when you scale your browser.

I was taking the value between the 2 dotted white lines as my overall width of the slots. 657px based on the design so do I try and work out my margin percent based on that value or the total value of the design which is 1010px. Then do I divide it by the number of li elements inside the slots div.

I haven't really dealt with percentage based layout before so any help would be great. For now this is just placement so I don't want to use JS for placement.

Just to be clear This page does not have a fixed width. I'm just using the design width to come up with my percentages. The entire page and all elements have to be liquid and adjust according to the window size.