Skip navigation

The Battle Between Image Width and Column Width

One of the more common complaints and problems for new WordPress users is the issue of their images breaking their WordPress Theme. The Theme they choose is wonderful, reflective of their personality and blog, and the moment they upload their first photograph, it seems to break their blog.

Web Design Sidebar pushes out over the content areaHave you ever tried to shove a square peg into a round hole? Or squeeze into a size 2 dress when you really should be wearing a 22? The results are what happens to web page designs when someone tries to cram something too big into a small space.

All web pages today feature at least two “columns”, two side-by-side sections to display their content. One is typically called the sidebar and the other is the content or main column or something similar. Each of these columns are known as containers, as they contain content and design elements within their borders. When something goes into these containers that exceeds their inherent width, they tend to stretch and break the design.

Put something wider than the width of the sidebar into the sidebar and it stretches to accommodate it. Since it’s literally pushed beyond its seam, it shoves the content section down to the bottom of the page. Put something wider than the width of the content section into the content section, and it shoves the sidebar around. If what you include in any container on your web page is wider than the designated width, something has got to give and it is usually your web page layout and structure.

The key is to only put things that are the maximum width into these columns (containers) so they won’t stretch and bork your web page design.

The problem is that most people using WordPress Themes are not the ones who designed them. They don’t understand things like maximum width or the pushing and shoving around of a web page design with extra wide content. They just want to put pretty pictures in their posts and freak out when the web page design breaks.

So the web designers need to take this ignorance into account when they design their WordPress Themes for the public. Andy Skelton came up with “Defective Themes: Image Width” to help you fix things so everyone is happy and the number of WordPress Support Forum requests for borked WordPress Themes goes down.

This article is aimed at WordPress theme designers. “Aimed” because there is a gun to your head. “Designers” because the issue relates to the specifications that all themes should follow. So take off your Artist hat, put on your Designer helmet and get ready to dodge bullets.

Activate a theme you made. Publish an entry with an image that is too wide for the post column. About 800px should do it for most themes. Now load up Internet Explorer 6. If it’s not a fixed-width theme, resize your browser window to 800×600. If your theme breaks in IE6 you just got your head blown off. Now regrow your head and repeat for every theme you’ve published.

If your themes passed this test, congratulations! You obviously don’t need to be reminded about overflow; carry on.

…What is overflow? Overflow is when a container is too small for its contents. Either the container expands or the contents won’t be contained. The default “physics” of web pages (the box model) dictates that the container expands. You can change the default. I’ll show you how.

Thank you for reminding us, Andy, that designing WordPress Themes for public use means protecting our future users from themselves because they can’t. Excellent work.

For reference, the CSS styles for the stylesheet.css in your WordPress blog should include:

p img {
    padding: 0;
    max-width: 100%;
}
#header, #content, #footer, .widget {
    overflow: hidden;
}

Related Articles



Site Search Tags: , , , , , , , , , , , , , , , ,

Feed on Lorelle on WordPress Subscribe Feedburner iconVia Feedburner Subscribe by Email Visit
Copyright Lorelle VanFossen, the author of Blogging Tips, What Bloggers Won't Tell You About Blogging.

18 Comments

  1. Posted October 7, 2006 at 5:36 am | Permalink

    .. nice catch.

    I’ve gone and checked my one-and-only released theme and the images ‘overlap’ the sidebar. I’ll consider the back of my head well slapped and will have to fix it at some point

  2. Posted October 7, 2006 at 7:14 pm | Permalink

    A great post. I’ve tried about 25 different themes over the past year and exactly _one_ has handled oversize images correctly.

    While I know there are programming tricks that can make up for this, a simple, easy to find note … you know just text that people can read — telling the max size image would save untold amounts of head scratching.

    The other thing that contributes to the problem is the difference between those who use FireFox as a preference and those who have made it a religious campaign. I use FF myself, I love it. But there are many, many folks who won’t (or even can’t change … many government sites and some corporations simply will not allow any browser except MSIE … so if you want to do the work to contribute … make it work with both.

  3. Posted November 7, 2006 at 11:48 am | Permalink

    One of the other considerations that most designers fail to consider is text resizing. Here’s a challenge: load your theme/design in any mozilla browser (Netscape, FF or Mozilla) and push the text size (zoom) up a couple of notches and see whether or not your theme breaks. In my random testing, I’d say about 95% of all designs fail …. disasterously. One of the reasons to be concerned with this is that, as the W3C suggests, we are attempting to create accessible webpages … and for the visually impaired, you can BET that they have their default set to something other than 100%.

  4. Posted November 7, 2006 at 2:04 pm | Permalink

    Which is why all my blog designs are within the 5%. ;-)

    Go on. Zoom the font size to whatever you need. It will withstand just about anything.

    Excellent point!

  5. Duade
    Posted May 26, 2007 at 4:19 pm | Permalink

    You can download the plugin: iMax Width. This plugin for WordPress sets a maximum image width so large inline images don’t mess up your wordpress theme. It also adds height and width params to all IMG tags in a posts so the pages load more smoothly.

    I have installed it and it works fine. Works when you upload the photo so if you have any existing images that are too wide you will have to delete and upload.

  6. Posted April 8, 2008 at 2:46 pm | Permalink

    the imax width solved my issues :)

  7. Posted August 11, 2008 at 4:49 pm | Permalink

    Has anyone gotten iMax Width plugin to work with 2.6? TIA

  8. Posted August 12, 2008 at 10:45 am | Permalink

    @ piku:

    You will need to ask this question on the Plugin author’s page so others familiar with the Plugin can respond, or on the WordPress Support Forum. Or contact the Plugin author directly. Thanks.

  9. Posted September 12, 2008 at 6:20 pm | Permalink

    Biggest problem I find, is not being familiar enough with the underpinnings of the blog themes to find the sections that detail the parameters.

  10. Posted September 12, 2008 at 9:21 pm | Permalink

    @ DeBorah Beatty:

    See Finding Your CSS Styles in WordPress for helps on that.

  11. Posted September 29, 2009 at 1:10 am | Permalink

    Great help, thanks :). Now my sidebar is safe. Only the heighth doesn’t change with the width, so now my images are deformed. Does anyone know some code that will adjust the image heighth according to its width? Thank you!

    • Posted September 29, 2009 at 1:37 pm | Permalink

      You need to set the height, and the width, of the images in the image HTML tag. That will resolve that issue.

  12. Posted October 3, 2009 at 5:46 am | Permalink

    Thank you Lorelle. Now do you mean i have to adjust every image seperately, or can i do something that will resize ANY image to fit the posts section (=not overlap the sidebar) while respecting the image’s original width and height? I’ve just found my way to WordPress and am learning by the day… Your blog is a great help! :)

    • Posted October 3, 2009 at 10:35 pm | Permalink

      Depends upon what you are doing. If you are putting in a single image forever, size it on both height and width. If you are changing the images constantly, then have it set to max-width and make sure you don’t choose any images that are too long to include in the sidebar. The width can be set manually or through the CSS, as explained in th article. If the images are appearing distorted, you’re doing something wrong with the size, so set a max-width in the CSS and do not set the height and the images will take care of themselves.

  13. Posted October 5, 2009 at 4:32 am | Permalink

    Hi Lorelle, thanks for your support. I did as you told me to but the images remained distorted at first. I have now found the solution: set the height to ‘auto’, like this:

    p img {
    padding: 0;
    max-width: 100%;
    height: auto;
    }
    #header, #content, #footer, .widget {
    overflow: hidden;
    }

  14. Posted December 20, 2009 at 8:54 pm | Permalink

    Hello. I’ve tried the coding above.
    However the image is still distorted cause the height value remain unchanged (so I need to change it manually by using HTML view)

    Any idea to help me solve the issue.

    • Posted December 21, 2009 at 6:59 pm | Permalink

      You cannot change the width without changing the height. There are discussions on that subject within the comments, if memory servers. Since I do not know how you used the code, nor if you are using WordPress, it’s hard to give you an answer.


16 Trackbacks/Pingbacks

  1. [...] I read Lorelle’s reminder on the joys of oversized element content.. time pas.. oh noes.. [...]

  2. [...] The second problem- where the sidebar moves to the bottom- typically is only seen by the 90% of people who still aren’t using Firefox. Microsoft Internet Explorer doesn’t understand some of the fundamental code to CSS (still)- and you must test by looking at your site using IE 6 on a PC. The simple solution- use Thumbnails- and never have images wider than about 400 pixels. However if you want to read all the details of this problem- Lorelle has a ton of good links – look at the excerpt of her post- then continue on to the link: Lorelle on WordPress One of the more common complaints and problems for new WordPress users is the issue of their images breaking their WordPress Theme. The Theme they choose is wonderful, reflective of their personality and blog, and the moment they upload their first photograph, it seems to break their blog.Web Design Sidebar pushes out over the content areaHave you ever tried to shove a square peg into a round hole? Or squeeze into a size 2 dress when you really should be wearing a 22? The results are what happens to web page designs when someone tries to cram something too big into a small space. [...]

  3. [...] The Battle Between Image Width and Column Width [...]

  4. [...] but was unable to fix the browser problem, then I went onto Lorelle VanFossen’s Blog post The Battle Between Image Width and Column Width. According to Lorelle, when a post has items such as banners or pictures that are too large for the [...]

  5. [...] The Battle Between Image Width and Column Width [...]

  6. [...] The Battle Between Image Width and Column Width [...]

  7. [...] The Battle Between Image Width and Column Width « Lorelle on WordPress [...]

  8. [...] Width WordPress Plugin sets a maximum image width so large inline images won’t destroy your WordPress Theme layout and design. It adds height and width parameters to all IMG tags so the pages will load faster and conserves [...]

  9. […] The Battle Between Image Width and Column Width […]

  10. […] The Battle Between Image Width and Column Width […]

  11. […] The Battle Between Image Width and Column Width […]

  12. […] The Battle Between Image Width and Column Width […]

  13. […] The Battle Between Image Width and Column Width […]

  14. […] The Battle Between Image Width and Column Width […]

  15. […] The Battle Between Image Width and Column Width […]

  16. […] the graphic image you want to add is wider than your WordPress Theme column width. The WordPress Image panel allows you to add images as full-size or thumbnails, which when clicked, […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 20,971 other followers

%d bloggers like this: