danhodge Posted February 15, 2011 Report Share Posted February 15, 2011 After asking a few other people, on here, and others, i have realized that the kind of websites i end up making always end up not fitting any monitor except mine... So i was wondering, if i work in percentages the whole way through the coding process, will it just pick up on the monitor size and take a percentage of that? The only issue that creates is that someone with a significantly smaller screen will have overlapping images if they are inserted... Thanks a lot, Danny Quote Link to comment Share on other sites More sharing options...
joecool Posted February 15, 2011 Report Share Posted February 15, 2011 (edited) I could be totally off base here because as everyone here know I am just learning, however... It strikes me that the best thing to do is yes, work with percentages to some degree, but also set a minimum width so that you will not have that overlapping issue. Edited February 15, 2011 by joecool Quote Link to comment Share on other sites More sharing options...
Wickham Posted February 15, 2011 Report Share Posted February 15, 2011 You can use % widths for every element including % for side margins and side padding, totalling 100%. Unfortunately borders can't be sized in % so leave them in px and make the total of other items 97% or 98%. Code image widths in % <img style="width: 25%;" src="image.jpg" alt="Image 1" /> If the image height isn't stated it will adjust in proportion. If you try to combine % with min-width and max-width you will have a lot of trouble. Everything has to be % (except borders). It's difficult to get it right for complicated pages as a small window 320px wide will squash everything up and a 1920px window will space it all out too wide. Most people stick to min-width and max-width for a page container with margin: 0 auto to center it in larger window widths. At least one of the elements inside the page container should have no width stated so that its width is fluid. Quote Link to comment Share on other sites More sharing options...
danhodge Posted February 15, 2011 Author Report Share Posted February 15, 2011 Ahh, thanks for both replies And i have: margin-left: auto; margin-right: auto; Will this have the same effect? Admittedly, i was told about this without asking any questions, so i wasn't sure of its use... Could you please go into more detail into the effect this has on the site? Quote Link to comment Share on other sites More sharing options...
BeeDev Posted February 16, 2011 Report Share Posted February 16, 2011 (edited) left and right margins set to auto will simply center the element within it's container. Say an element was 500px wide and auto left and right margins, and its container is 1000px. Then the element with 500px width will have 250px margin on both left and right sides. Margins and Paddings only work on block elements, and block elements stretch to full width of its container unless it's floated (in which case auto-margins won't have any effect) or has a specific width set (px, em or even %). So auto-margins have nothing to do with fluid width websites (%width). Edited February 16, 2011 by BeeDev Quote Link to comment Share on other sites More sharing options...
danhodge Posted February 17, 2011 Author Report Share Posted February 17, 2011 Ahh okay, thank you Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.