I am recently new to CSS and HTML and I have a problem while allocating my block under the header:

![enter image description here](https://i.stack.imgur.com/3B9VR.png)

I have tried several solutions but I have not succeed. I would appreciate if you could give me a hint with it. Thanks

```
<!  DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title goes here</title>
  <meta name="description" content="Description of your site goes here">
  <meta name="keywords" content="keyword1, keyword2, keyword3">
  <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="page">
    <div class="header" >
    <h1>  
        <img src="images/img1.jpg" width="250" height="190" float="right" />  
        <p> SOME TEXT HERE </p>
    </h1>
    </div>
    <div class="topmenu">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="#">About&nbsp;Us</a></li>
            <li><a href="#">What's&nbsp;New</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Resources</a></li>
            <li><a href="#">Links</a></li>
        </ul>
    </div>
</body>
</html>

```

And my CSS CODE: 

```
body {
    font-family: sans-serif,Arial;
    font-size: 12px;
    color: #000000;
    margin: 0px;
    background-color:#d9d7d7;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, input, textarea {
    padding: 0px;
    margin: 0px;
    color: black;
}
a {
    color: #072FCF;
    text-decoration: underline;
}
a:hover {
    color: #072FCF;
    text-decoration: none;
}
.main-out {
    background-image: url(../images/trans.png);
    background-position: center top;
    width: 100%;
    float: left;
}
.main {
    width: 1000px;
    margin: 0px auto;
}
.page {
    width: 1000px;
    float: left;
    padding: 42px 0px 0px 0px;
    position: center;
}   
.header {
    position:absolute; 
    top:42px; 
    margin-left:-500px; 
    left:50%;
    width: 1000px;
    height: 200px;
    background-color: white;
    border-style: solid solid none solid;
    border-width: thick;    
}
.header h1{
    display: inline;
    text-align: left;
    font-family: cursive;
    font-size: 45px;
    color: black;

}
.header img {
    display: block;
    float: left;
}
.header p {
    line-height: 190px; /* Here is the trick... line-height = image height */
}
.topmenu {
    position:absolute;
    background-color: black;
    width: 1000px;
    height: 37px;
    border: 1px solid #000000;
}
.topmenu ul {
    width: 100%;
    height: 37px;
    list-style-type: none;
}
.topmenu ul li {
    height: 37px;
    float: left;
    padding-right: 24px;
    padding-left: 24px;
}
.topmenu ul li a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 37px;
    color: #FFFFFF;
    text-decoration: none;
    display: block;
    height: 37px;
    float: left;
    padding-right: 21px;
    padding-left: 21px;
}
.topmenu ul li a:hover {
    background-image: url(../images/menu-hov.jpg);
    background-repeat: repeat-x;
    background-position: left top;
}

```

Thanks