Hi I have a couple of doubts about making my entire layout liquid. I made my wrapper and all the elements inside of it liquid (giving them percentages instead of px’ or em’s), including my left-side Nav bar. I followed the examples in the CSS Mastery book, written by Andy Budd, although I’ve read in articles that you shouldn’t make your left-nav liquid, but rather fixed. Does anyone know if this is indeed a good practice in reality or if it might cause me trouble. Thank you.
If someone is using a widescreen and/or large monitor, things may get stretched out further than you’d like.
In that case, max-width or keeping the nav area fixed may be necessary.
There’s nothing wrong with using % based width at all, but as Force Flow pointed out it’s worth testing on as many different devices as possible or restricting maximum width.
If the sidebar gets too wide on some screen resolutions you could always experiment with things like aligning text links to the right, instead of left.
If you have constraints on the overall page size (ie max-width and min-width) then a sidebar that scales with the page can work well. If you don’t have a min-width on the page, you should certainly think about applying one to the sidebar, or else it might get too narrow to fit more than a few characters in.
On the other hand, most sites - even those that do have a liquid or fluid page size - do stick with a fixed width for the main sidebar. This is primarily because it’s usually pretty narrow to start with, so many designers will set it to be a width that works well at typical font sizes, given the length of text in the labels (ie, you will very often want to ensure that each item appears on a single line rather than wrapping - it’s easier to get that to happen for most people with a fixed width sidebar).
Hi thank you. I have added mix-width of 125em. Now my screen resolution is of 1366 x 768. In my screen seems fine. I’m working on making it nicer when smaller, but overall looks fine. Should I worried about higher screen resolutions?
Thanks.