CODEWITHSUNDEEP
jquerycsscss-float
Themer
Themer

Reputation: 185

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/

Upvotes: 1

Views: 228

Answers (1)

FllnAngl
FllnAngl

Reputation: 576

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

Upvotes: 1

Related Questions