Problem with fixed width layouts and percentage based widths
https://www.zyxware.com/sites/default/files/styles/user_image/public/pictures/zyxlogo.png?itok=J9t-ZEoU
BY webmaster
10 years ago
Application-Development
12 comments comment

While designing fixed width layouts it is advantageous to use percentage based width for inner containers in the layout to make it easy for easy scaling up of the layout for other widths. When doing so you should be very careful about setting the actual percentage values. The percentage based width should result in a whole integer as the width. If not, you will end up with fractions as widths of containers leaving the rounding off to the browsers.

Doing so would potentially resulted in unexpected behaviors in some unknown/untested browsers. We came across one such case recently where a 1px thin right border appeared in a container in Opera and Chromium. The border was because of the background color of the parent container coming out because the width of the div was calculated as a rounded value based on the percentages.

There are two potential solutions to the issue. One is to set the absolute size to be something that will not result in fractional sizes for the children given the percentages. The other is to set the size of the child elements to absolute pixel values so that there is no question of round. Chose either based on the amount of work required to make the required changes.


RELATED ARTICLE

/themes/custom/zyxpro_light/images/placeholder.png
close

on 19th February 2010 / by webmaster
While designing fixed width layouts it is advantageous to use percentage based width for inner co Application Development HTML CSS Leave a reply Your email address will not be published. Required fields are marked * canl? tv izle (not verified) access_time 10 Aug 2020 - 16:52 Good work! Your post/article is an excellent example of why I keep comming back to read your excellent quality content that is forever updated. Thank you! This beautiful and informative article, thank you very much. Use this page to your friend told you. I am constantly followed. Pete (not verified) access_time 10 Aug 2020 - 16:52 Thanks for the tip! it was really helpful to my term paper, since I also encountered the same issue, thanks again and kudos! Larah (not verified) access_time 10 Aug 2020 - 16:52 We needed a modern day PT boat but got instead gold plated flaming datums. Buy some Visby Corvettes, and then fire or retire everyone involved with this waste of time and treasure. Mikkie (not verified) access_time 10 Aug 2020 - 16:52 Excellent post.The post is written in very a good manner and it entails many useful information for me. I am happy to find your distinguished way of writing the post. Now you make it easy for me to understand and implement the concept, and Mikkie (not verified) access_time 10 Aug 2020 - 16:52 Excellent post.The post is written in very a good manner and it entails many useful information for me. I am happy to find your distinguished way of writing the post. Now you make it easy for me to understand and implement the concept and Pagination Current page 1 Page 2 Page 3 Next page Next › Last page Last » Add new comment
/themes/custom/zyxpro_light/images/placeholder.png
close

on 26th September 2012 / by webmaster
Although the Drupal core provides all the basic functionality to run a website you need to have additional contrib modules installed to extract the full capabilities of Drupal. Here are 18 essential modules we have come up with for building a simple Drupal site. You might also find our list of the Top Drupal SEO modules and Top Drupal 6 modules to be of help. Contact us to get professional help to build your Drupal website. Drupal Theming and Drupal Migration are just two of the legion of Drupal services we have on offer. Application Development Drupal Technical Drupal Modules Leave a reply Your email address will not be published. Required fields are marked *
Leave a reply
Your email address will not be published. Required fields are marked *

Filtered HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type='1 A I'> <li> <dl> <dt> <dd> <h2 id='jump-*'> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
The content of this field is kept private and will not be shown publicly.
CAPTCHA This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

author-image
canl? tv izle (not verified)
access_time 10 Aug 2020 - 19:09

Good work! Your post/article is an excellent example of why I keep comming back to read your excellent quality content that is forever updated. Thank you!

This beautiful and informative article, thank you very much. Use this page to your friend told you. I am constantly followed.


author-image
Pete (not verified)
access_time 10 Aug 2020 - 19:09

Thanks for the tip! it was really helpful to my term paper, since I also encountered the same issue, thanks again and kudos!


author-image
Larah (not verified)
access_time 10 Aug 2020 - 19:09

We needed a modern day PT boat but got instead gold plated flaming datums. Buy some Visby Corvettes, and then fire or retire everyone involved with this waste of time and treasure.


author-image
Mikkie (not verified)
access_time 10 Aug 2020 - 19:09

Excellent post.The post is written in very a good manner and it entails many useful information for me. I am happy to find your distinguished way of writing the post. Now you make it easy for me to understand and implement the concept, and


author-image
Mikkie (not verified)
access_time 10 Aug 2020 - 19:09

Excellent post.The post is written in very a good manner and it entails many useful information for me. I am happy to find your distinguished way of writing the post. Now you make it easy for me to understand and implement the concept and