Images inside div tags appear broken

Similar Questions

• How to center an image inside a tag div CSS using dreamweaver?

  I know that this may seem like a very stupid to ask question, as it should seem so simple, but how do I do this? I can't be able to center an image inside a div. Here's the code I came up with this day. Thanks in advance for your help.

  < / style >

  < / head >

  < body >

  < div id = "PageContainer" >

  < div id = "PageHeader" > img.centered {display: block; margin-left: auto; margin-right: auto ;} < img src = "Untitled - 5.jpg" alt = "rowland" class = "Center" / > < / div >}

  < div id = "PageMenu" > content for id "PageHeader" goes here < / div >

  < div id = "PageBody" > content for id "PageHeader" goes here < / div >

  < div id = "PageFooter" > content for id "PageHeader" goes here < / div >

  < / body >

  < / html >

  Alternatively, you can ignore the other div tags after the first div id. The first div id who has my link to the image is that I'm trying to get Center my image. The picture is there but does not balance.

  Centering of Pages, Images and other elements with CSS:

  http://cookbooks.Adobe.com/post_Centering_web_pages_and_other_elements_with_CSS-16640.html

  Nancy O.

• Banner rotation 2 - How do you add links to images with div tags?

  I have a banner rotating images and need to add links to each image. I used jQuery Simple of Jon Raasch slideshow, suggested here.

  When asked how to add links to each image, he wrote "a more robust solution is to wrap each image in a div and target the div instead of the images (or anchor points). This would allow you to add text, images, etc. »

  Here is my code. Can someone show me how to wrap the images in the div tags and add a placeholder url as "index.html?

  ------------------------------

  < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""
  " < html xmlns =" http://www.w3.org/1999/xhtml ">
  < content meta = text/html"; charset = iso-8859-1 "http-equiv ="Content-Type"/ >"

  
  "< script type =" text/javascript"src ="... / jquery-simple-slideshow-example/jquery-1.2.6.min.js "> < / script >"

  < script type = "text/javascript" >

  
  function slideSwitch() {}
  var $active = $("#slideshow IMG.active");

  If ($active.length == 0) $active = $("#slideshow IMG:last");

  This allows to take images in their order of appearance in the tag
  var $next = $active.next () .length? $active.next)
  : $('#slideshow IMG:first');

  Uncomment the 3 lines below to shoot images in random order
  
  var $sibs = $active.siblings ();
  var rndNum = Math.floor (Math.random () * $sibs.length);
  var $next = $($sibs [rndNum]);

  
  $active.addClass('last-active');

  $next.css ({opacity: 0.0})
  .addClass ('active')
  . Animate ({opacity: 1.0}, 1000, function() {})
  $active.removeClass ('active last active');
  });
  }

  {$(function()}
  setInterval ("slideSwitch()", 5000);
  });

  < /script >

  < style type = "text/css" >

  / * the value width and height to match your images * /.

  {#slideshow}
  position: relative;
  height: 157px;
  Width: 220px;
  }

  #slideshow IMG {}
  position: absolute;
  top: 0;
  Left: 0;
  z index: 8;
  opacity: 0.0;
  }

  {IMG.active #slideshow
  z-index: 10;
  opacity: 1.0;
  }

  {IMG.last - active #slideshow
  z index: 9;
  }

  < / style >

  < / head >

  < style body = "" do-family: Arial, Sans-serif, without; ">"

  < h1 > < / h1 >

  <! - this will work with any number of images - >
  <!-set the current class about according to the image you want to appear as the default
  (if not, this will be the last image) - >

  < div id = "slideshow" >
  < img src = "donate.gif" alt = "Donate now" / > "
  < img src = "DVD.gif" alt = "Shop DVDs" / > "
  < img src = "legis3.jpg" alt = "Legislative coverage" align = "top" class = "active" / > < / div > "

  
  < / body >
  < / html >

  ----------------------------

  Each of the three lines img src should < div id = slideshow ">?"

  Thanks for any help.

  we210 wrote:

  No, it has not corrected the problem.

  Thanks again.

  Looking at the last code you have posted you have changed the url links to the two scripts jquery to dev/jquery.fancy.box-1.3.0.js etc.. It seems that the scripts don't maybe not in this folder 'dev '?

  
     

  The images do not turn has nothing to do with the block of css code or where it is inserted in thesection of the code, but has everything to do with getting links to the correct jquery scripts.

• How can I achieve this layout? DIV inside div tags

  Hello world
  I m beginner in web design. I am trying to create a layout like this
  http://ImageShack.us/photo/my-images/717/layoutproblem.jpg/

  But I m having difficulties to give the position,height, float and display the properties for the divs.
  Please note that there are the borders of the image on the left and right side of the div content and bottommargin.

  Thanks in advance.

  Two divs, two wide explicit and both floated left for the gallery and details.  Space them margins.

  Follow that with a single div width of the container for technical details and possibly the content.  No required positioning.  I'm not even sure that a wrapper is required because you can give the body tag with a width in CSS and use left/right auto margins to center the content.

  Why wouldn't work?

• Hide the div tags in the media queries

  Hello

  I ran into a bit of a problem trying to get some div tags appear on some devices. I thought that if a div has been set to hidden then it does not appear. I pasted my code below.

  The theory behind my design is to have a different fixed background on the desktop image, Tablet and phone. So I inserted a transparent image on top to control how image is seen on each window.

  "What I try to achieve is when the site is displayed on a desktop ' #large-ipad" is hidden and the ' #-wide image' is seen. "" And then once the site reaches the correct display window i.e. an ipad ' #large-ipad ' becomes visible and the ' #-wide image "is hidden. Then a third image will swap when it is read on a mobile device, but I have not to this article yet.

  When it is viewed on a desktop computer I think it is still showing the image sheets before the roll content.

  This is just a test at the minute, so there is no content and background images are set on my computer. If you don't know what I'm after, please ask and I will try to rephrase my description.

  @media only screen and (min-width: 481px) {}

  {.gridContainer}

  Width: 100%;

  padding-left: 0%;

  padding-right: 0%;

  margin: auto;

  background-attachment: fixed;

  background-image: url(images/bg-ipad.jpg);

  background-repeat: no-repeat;

  background-position: top center;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  }

  {#LayoutDiv1}

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  background-color: #FFF;

  padding-top: 20px;

  padding-bottom: 20px;

  }

  {# image - wide

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  visibility: hidden;

  }

  {#body - text

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  background-color: #FFF;

  padding-top: 300px;

  padding-bottom: 300px;

  }

  {#large-ipad}

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  }

  }

  / * Desktop layout: 769px for a max of 1920px.  Inherits the styles of: Mobile and tablet. */

  @media only screen and (min-width: 769px) {}

  {.gridContainer}

  Width: 100%;

  Max-width: 1920px;

  padding-left: 0%;

  padding-right: 0%;

  margin: auto;

  background-attachment: fixed;

  background-image: url(images/bg-image.jpg);

  background-repeat: no-repeat;

  background-position: top center;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  }

  {#LayoutDiv1}

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  height: 70px;

  z-index: 1000;

  background-color: #FFF;

  position: fixed;

  Top: 0px;

  }

  {# image - wide

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  position: static;

  z-index: 0;

  }

  {#body - text

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  background-color: #FFF;

  padding-top: 300px;

  padding-bottom: 300px;

  }

  {#large-ipad}

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  visibility: hidden;

  overflow: hidden;

  }

  }

  Any help would be massively appreciated I really want the effect I'm after.

  Kind regards

  Alex

  Hi all

  Think I have asked this question a little prematurely. I thought it, just needed to change the None display: display: none;

  Sorry to take your time to read above.

  See you soon,.

  Alex

• Image disappears in the Div tag

  Hello Dreamweavers.

  IM by selecting my image that is inside a div tag and when I hit the enter/return is disappeaers. What is going on?

  The reason Im doing this is to add a legend title to my image leaving a space under the pitcure.

  Thank you

  

  * {

  margin: 0;

  padding: 0;

  }

  {#box1}

  Width: 600px;

  }

  {.floatright}

  float: right;

  left margin: 12px;

  margin-top: 0px;

  margin-bottom: 9px;

  margin-right: 0px;

  padding-right: 0px;

  }

  < / style >

  < / head >

  < body >

  < div id = "box1" >

  < p > < br >

  Contrary to popular belief, is not simply random text Lorem Ipsum. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years. Richard McClintock, a Professor of Latin at the Hampden - Sydney College in Virginia, one of the more obscure terms latins, computer, looked up a passage of Lorem Ipsum and passing by her quote of the word literature classic, discovered the undoubted source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of the 'of Finibus Bonorum and Malorum"(The extremes of good and evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet... '. ", comes from a line in section 1.10.32 < br >

  Contrary to popular belief, is not simply random text Lorem Ipsum. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years. Richard McClintock, a Professor of Latin at the Hampden - Sydney College in Virginia, one of the more obscure terms latins, computer, looked up a passage of Lorem Ipsum and passing by her quote of the word literature classic, discovered the undoubted source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of the 'of Finibus Bonorum and Malorum"(The extremes of good and evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet... '. ", comes from a line in section 1.10.32 < /p >

  < p > < / p >

  < p >

  < img src = "_images/award.jpg" width = "240" height = "192" class = "floatright" > contrary to popular belief, Lorem Ipsum is not simply text randomly. " It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years. Richard McClintock, a Professor of Latin at the Hampden - Sydney College in Virginia, one of the more obscure terms latins, computer, looked up a passage of Lorem Ipsum and passing by her quote of the word literature classic, discovered the undoubted source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of the 'of Finibus Bonorum and Malorum"(The extremes of good and evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet... '. ", comes from a line in section 1.10.32 < /p >

  < / div >

  < / body >

  < / html >

  IM by selecting my image that is inside a div tag and when I hit the enter/return is disappeaers.

  When you do what you say, it will disappear you tap "return" with the selected image . This will remove the 'image' of this region.

  The solution is to select the image in Design view (if that's what you're comfortable with), hit "right arrow key" and then press return. This will give you space 'after' the image, keeping the image.

• can't make reactive image inside the div class or id!

  < img class = "reactive" src = "robots.jpg" > "

  the CSS for resoponsive is:

  {img. Responsive}

  Max-width: 100%;

  height: auto;

  }

  Yes. It works very well, but he doesn't work inside the div class

  < div class = "hhh" >

  < img class = "reactive" src = "robots.jpg" > "

  the css of the file for resoponsive is:
  

  {img. Responsive}

  Max-width: 100%;

  height: auto;

  }

  < / div >

  It does not work. any way to make it work?

  Right.  That is my answer and I stick to it.

  Here is an example online to work with image inside a

  .

  The editor tryit v2.5

  Nancy O.

• Image in the div tag

  Hello Dreamweavers.

  IM placing an image in my div tag and trying to style it with css, just to see what CSS has really cos Im new.

  IM adding the background image on the Center, but his only is not all the div, the leash of shadows

  on the left and right, so how can I place an image to occupy any of the div tag?

  Thank you.

  

  I disagree with what Kenneth has recommended. He uses Flash to resize a background to the size of the viewport.

  Here are some tips:

  If you use a background image: url("..) (' / images/background.jpg "); in your CSS, the div will not develop to the background fill the div. So, if you have an image you want to show in a div (and don't want other images and text to sit on it, the best way to do so is not to set the image as a background.

  If you do not want the image in the background, and you want the div to be the same size as the image file, you must determine the dimensions of the image and make the height and the width to your equal to the div.

  The other way is to have your CSS resize your background to fill a div with a predefined size. If you follow these steps:

  {#mydiv}

  Width: 860px;

  height: 700px;

  background-image: url("..) (' / images/background.jpg ");

  background-size: 100% 100%;

  }

  This before you set the size of your div and make your background image to fill this div. If your background is close to the sheer size of the div, it will look like very well, but if you're stretching a background a lot smaller than your div, you can see a few grain. In this case, the use of Photoshop to aperture this context can be a good idea.

• is there something wrong with having a HREF inside a &lt; div &gt; tag?

  I just realized that my href does not work (see below).  Is there something wrong with having in a < div > tag:

  < div id = "logo" >

  < a href = "index.html" > < img src = "images/OWN - logo.gif" alt = "Logo of Nutrition optimum Wellness" width = "276" height = "170" border = "0" / > < /a >
  < / div >

  THE CSS is in another file and looks like this:

  {div #logo
  position: absolute;
  left: 34px;
  top: 44px;
  z-index:-1;
  Width: 276px;
  height: 170px;
  -moz-background-clip:-1;
  }

  For example... If you go to the next page is not WHY NUTRITION WELL-BEING OPTIMAL logo (top left corner) a link to index.html?

  http://www.Human-landscaping.com/staging/own/about.html

  Thank you, - bill

  Nothing wrong with having a href in a div; It is the usual way to do it.

  But give your div #logo a z-index of the least throws a it back behind the plane of the photo and inaccessible to your cursor hovering.

  Lose the z-index:-1; and you'll be fine.

  Beth

• images and divs

  Hi all. I have a problem with CSS. I have a div box that contains a list of links and a chart. just below which is another box of div with another list of links and a different graphic. In IE7, it appears correctly, but in Firefox the first line of text in the second box wants to wrap the graphic in the first box, even if they are in separate div tags. I also noticed that if the text in the box does not extend beyond the bottom of the graph, then the div box is not either. so, my question is, how do I make images to stay inside the div boxes?
  
  I noticed that this always happens (as images seem to go on top of divs, instead of inside of them), there has simply never been a problem before.

  Show us your code, please.

  --
  Murray - ICQ 71997575
  Adobe Community Expert
  (If you * MUST * write me, don't don't LAUGH when you do!)
  ==================
  http://www.dreamweavermx-templates.com - template Triage!
  http://www.projectseven.com/go - DW FAQs, tutorials & resources
  http://www.dwfaq.com - DW FAQs, tutorials & resources
  http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
  ==================

  'c h n' wrote in message
  News:euj9hi$OG4$1@forums. Macromedia.com...
  > Hello all. I have a problem with CSS. I have a div box that contains a list of links
  > and
  > a chart. just below that is another div with another box list of links
  > and a
  > different graphic. In IE7, it displays properly, but in Firefox, the first
  > line
  > text in the second box wants to wrap up the chart in the first
  > box,.
  > even if they are in separate div tags. I also noticed that the
  > text of
  > the box will not spent at the bottom of the image, then the div box
  > don't
  > either. so, my question is, how do I make images to stay inside the div boxes?
  >
  > I noticed that this always happens (the path of the images seem to go above)
  (> divs, instead of inside of them), there has simply never been a problem before.
  >

• Disorder by selecting the Div tags

  Hello

  Im trying to create a website portfolio for me but I'm having trouble with the selection of some div tags, I added to my page.

  

  As you can see here the top right divtag is selected/clicked on illustrated by give it a blue box around it. It allows me to add a rollover image to which is what I try to do with home' 'info' and 'contact' buttons shown above right. However when I click on or around the div tags that hold these buttons I can't "select" them so that the blue box appears around the edge and therefore impossible to add the rollover image.

  This is the encoding of the page, if it helps (I) normally work in the design window, I have not been taught in the coding

  < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""

  " < html xmlns =" http://www.w3.org/1999/xhtml ">

  < head >

  < meta http-equiv = "Content-Type" content = text/html"; charset = utf-8 "/ >"

  < title > Untitled Document < /title >

  < style type = "text/css" >

  {#wrapper}

  float: none;

  Width: 1500px;

  margin: auto;

  }

  {#p1}

  float: left;

  height: 350px;

  Width: 490px;

  margin left: 15px;

  top of the margin: 15px;

  background-image: url(images/testp1.jpg);

  }

  {#p4}

  float: left;

  height: 350px;

  Width: 490px;

  top of the margin: 15px;

  margin left: 15px;

  background-image: url(images/testp2.jpg);

  }

  {#p5}

  Clear: none;

  float: left;

  height: 350px;

  Width: 490px;

  top of the margin: 15px;

  margin left: 15px;

  background-image: url(images/testp3.jpg);

  }

  {#p6}

  float: left;

  height: 350px;

  Width: 490px;

  top of the margin: 15px;

  background-image: url(images/testp1.jpg);

  }

  {#p2}

  background-color: #333;

  float: left;

  height: 350px;

  Width: 490px;

  top of the margin: 15px;

  background-image: url(images/testp2.jpg);

  }

  {#p3}

  background-color: #999;

  float: left;

  height: 350px;

  Width: 490px;

  right margin: 15px;

  top of the margin: 15px;

  background-image: url(images/testp3.jpg);

  }

  {#p7}

  float: left;

  height: 350px;

  Width: 490px;

  top of the margin: 15px;

  margin left: 15px;

  background-image: url(images/testp3.jpg);

  }

  {#p8}

  float: left;

  height: 350px;

  Width: 490px;

  top of the margin: 15px;

  margin left: 15px;

  background-image: url(images/testp1.jpg);

  }

  {#p9}

  float: left;

  height: 350px;

  Width: 490px;

  top of the margin: 15px;

  background-image: url (images/Logo1 - Tile.jpg);

  }

  {#home-btn}

  background-color: #999;

  float: left;

  height: 30px;

  Width: 30px;

  margin-top:-715px;

  margin left: 15px;

  background-image: url(images/home.jpg);

  }

  {#contact-btn}

  float: left;

  height: 30px;

  Width: 30px;

  margin-top:-625px;

  margin left: 15px;

  background-color: #FF6;

  background-image: url(images/contact.jpg);

  }

  {body

  left margin: 0px;

  margin-top: 0px;

  margin-right: 0px;

  margin-bottom: 0px;

  }

  {#info-btn}

  background-color: #09F;

  float: left;

  height: 30px;

  Width: 30px;

  margin left: 15px;

  margin-top:-670px;

  background-image: url(images/info.jpg);

  }

  < / style >

  < / head >

  < body >

  < div id = 'wrapper' >

  < div id = "p9" > < / div >

  < div id = "p8" > < / div >

  < div id = "p7" > < / div >

  < div id = 'p6' > < / div >

  < div id = "p5" > < / div >

  < div id = "p4" > < / div >

  < div id = 'p3' > < / div >

  < div id = "p2" > < / div >

  < div id = "p1" > < / div >

  < / div >

  < div id = "contact-btn" > < / div >

  < div id = "info-btn" > < / div >

  < div id = "Home-btn" > < / div >

  < / body >

  < / html >

  Any ideas?

  Cheers, Ryan

  I normally work in the design window that I've not been taught in the coding

  You will learn about code regardless if you make the effort. Start with these links:

  http://w3schools.com/

  http://www.csstutorial.NET/

  DW assumes that you have knowledge of HTML & CSS code.

  If you cannot or will not work with the code, you use the wrong tool.

  For the non-codeurs, Adobe offers 2 other options: Adobe Muse & portfolio

  Nancy O.

• Dreamweaver. Is it possible to have AP div tags in a fluid Grid Layout Div?

  I am putting together a site with a very basic page layout; some titles at the top, each placed in an AP Div, with images below.  But I would use the fluid Grid Layout Div so that the positioning of the change of flags AP div on mobile devices.

  I can't figure out how to do so that the AP div inside my fluid Grid Layout Divs tags

  Thank you

  1. forget the AP Div they are of very little use and can only be deployed in a sensitive site with care (and knowledge).

  2 forget the fluid grid layouts, they are not sufficiently stable.

  That being said, take a look at create a responsive Web design in Dreamweaver | Adobe Dreamweaver tutorials CC and Bootstrap 3 tutorial

• Hide a div tag that flash has finished loading

  What I'm trying to do, is to hide several div tags until my main.swf loading is completed. It is quite difficult to explain, but I'm trying to do is to hide my navigation bar and a tab on my website quote request until finished the preloader to load my main.swf. The preloader is located inside the main.swf and basically just 2 framework once it is loaded. I need to show those hidden div tags once he finished to load more to move to the 2nd image, then it will have to be some sort of communication between AS3 and the HTML of my site.

  Basically, I have been unable to 'float' my icons in the bar of navigation and click the tab a request where I need them to help only AS3, but I know how to do the floating using Div and CSS tags. So, I just need these two divs hidden until the rest of the site is loaded.

  I had someone trying to explain how do using ExternalInterface, but it's too complicated for me too quickly. I'm looking for is an easy way to float my items when resizes browser window using only AS3 or an easy way to show a few tags hidden div (which contain very small .swf files) once my page loaded using an easy and fast AS3 function that tells the HTML to display the tags.

  Any suggestions would be greatly appreciated and thanks in advance.

  ExternalInterface is the way to go with this.  Search Google using terms such as 'Tutorial AS3 ExternalInterface' until you find something that you can operate.  Do not try to adapt it to your needs immediately. First operate it as a stand-alone experience.  Then you can modify your application to stuit.

  Here is a link to the mentioned research:

  https://www.Google.com/search?q=AS3+ExternalInterface+tutorial

• Settings for the right column div tag

  Hi guys

  Inside my base model home page, I want a column on the right that starts at the top right under the header. This will serve to show the news and contact and so.

  I have a separate div for the text on the left and a div to the right column. The right div is set to "position: absolute" because he must remain top-right under the header.

  But as you can see on the screenshot, social media icons that are part of the model appear just below the div to the left.

  How can I configure the right column div tag to keep it at the top right, the text on the left remains where it is and that the right column corresponds to the div model so that social media icons will be displayed automatically below the contact information on the right.

  The second screenshot shows the result as it should be for the social media icons, so below all the content of the page.

  

  Some fundamental fixes you should do first:

  • Yourtag begins after you have already a meta tag and tag style open on your page. Solve this problem
  • For this reason, the tag appears as away during validation. If you set the point #1, this should be resolved

  Now coming to your question in the discussion.

  You have

  more than once on your page. It's illegal markup. ID can only be used once per page. If you want to repeat the same style for more than 1 item, make a class and style it in CSS with .body_right instead of #body_right. In this way, you can re - use this element never how many times you want.

  In the file/styles/style. CSS, line 2200:

  {#column_right}

  Display: block;

  position: absolute;

  high: 25;

  Width: 25%;

  left: 75%;

  z-index: auto;

  }

  Who to change:

  {#column_right}

  Display: block;

  float: right;

  Width: 25%;

  }

  Get rid of everything that isn't here in my code above ^.

  See how your position elements / line up and post back if you need assistance.

• Placement of div tag error

  Hi-

  I placed the text in a div tag that is encapsulated within another div (Figure 1), but I can't seem to identify the appropriate location.  I tried to solve the problem assuming that the placement of the div is incorrect.  However, I cannot place a div within the area I want (red arrow indicates the proper placement), therefore, the text appears at the bottom of here where it should, under this seemingly div. foreign to one another any help to solve this is greatly appreciated. Thank you!

  Two images: Web site in the browser (left) and in Design view of Dreamweaver (right).

  

  Try 2 col fixed, left-sidebar, header & footer.

  Nancy O.