I'm trying to create this site with a solid black top bar the extends from the left img all the way to the right of the screen, then add some text on top of the horizontal block. I created the block just find but when I went to add text on top of it, it extended the block down under the text and to the rest of the screen to the right. What I want is the the text to be aligned 50% left right of the black bar and 50% vertical of the black bar. Which is why I tried wrapping my divs the way they are. The image is w=200, h=266, here is my html and css.
CSS
body { background-color:#5E5858; margin:0px }
#topbar div
{
display: block;
position:relative;
left:200px;
position:absolute;
top:0px;
width:100%;
height:266px;
background:black;
}
#heading div
{
position:relative;
color:green;
top:50%;
right:50%;
}
html
<!DOCTYPE html>
<html>
<head>
<title>Test Site</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style="text/css" />
</title>
</head>
<body>
<img src='assets/pic.jpg' />
<div id='topbar'>
<div id='1'>
<div id='heading'>
<div id='1'>Welcome to</div>
</div></div></div>
</body>
</html
>