Themer Themer - 1 year ago 51
jQuery Question

DIV Position Fixed, inner content overlapping

I am creating a sticky header, the parent DIV is Fixed with set Height, I placed a logo within the div, and one DIV for menus. The logo does not fit within the parent container, its overlapping. How can I make it fit with Image Width:100%; so that it only first in parent height. Below is my

<div class="header">
<div class="logo">
<img src="http://img2.thejournal.ie/inline/2305998/original/?width=545&version=2305998">
</div>
<div class="menu">
Home . Services . About
</div>
</div>


Please have a look at this fiddle:
https://jsfiddle.net/fzLq3p2s/

Answer Source

you never set the width or height of the <div class="logo">

https://jsfiddle.net/FllnAngl/fzLq3p2s/2/

fixed:

.logo {
  width:100px;
  height:50px;
  float:left;
  display:inline-block;
}

:)

if you never set the width of the div the image is in, then in the css using

.logo img{
  width:100%;
  height:100%
}

will take the max width and max height of the picture, and not go to the max available height. which should be the max height of the div the image is in. thus you will need to set the div's width and height

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download