Converting From Frames to CSS and Div Tags

I am trying to convert from using frames to using CSS and Div Tags. I am having problems with my graphics not displaying correctly in my banner Div. There is a large gap where a repeat is not working.

Here is what I tried to do with a Div tag it isn't working:

<Div id=banner style="margin: 0; background: url(/Web_Dev_Pro/images/v8/banner_middle_bg.jpg) repeat-x;">
 <map name=banner_map>
  <area coords="45,20,240,50" href="home link">
 <img src=/Web_Dev_Pro/images/v8/login-top-graphic.jpg align=left hspace=0 width=195 height=60>
 <img src=/Web_Dev_Pro/images/v8/banner_left.jpg align=left hspace=0>
 <img src=/Web_Dev_Pro/images/v8/banner_right.jpg align=right hspace=0 border=0 usemap=#banner_map>

What is the correct CSS and Div code to fix this?

Here is the old Frame:
<frameset border=0 rows="0,60,*">
  <FRAME src="blank.html" name="HiddenScreen" noresize scrolling=no>
  <frame scrolling=no name="MainFrame" src="banner.htm"> 
  <frameset cols="151,*">
  <frameset rows=102,*">
    <frame name="navframe" scrolling=no src="top_left.htm">
    <frame name="menuframe" src="left.htm">
  <frame name="details" src="login.htm" noresize>
Here is the banner htm:
<body style="margin: 0; background: url(banner_middle_bg.jpg) repeat-x;">
 <map name=banner_map>
  <area coords="45,20,240,50" href="home link">
 <img src=login-top-graphic.jpg align=left hspace=0 width=195 height=60>
 <img src=banner_left.jpg align=left hspace=0>
 <img src=banner_right.jpg align=right hspace=0 border=0 usemap=#banner_map><br> 

Open in new window

Who is Participating?
David S.Connect With a Mentor Commented:
I'm glad you're trying to stop using frames. However, I recommend you take the opportunity to start writing strict markup.  The align, hspace, and border attributes are obsolete. CSS should be used instead. Also you should use quotes around the values of all attributes.

align=left works like float:left, so since floated elements are removed from the normal document flow, the height of #banner is collapsing to 0. A quick and dirty fix would be to give #banner overflow:hidden
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.