Responsive header Options

[Legless]

Hello,

For the first time in many years, I have to write some html/css code - and ohhhh how the web has moved on....

I have to make a header for a forum which is 1000px wide and centered in the middle of the page.
It has a logo to the left and a banner to the right and then some links underneath.

It also should be responsive - but I can't even get the first part done. (i.e. floating the banner to the right.)

Here is what I have so far...

CODE

#myWrap { width: 1000px; margin: 0 auto;  padding-top: 12px; border: solid 1px #ff0000;}
#forumLogo {display: inline-block; float: left; }
#forumBanner {display:  float: right; width: 500px;}

#forumMenu {margin: 10px 0; text-align:center;}
.forumMenu li {display: inline; }
.forumMenu li a{display: inline-block;}

.clearfix { style="clear: both;"}

CODE

<div id="myWrap">

<div id="forumLogo">
LOGO
</div>

<div id=forumBanner">
BANNER
</div>

<div class="clearfix;"></div>

<div id="forumMenu">
<ul class="forumMenu">
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
</div>

</div>

Would it be possible for someone to give me some pointers here? I am stuck!

Thanks.

This post has been edited by Legless: Feb 23 2017, 11:22 AM