Full percentage values can break your layout

This tutorial explains how you can make columns fill the browser's window using CSS - it works in all browsers.

Imagine you have two columns and are going to stretch the columns to fill the browser’s window. Simply assigning 50% width to each column wouldn’t stretch the columns perfectly to fill the browser’s window because the sum of 50% + 50% is not always 100% in all browsers. In fact the actual value can be 101% and it causes layout to break in those browsers.

Here is how IE6 renders those columns:IE6 rendering

To avoid this problem in IE and other browsers, simply assign 49% and 50% width to each column so they will be displayed correctly in all browsers:

firefox rendering

15 comments

  1. Ute Zubrzycki - June 9, 2012 2:19 am

    great post, very informative. I wonder why the other specialists of this sector don’t notice this. You should continue your writing. I am sure, you’ve a great readers’ base already!

    Reply
  2. Weight Loss - June 11, 2012 3:54 pm

    Very interesting subject, thanks for posting.

    Reply
  3. IT Hosting - June 11, 2012 6:00 pm

    Hi, Neat post. There’s a problem along with your website in internet explorer, might test this… IE still is the market leader and a big element of people will pass over your excellent writing due to this problem.

    Reply
  4. Marcy Speights - June 12, 2012 8:09 pm

    I was reading through some of your blog posts on this internet site and I think this web site is real instructive! Retain posting.

    Reply
  5. Blair - June 13, 2012 4:08 am

    This is very interesting, You’re a very skilled blogger. I have joined your feed and look forward to seeking more of your fantastic post. Also, I’ve shared your web site in my social networks!

    Reply
  6. Forest Ertelt - June 13, 2012 10:15 am

    Get the Points

    Reply
  7. Sklep z ogrodzeniami z plastiku - June 13, 2012 6:38 pm

    Hey, buddy, I’ve not discovered the best way to subscribe

    Reply
  8. forum seat - June 13, 2012 6:39 pm

    Heya i’m for the first time here. I came across this board and I find It truly useful & it helped me out much. I hope to give something back and help others like you aided me.

    Reply
  9. CHERISE KLYM - June 13, 2012 9:55 pm

    Good post. I be taught something tougher on different blogs everyday. It can all the time be stimulating to read content material from other writers and practice a bit of one thing from their store. I’d prefer to make use of some with the content on my blog whether you don’t mind. Natually I’ll give you a hyperlink in your web blog. Thanks for sharing.

    Reply
  10. Haskovo.info - June 14, 2012 4:37 am

    Hello my loved one! I want to say that this post is awesome, great written and include approximately all significant infos. I’d like to peer more posts like this.

    Reply
  11. Themes opencart - June 14, 2012 5:47 am

    Only a smiling visitor here to share the love (:, btw outstanding layout.

    Reply
  12. Britney - August 20, 2012 9:36 am

    Thank you a bunch for sharing this with all people you really
    recognize what you are talking approximately! Bookmarked.
    Kindly additionally discuss with my web site =.
    We will have a link alternate contract among us!

    Reply
  13. Maxie - August 28, 2012 8:39 pm

    Ι ωаs reсоmmended this
    blog by mеаns of mу cousin.
    I’m not positive whether or not this submit is written by him as no one else recognize such certain approximately my trouble. You’re amazing!
    Τhаnk you!

    Reply
  14. Arlie - August 29, 2012 5:59 am

    Heyа i’m for the first time here. I found this board and I find It truly useful & it helped me out much. I’m hoping to giνе something again аnd help
    otherѕ lіke you aideԁ me.

    Reply
  15. dauerhaft abnehmen ohne diät - September 4, 2012 12:01 pm

    I’ve recently started а websіte, the info yοu provіde on this webѕite haѕ
    hеlped me greatly. Thankѕ foг all of yοur time & worκ.

    Reply

Have your say