Fluid with logo over another image

Posted on 2012-12-20
Last Modified: 2013-01-29
I'll be placing an image where the header currently is here and wanted the logo to still be positioned absolutely over it where it is now to the left, but to reduce with height:auto at fluid widths.

How would be the best way to do it? Do I need to give the image container a % width?  The middle banner is fluid, but for some reason I can't get the logo to reduce fluidly..

If someone could maybe check in an inspector? Any help appreciated.
Question by:UName10
  • 4
  • 2
LVL 53

Expert Comment

ID: 38711327
You might want to start by validating the code and correcting the errors.  Several of the errors are serious including a duplicate id declaration and an unclosed tag.


Author Comment

ID: 38757042
Sorry for the late reply and thanks for the comment.

Could you point me to them?
LVL 53

Expert Comment

ID: 38759984
Go to to validate the HTML, then run the CSS through the validator at

Once the error are corrected, the problems will become manageable, or may be gone.  With correct code we will be able to apply whatever properties we need to correct anything that is still wrong.

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.


Author Comment

ID: 38813997
Hi there,

Sorry for the delay; managed to fix it and yeah there were quite a few - I save the test template instead which was messy code, thanks for pointing it out.

I've actually changed it now so it's redundant, but thank you for taking the time to have a look, much appreciated.

Accepted Solution

UName10 earned 0 total points
ID: 38814002
Oh but the way to do it just make the logo width a percentage based on the parent div as normal, and set the height to auto again.  I hasn't set the width which is why it didn't work.

Author Closing Comment

ID: 38830283
It works.

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article discusses how to create an extensible mechanism for linked drop downs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question