I am running into a little problem with setting some the field widths via CSS.

In my opinion, the Topics, Posts, Last Post on the forum view should have static widths, and the user information on the thread view should also have a static width. I guess when the template was original designed they opted to use dynamic widths, which I am all for, however I noticed that using percentages, the widths of those column make the board lopsided in a full screen mode. This becomes very evident on high resolution screens or wide screens.

I am attaching two images to help elaborate what I am talking about.

I reported this as a bug back in April, but it was ruled as not a bug. http://www.phpbb.com/bugs/phpbb3/ticket ... et_id=9559
All I am trying to figure out is how to set those columns to a static width. I have not had much luck, percentages and pixels don’t seem to like each other in CSS. I am hoping that someone else has noticed this and found a solution.

The screenshots you attached have a horizontal resolution of 1920 pixels. Considering there's only so much text one can have on any one row (forum description comfortable fits in one line at around 800 pixel, the topic/post/views fit within 100 pixels each, the last post information another 200-ish pixel), yet you seem surprised that's ~800 pixels worth of "white space"? Short of bumping up the font size, that space isn't going to magically disappear... design CSS driven or tag-soup HTML.

It’s a matter or presentation, and depending on the density of the text, you will always have some white space, the question is where are you going to place it? I think that most people try to balance a web page, spreading the information as equally as possible across the entire page. So either people try to center the contents or they split the continents by left/right justification or full justification. If the width of the page was static then that’s fine, but doesn’t it seems a little odd having a dynamic page and then only using 70% of the space and justifying to the left?

I am using the 1920x1200 as an extreme example, but the effect still starts showing up after 1024x768 marks, albeit not as noticeable until the high resolutions. Ironically the front page of the forum actually can demonstrate better positioning. There are two forum topics that would benefit from the space. I am attaching a photoshopped image elaborating this. I am sure that I can find more examples of this. If one also switches to the original template (subsilver2) it does not have this issue, and in my opinion correctly distributes the information across the page.

I don’t care if it’s changed in the default style; I just want to know how to manipulate the CSS to achieve the affect I am looking for.

MKruer wrote:
It’s a matter or presentation, and depending on the density of the text, you will always have some white space, the question is where are you going to place it? I think that most people try to balance a web page, spreading the information as equally as possible across the entire page. So either people try to center the contents or they split the continents by left/right justification or full justification. If the width of the page was static then that’s fine, but doesn’t it seems a little odd having a dynamic page and then only using 70% of the space and justifying to the left?

I am using the 1920x1200 as an extreme example, but the effect still starts showing up after 1024x768 marks, albeit not as noticeable until the high resolutions. Ironically the front page of the forum actually can demonstrate better positioning. There are two forum topics that would benefit from the space. I am attaching a photoshopped image elaborating this. I am sure that I can find more examples of this. If one also switches to the original template (subsilver2) it does not have this issue, and in my opinion correctly distributes the information across the page.

I don’t care if it’s changed in the default style; I just want to know how to manipulate the CSS to achieve the affect I am looking for.

The problem is that float works with the widths.
If you have a fixed layout, you can apply fixed widths, if you are aiming for a fluid layout, you should use fluid widts.
Combining them will problems, either on small screens, or big screens.

for example:
you have 800 x 600 screen, so your forum is 780px. if you have last post on 150px and topics/replies on 100, that leaves 430px left for your index content is about 55%.
If you have your resolution of 1920 x ##, then you have 1570px for the index content, how ever if you set it to 55% so it also works on 800 screens, you would only use 55% of 1920px, which is about 1050 px. Because the elements are floated 'left', they will stick to this, and leave a 500px gab at the end of your forum.

What you could do to solve this, is float the topics/replies/last post to the right., the order of these fields would then also change, you would then get something like this:

FORUM | 500px gap | LastPost | Topics | Replies
Then you are still stuck with your 500px gap, but that you cannot solve with css.
But I think this solution comes close to what you are trying to achieve, but you still have a gap, due to combination of fluid and fixed size usage, and the order of you lastpost/topics/replies is changed, but you could solve this by changing the order within your html code.

I think I have a possible working solution, Below is the code for the modified elements in the CSS. I am running into one problem that you, or someone reading this might be able to help me out with. Right now when it comes to the wrapping of the text, the elements (dd.posts, dd.topics, dd.views, dd.lastpost) are bumped down a line. Is there a way to force them to keep to the top of the object and not move?

I think I have a possible working solution, Below is the code for the modified elements in the CSS. I am running into one problem that you, or someone reading this might be able to help me out with. Right now when it comes to the wrapping of the text, the elements (dd.posts, dd.topics, dd.views, dd.lastpost) are bumped down a line. Is there a way to force them to keep to the top of the object and not move?

If I would apply a float: right or a float: left to the class="1" element, it will float nicely next to the second element. However if I float the second element to the right or left, it will not move up:

I think this is the case here, and if so, there is not really a fix for it. You could do a margin-top: -##px; to fix it, but since the font is risizable, this will not really help, as you cannot really set a dynamic height.

This works perfectly... except for one issues that I have yet be unable to solve. The problem is the contents of the Topic itself do not wrap until the end of the page. It gets to the first field and then goes under the existing fields, (posts, topics, views, posted by) so it ends up looking like a jumbled mess. Can someone who is smarter then myself in the ways of CSS figure out how to make the text wrap before it gets to the the static width fields. I am trying to not add any tags and just use the existing css items.

I highly recommend this fix for anyone who likes using a full screen providing we can fix the wrapping bug.

I am able to make the columns fixed widths, but unable to right align them (or push them right). Ideally I would like to make the column with the forum topics and descriptions wider and push the Topics, Posts and Last Post columns to the right. I have been adjusting things with the contents.css file and any help with fixing this would be great.

You can see how it is all unbalanced - I just want to shift those 3 small columns to the right. It looks worse still on wide screens.