CODEWITHSUNDEEP
htmlcss
Mayank Vaid
Mayank Vaid

Reputation: 329

CSS: absolute position and relative position

Hi guys I am a bit noob in CSS and just started designing a website. What's happening is i am trying to put a logo div on my header div with background color blue. Everything is just fine but when i set the position of child div (logo div) the blue color disappear.

style.css

@CHARSET "ISO-8859-1";

#header {
    background-color: blue;
    position: relative;
}

#logo {
    position: absolute;
}

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Insert title here</title>
</head>
<body>
<div id="header" >
    <div id="logo">
        <img src="images/logo.jpg">
    </div>
</div>
</body>
</html>

Upvotes: 1

Views: 96

Answers (4)

Mohan Goud
Mohan Goud

Reputation: 27

The thing is you did not mention any height for the header div and when I tried your code by removing the logo div also I have not seen any blue color, Then I realized the height is not mentioned.

 height: Xpx;/* This works */

Upvotes: 0

L777
L777

Reputation: 8497

When you changed the pic position to absolute it jumped out of the header, then your div area became equal to zero. So now you need to set a size for it.

body{
  width:100%;
  height:100%;
  margin: 0px;
}

#header {
  background:skyblue;
  position: relative;
  width:100%;
  height:190px;
  text-align:center;
}

#logo {
  position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Insert title here</title>
</head>
<body>
<div id="header">
<div id="logo">
<img src="http://i.imgur.com/Goy7oBy.gif" style="max-height:190px">
</div>
<h2 style="font-family:arial,sans-serif;color:white;line-height:190px;margin:0px">TITLE</h2>
</div>
</body>
</html>

Upvotes: 4

ONE_FE
ONE_FE

Reputation: 1006

Set the width and height of the #header

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1"><title>Insert title here</title>
<style type = "text/css">
#header {
background-color: blue;
position: relative;
width: 400px;
height: 500px;
}

#logo {
text-align: center;
}
</style>
</head>
<body>
<div id="header" >
    <div id="logo">
        <img src="me.png">
    </div>
</div>
</body>
</html>

Upvotes: 0

Pavel Reznikov
Pavel Reznikov

Reputation: 3208

You need to set height of your header. This is because absolute div is kind of "outside" of the header therefor header's height is became 0.

Upvotes: 1

Related Questions