Image
– 
Code –
<html>
<header>
<style>
body {
margin: 0px 0px 0px 0px;
font-family: Arial, Helvetica, sans-serif;
background-image:url('http://www.wallpaperpimper.com/wallpaper/Landscape/Plants/Leaf-In-Front-Of-Blur-1-1600x1200.jpg');
background-attachment: fixed;
background-size:cover;
}
p {
color:#fff;
}
#navi {
position: fixed;
top: 0;
left: 0;
z-index: 99;
height: 25px;
font-size: 15px;
width: 100%;
z-index: 1000;
background-color:#505050;
padding-top:3px;
padding-left:2px;
}
#wrapper {
width:100%;
height:100%;
}
#header {
Width:76%;
height:20%;
background-color: #303030 ;
margin-top:3%;
margin-left:12%;
background-image:url('http://www.browsewallpapers.com/files/winter-landscape-landscape-7452.jpg');
background-size:cover;
text-align: right;
}
#content {
Width:50.5%;
Height:100%;
background-color: #303030 ;
margin-left:12%;
margin-top:0.5%;
float:left;
opacity:0.8;
}
#sidecontent {
float:right;
background-color: #303030 ;
width:25%;
height:40%;
margin-right:12%;
margin-top:0.5%;
opacity:0.8;
}
</style>
</header>
<body>
<div id="navi">
<p> HELLO </p>
</div>
<div id="wrapper">
<div id="header">
<p>Daily call</p>
</div>
<div id="content">
<p> THIS IS DOG</p>
</div>
<div id="sidecontent">
<p>no this is This is patrick</P>
</div>
</div>
</body>
</html>
Everything works fine in opera, chrome and firefox push the text down and ie resizes the header.
any idea how to fix this?
huh, you need to rewrite all your code 🙂
if you want to center your content block just set width and margin auto. example:
than put inside wrapper header div, than set header width to 100%.