Jump to content

Branding Integrated Into Layout

Recommended Posts


Hi there,

I have a layout design (created by my wife) that integrates the branding image into the design of the page, such that the branding image looks like the top of a border that goes around the entire content area.


I achieve the look by using a border background image around the div.fullwidth.fix container. I also canceled out the padding so that the elements rest right on top of each other. Then I uploaded a header logo that fit right on top of the content area to complete the look.  See here (note the colors are off as we redo the design slightly)




Here's my problem. When you shrink the size of the window, the header image shrinks at a different rate (the margins on the side are slightly different) and it ends up with a white gap below it. Is it possible to make the margins on the side of the branding image the same as that of the div.fullwidth.fix container and to make the image sit on the bottom of the header to avoid the white space underneath?



Share this post

Link to post
Share on other sites

If some element is 1000px wide by 500px high and it's re-sized by half, it will be 500x250. But, if you have a different element on the same site that's 847x303, when re-sized by half, there's going to be a discrepancy in size because the proportions have to adjust.  Browsers won't show 423.5 x 151.5 pixels, so they'll adjust to 424x152.  That little difference can throw an alignment of elements out of proportion. Since the elements are not aligned correctly, odd things like empty spaces show up.


When designing the graphics, proportions must be considered so that when scaled, each element remains in the same scale or proportional size. The margins, padding and other components can make things scale out of general proportion as well.

Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now