Align 4 div tags?

Similar Questions

• Div tags do not align

  I can't get my div tags to align correctly.  I have a DIV set to float left and the other right float.  I can get the first set of work, but as soon as I add in another series, they both float left.  I played around with the margins, borders and padding and nothing seems to work.  Here is the code:

  < style type = "text/css" >
  {.pageborder}
  Width: 795px;
  height: 1000px;
  border: medium solid #008478;
  do-family: Verdana, Geneva, without serif.
  do-size: 10pt;
  }
  {.prodboxleft}
  do-family: Verdana, Geneva, without serif.
  do-size: 10pt;
  background-color: #76c6be;
  text-align: left;
  Width: 369px;
  float: left;
  height: 150px;
  border: medium dashed #008478;
  top of the margin: 5px;
  right margin: 5px;
  margin-bottom: 5px;
  left margin: 12px;
  padding: 0px;
  }
  {.prodboxright}
  do-family: Verdana, Geneva, without serif.
  do-size: 10pt;
  background-color: #76c6be;
  text-align: left;
  Width: 369px;
  float: right;
  height: 150px;
  border: medium dashed #008478;
  top of the margin: 5px;
  right margin: 12px;
  margin-bottom: 5px;
  margin-left: 5px;
  padding: 0px;
  }
  < / style >
  < / head >

  < body >
  < div class = "pageborder" > < div class = "prodboxleft" > content of class "prodboxleft" goes here < / div >
  < div class = "prodboxright" > content of class "prodboxright" goes here < / div >
  < div class = "prodboxleft" > content of class "prodboxleft" goes here < / div >
  < div class = "prodboxright" > content of class "prodboxright" goes here < / div >
  < div class = "prodboxleft" > content of class "prodboxleft" goes here < / div >
  < div class = "prodboxright" > content of class "prodboxright" goes here < / div >
  < / div >

  You are welcome.

  When you get a chance, please mark "compensation float" as the correct answer.  It helps others who might find this thread in the forum search.

  Nancy O.

• The alignment of the div tags/content

  I have a div class = "wrapLinks" (unordered list) and a div class = "slider" (image carousel), and both are within the class = "content" div  At some point, "wrapLinks" were in the top left of the content.  After you create the div class is 'slider', the 'wrapLinks' have been 'pushed' down under the "cursor" that comes from taking up space at the top left of the content.  Ideally, I want the two (aligned horizontally) inline with eachother. First, I tried to change the margin for both classes of div in the css, but that doesn't seem to work.  I then tried to add "float: left;" to the "wrapLinks" and "float: right;" for the "cursor" in the css, but that also does not work.  I also try to put a button on the cursor.  I think that's what we call a 'floating div tag", but not sure.  I feel that I write the CSS properly for each class of div.

  Any ideas on what I can / should I do?

  I have provided a reference image.

  

  Even with the following addition/changes, the carousel seems too wide to fit completely on the page:

  .wrapLinks UL

  {

  margin: 10px 0px 0px;

  padding: 4px 0px 0px;

  do-family: "Arial Unicode MS";

  / * + 9px placement: shift-346px; * /

  position: relative;

  left: 9px;

  top:-346px;

  }

  .float-right

  {

  float: right;

  margin: 225px 60px banner 0px 0px;

  / * + placement: Maj 51px-301px; * /

  position: relative;

  left: 51px;

  high:-301px;

  }

  /*################*/

  . Slider

  {

  / * + placement: Maj 248px 8px; * /

  position: relative;

  left: 248px.

  top: 8px;

  }

• alignment with the &lt; div &gt; tags

  I am having trouble getting my 3rd < div > tag align (id = flash). It is left in line with the edge of the tag '#content' < div >. Essentially left alignment on the edge of my centered layout. Here is my code, anyone can have an idea on what I'm missing? I am new to do not use tables.

  Thank you

  < head >
  < meta http-equiv = "Content-Type" content = text/html"; Charset = UTF-8 "/ >"
  < Title > page < /title >
  < style type = "text/css" >
  {body
  do-family: Arial, Helvetica, without serif.
  background-color: #FFF;
  margin: 0px;
  padding: 0px;
  }
  #container {}
  margin: 0 auto;
  Width: 999px;
  }
  #content {}
  Width: 100%;
  }
  {#flash}
  position: absolute;
  top: 134px;
  left: 216px;
  }
  < / style >
  < / head >

  < body >
  < div id = "container" >
  < div id = "content" > < img src = "images/background.jpg" width = "997" height = "2400" / > "
  < div id = "flash" >

  This is a decision by aligning

  < / div >
  < / div >
  < / div >
  < / body >
  < / html >

  The same can be applied to the normal margins:

  {#flash}

  margin: 134px 216px 0px 0px;

  }

  Is that what you are looking for?

  Nick

• Div tag, align right

  Hello
  
  It should be easy and for some reason, I'm missing it. This is a php page and it has a navigation panel with fireworks on the left side, but I'm removing all the extranuous stuff just to let the div tags that are governed by a CSS page.
  
  
  Why is not it? And, is there a way to control with CSS?
  
  Thank you

  The problem was in the CSS. I had to fill for the 'content' div and nothing for the div. "nav" for a reason, it was make the div "nav" I put padding for the "nav" div and took the filling of the upper part of the div 'content', the page now appears correctly.

  Thanks for the help Osgood... !

• Responsive Design - Show and hide the div tags

  Hello

  I am building a website using sensitive design. I want a certain div tag to be read on a desktop and a tablet but then to disappear and a different div be made visible on the mobile device.

  I realized the above with the code below, but I found a problem. The problem I found is that the div is hidden here still an empty space remains there then it creates a large empty space. Anyway is to hide this great space?

  (mobile)

  {#tab-container}

  display: none;

  visibility: hidden;

  Clear: both;

  float: none;

  left margin: 0;

  Width: 96%;

  display: block;

  margin-right: auto;

  left margin: auto;

  padding-top: 10px;

  padding-bottom: 10px;

  text-align: center;

  border-top-width: 1px;

  border-bottom-width: 1px;

  border-top-style: solid;

  border-bottom-style: solid;

  border-bottom-color: #000;

  border-bottom-color: #000;

  }

  {#phone-tabs}

  display: block;

  visibility: visible;

  Clear: both;

  float: none;

  left margin: 0;

  Width: 96%;

  display: block;

  margin-right: auto;

  left margin: auto;

  padding-top: 10px;

  padding-bottom: 10px;

  text-align: center;

  border-top-width: 1px;

  border-bottom-width: 1px;

  border-top-style: solid;

  border-bottom-style: solid;

  border-bottom-color: #000;

  border-bottom-color: #000;

  line-height: 30px;

  }

  (Tablet)

  {#tab-container}

  display: block;

  visibility: visible;

  Clear: both;

  float: none;

  left margin: 0;

  Width: 96%;

  display: block;

  margin-right: auto;

  left margin: auto;

  padding-top: 10px;

  padding-bottom: 10px;

  text-align: center;

  border-top-width: 1px;

  border-bottom-width: 1px;

  border-top-style: solid;

  border-bottom-style: solid;

  border-bottom-color: #000;

  border-bottom-color: #000;

  }

  {#phone-tabs}

  display: none;

  visibility: hidden;

  Clear: both;

  float: none;

  left margin: 0;

  Width: 96%;

  display: block;

  margin-right: auto;

  left margin: auto;

  padding-top: 10px;

  padding-bottom: 10px;

  text-align: center;

  border-top-width: 1px;

  border-bottom-width: 1px;

  border-top-style: solid;

  border-bottom-style: solid;

  border-bottom-color: #000;

  border-bottom-color: #000;

  }

  (office)

  {#tab-container}

  display: block;

  visibility: visible;

  Clear: both;

  float: none;

  left margin: 0;

  Width: 70%;

  display: block;

  margin-right: auto;

  left margin: auto;

  padding-top: 10px;

  padding-bottom: 10px;

  text-align: center;

  border-top-width: 1px;

  border-bottom-width: 1px;

  border-top-style: solid;

  border-bottom-style: solid;

  border-bottom-color: #000;

  border-bottom-color: #000;

  }

  {#phone-tabs}

  display: none;

  visibility: hidden;

  Clear: both;

  float: none;

  left margin: 0;

  Width: 70%;

  display: block;

  margin-right: auto;

  left margin: auto;

  padding-top: 0px;

  padding-bottom: 0px;

  text-align: center;

  border-top-width: 0px;

  border-bottom-width: 0px;

  border-top-style: solid;

  border-bottom-style: solid;

  border-bottom-color: #000;

  border-bottom-color: #000;

  }

  Thanks for your help!

  Alex

  Try to delete the two lines, as shown below.

  Display: block overrides display: no because it is further down in the code.

  For this reason, visibility: hidden comes into play. This statement is exactly intended to hide the contents, while leaving the blank space.

  Edit: I think that really is all you need:

  {#tab-container}

  display: none;

  }

  (mobile)

  {#tab-container}

  display: none;

  visibility: hidden;

  Clear: both;

  float: none;

  left margin: 0;

  Width: 96%;

  display: block;

  margin-right: auto;

  left margin: auto;

  padding-top: 10px;

  padding-bottom: 10px;

  text-align: center;

  border-top-width: 1px;

  border-bottom-width: 1px;

  border-top-style: solid;

  border-bottom-style: solid;

  border-bottom-color: #000;

  border-bottom-color: #000;

• How do you do &lt; div &gt; tags line up in Dreamweaver CS6?

  Y at - there no way to make the div tags dash so that the opening and closing tags are aligned vertically?  How apply the formatting Source, sometimes the final tag is at the end of a line of code instead of wrapped to the next line and link up with its start tag.  Are there any settings for this to happen or extensions for this?

  Go in Edition > Preferences > Code Format > Tag Libraries.   After setting your formatting preferences.  Record.

  Access the commands > apply Source format.

  Nancy O.

• Problem with the text in the div tag

  Hey there,

  the question that I have is that every time that I add text to a div tag and press 'enter' to start on another paragraph, the text on the first paragraph right guard moved down to about a paragraph. It happens in Dreamweaver and the browser when available is presented as a preview. I have included a few pictures below, please advise.

  First added text, which seems fine:

  

  But when I try to type the text after pressing "enter".

  

  I want the text to align to the top instead of from a paragraph down. Something like this (made in InDesign):

  

  I will include the code as well. When I select the div tag, it's what is highlighted in the code pane:

  < div id = "about6" >

  < p > Hey there < /p >

  < p > Hey there 2 < /p >

  < p > Hey there 3 < /p >

  < p > Hey there 4 < /p >

  < / div >

  A screenshot of the of type parameters for this div:

  

  Any help would be appreciated. Thank you.

  Paragraphs, titles etc. have legacy browser style rules.

  We can remove the style by adding rules to the top of the stylesheet

  * {

  padding: 0;

  margin: 0;

  }

  Even better is to include a CSS reset set of rules such as found here http://meyerweb.com/eric/tools/css/reset/

  By the way, please note that the use of identifiers will limit your fun by using style rules. You should not use ID unless needing a single login. In your case, I would use a class.

  Heights of adjustment are also going to strangle the natural flow of your document, especially if you intend to start on the drawings of fluid

  I hope this helps.

• Images inside div tags appear broken

  I don't have a ton of experience in the use of div tags, but I'm learning and have met a "roadblock". Search for an answer to these days, I'm not finding exactly what I live... I'm looking on the forum for help and advice.

  So I designed a layout with divs. When I preview the design of in Dreamweaver, the site appears flawelssly in Safari, Firefox and Chrome - everything seems perfect, and there is no broken images. But as soon as I download all my files on my server dev online - it's where things go wrong and I see broken images. But the broken images are not consistent. Some look perfectly while others are broken. I do not understand why an image appears while another image is not, I used the same approach on each div I built. I know that my image paths are correct, then this isn't the problem... which leads me to believe that I have something wrong in my code div itself. But being new to the div... I do not see where I was wrong. I have not used 'float' correctly? Has not used to position correctly? I am very confused and frustrated at this point and I really want to come back to the use of tables... any help will be grately appreciated.

  Here is the site on my dev server: http://studio2adv.com/dev/mignognacollision/

  Here is my css:

  @charset "UTF-8";

  / * CSS document * /.

  / * = Global properties START = * /.

  {body

  background-color: #e9cb9c;

  Width: auto;

  height: 100%;

  margin: 0 auto;

  do-family: Verdana, Geneva, without serif.

  do-size: 12px;

  line-height: 1.4em;

  Color: #000;

  }

  HTML {}

  background: #e9cb9c;

  margin: 0 auto;

  padding: 0;

  outline: 0;

  vertical-align: left top;

  do-size: 100%;

  }

  . Container {}

  margin: 0 auto;

  Width: 1000px;

  height: inherit;

  background-color: #fff;

  }

  #header {}

  Width: 956px;

  height: 125px;

  margin: 0 auto;

  vertical-align: middle;

  background-color: #fff;

  }

  {#footercontainer}

  Width: 956px;

  height: 67px;

  margin: 0 auto;

  border-top-style: solid;

  border-right-style: none;

  border-bottom-style: solid;

  border-left-style: none;

  border-color: orange;

  background-color: #fff;

  }

  {#footercontainer2}

  Width: 956px;

  height: 55px;

  margin: 0 auto;

  background-color: #005baa;

  }

  {#endtag}

  margin: 0 auto;

  Width: 956px;

  height: 70px;

  background-color: #fff;

  }

  / * = Global properties END = * /.

  /* ==================== Start header ========================== */

  {.header1}

  float: left;

  Width: 70%;

  Padding: 50px 0px 0px 0px;

  }

  {.header2}

  float: left;

  Width: 12%;

  padding: 20px 0px 0px 0px;

  }

  {.header3}

  float: left;

  Width: 18%;

  padding: 10px 0px 0px 0px;

  }

  /* ==================== END header ========================== */

  /* ==================== Text ========================== */

  {.topphone}

  do-family: Verdana, Geneva, without serif.

  do-size: 16px;

  make-weight: bold;

  color: #005baa;

  text-align: right;

  vertical-align: top of the text;

  }

  H1 {}

  do-family: Verdana, Geneva, without serif.

  do-size: 18px;

  make-style: italic;

  color: #f7931e;

  text-align: left;

  line-height: 1.5em;

  }

  H2 {}

  do-family: Verdana, Geneva, without serif.

  font-size: 15px;

  make-style: italic;

  Police-weight: normal;

  color: #005baa;

  }

  H3 {}

  do-family: Verdana, Geneva, without serif.

  do-size: 12px;

  color: #f7931e;

  }

  {#preferredtext}

  do-family: Verdana, Geneva, without serif.

  do-size: 9px;

  text-align: center;

  Color: #000;

  }

  . FooterText {}

  do-family: Verdana, Geneva, without serif.

  do-size: 10px;

  color: #fff;

  }

  {p.footerendtag}

  do-family: Verdana, Geneva, without serif.

  do-size: 10px;

  Color: #000;

  text-align: center;

  }

  {p.testimonials}

  do-family: Verdana, Geneva, without serif.

  do-size: 14px;

  make-style: italic;

  Color: #000;

  text-align: left;

  }

  . Blue {}

  do-family: Verdana, Geneva, without serif.

  do-size: 14px;

  make-style: italic;

  make-weight: bold;

  color: #005baa;

  text-align: left;

  }

  {.listorange}

  color: #f7931e;

  }

  {.listblack}

  Color: #000;

  }

  {.listboldblack}

  make-weight: bold;

  Color: #000;

  }

  /* ==================== END Text ========================== */

  /* ==================== DIVs ========================== */

  {#topphone}

  Width: 670px;

  height: 30px;

  float: right;

  padding: 0px 0px 19px 265px;

  position: top of the page.

  }

  {.homefloatleft}

  Width: 143px;

  height: 195px;

  float: left;

  padding: 0px 0px 0px 22px;

  }

  {.homefloatmiddle}

  Width: 585px;

  height: inherit;

  float: left;

  padding: 0px 15px 0px 15px;

  }

  {.homefloatright}

  Width: 198px;

  height: auto;

  float: right;

  padding: 22px 0px 0px 0px;

  }

  {.aboutfloatmain}

  Width: 752px;

  height: 195px;

  float: left;

  padding: 0px 0px 0px 22px;

  }

  {.aboutfloatleft}

  Width: 250px;

  height: 245px;

  float: left;

  padding: 0px 0px 0px 22px;

  }

  {.aboutfloatmiddle}

  Width: 442px;

  height: inherit;

  float: left;

  padding: 0px 15px 0px 15px;

  }

  {.gsfloatleft}

  Width: 228px;

  height: 245px;

  float: left;

  padding: 0px 0px 0px 22px;

  }

  {.gsfloatmiddle}

  Width: 480px;

  height: inherit;

  float: left;

  padding: 0px 15px 0px 15px;

  }

  {.adfloatleft}

  Width: 250px;

  height: 245px;

  float: left;

  padding: 0px 0px 0px 22px;

  }

  {.adfloatmiddle}

  Width: 450px;

  height: inherit;

  float: left;

  padding: 0px 15px 0px 15px;

  }

  {.formfloatleft}

  Width: 80px;

  height: 245px;

  float: left;

  padding: 0px 0px 0px 22px;

  }

  {.formfloatmiddle}

  Width: 750px;

  height: 1200px;

  float: left;

  padding: 0px 15px 15px of 20px;

  }

  {.formfloatright}

  Width: 50px;

  height: auto;

  float: right;

  padding: 22px 0px 0px 0px;

  }

  {.clearfloat}

  Clear: both;

  }

  /* ==================== END DIVs ========================== */

  /* ==================== Start main nav ========================== */

  {#navlist}

  Width: 956px;

  }

  #navcontainer ul {}

  padding-left: 0px;

  left margin: 0px;

  background-color: #005baa;

  color: white;

  float: left;

  Width: 100%;

  do-family: Verdana, Geneva, without serif.

  }

  #navcontainer ul li {display: inline ;}}

  #navcontainer ul li a {}

  Padding: .7em 3.5em;

  background-color: #005baa;

  color: white;

  text-decoration: none;

  float: left;

  border-left: 1px solid #fff;

  }

  #navcontainer ul li a: active {}

  background-color: #f7931e;

  color: #fff;

  }

  #navcontainer ul li a: hover {}

  background-color: #f7931e;

  color: #fff;

  }

  #navcontainer ul li a: selected {}

  background-color: #f7931e;

  color: #fff;

  }

  /* ==================== END main nav ========================== */

  / * = Start slideshow = * /.

  {.rslides}

  position: relative;

  list-style: none;

  overflow: hidden;

  Width: 100%;

  padding: 0;

  margin: 0;

  }

  .rslides li {}

  -webkit-backface-visibility: hidden;

  position: absolute;

  display: none;

  Width: 100%;

  left: 0;

  top: 0;

  }

  .rslides li: first - child {}

  position: relative;

  display: block;

  float: left;

  }

  .rslides img {}

  display: block;

  height: auto;

  float: left;

  Width: 100%;

  border: 0;

  }

  /* ==================== End Slideshow ========================== */

  /* ==================== Start footer ========================== */

  {#footer1}

  float: left;

  Width: 12%;

  padding: 20px 20px 0px 20px;

  }

  {#footer2}

  float: left;

  Width: 24%;

  padding: 20px 0px 0px 0px;

  }

  {#footer3}

  float: left;

  Width: 60%;

  padding: 10px 0px 0px 0px;

  }

  {#footer4}

  float: left;

  Width: 55%;

  padding: 0px 0px 0px 10px;

  }

  {#footer5}

  float: right;

  Width: 40%;

  padding: 0px 10px 0px 0px;

  }

  {a.footerendtag:Link}

  color: #005baa;

  text-decoration: underline;

  }

  {a.footerendtag: active}

  color: #f79122;

  text-decoration: underline;

  }

  {a.footerendtag:hover}

  color: #f79122;

  text-decoration: underline;

  }

  {a.footerendtag:visited}

  color: #005baa;

  text-decoration: underline;

  }

  {#footercurrentlink}

  color: #f79122;

  text-decoration: underline;

  }

  /* ==================== END footer ========================== */

  Check that the images are not damaged and were saved for web RGB and CMYK not.

  Nancy O.

• centering and right alignment in div even

  New buttons css and attemptint to Center a logo in a < div > tag while the right aligning the contact/shopping cart. No combination of relative, absolute or fixed positioning seems to work. The two elements seem to be 'glued' together. The page is here: http://www.demilodesign.com/assets/CSS/nav.html

  Thanks for the suggestions.

  My css is:

  .logo

  {background-color: #F6FDDB;}

  Width: 100%;

  height: 46px;

  border-bottom-style: solid;

  border-bottom-color: #cccc66;

  border-bottom-width: 1px;

  text-align: center;

  position: relative;

  Top: 0px;

  padding-top: 11px;

  padding-bottom: 12px;

  }

  {.contactCart}

  position: relative;

  padding-right: 70px;

  text-align: right;

  padding-top: 40px;

  }

  and my html code:

  < div class = "logo" >

  " < span > < a href =" http://www.demilodesign.com "> < img src = ' http://www.demilodesign.com/assets/images/logo.gif "> < / a > .

  </span >

  " < span class ="contactCart"> < a href =" http://www.demilodesign.com "> < img src = ' http://www.demilodesign.com/assets/images/contact.gif "> < / a > .

  " < a href =" http://www.demilodesign.com "> Contact < /a > < a href =" http://www.demilodesign.com "> < img src = ' http://www.demilodesign.com/assets/images/contact.gif "> < / a > .

  " < a href =" http://www.demilodesign.com "> < /a > basket .

  </span >

  < / div >

  Modify the HTML code to

  http://www.demilodesign.com">http://www.demilodesign.com/assets/images/logo.gif ' >

  http://www.demilodesign.com">http://www.demilodesign.com/assets/images/contact.gif ' >

  http://www.demilodesign.com"> contact.

  http://www.demilodesign.com">http://www.demilodesign.com/assets/images/contact.gif ' >

  http://www.demilodesign.com"> basket.

  and add/edit the CSS

  . Heading .logo img {}

  display: block;

  margin: auto;

  }

  . Heading .contactCart {}

  position: static;

  Width: 200px;

  float: right;

  margin-top:-80px;

  }

  . Heading .contactCart a {}

  display: inline-block;

  }

• div tag

  I have an index.cfm which uses the dic to have the browser on the left and content on the right with a header and a footer.

  The left float div tag and the right float works in index.cfm.

  I want to place a Login.cfm on header and use the tag div, but the label title and invites always vertical connection, but not float left and right.

  Here is my code

  <! 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 > < /title > header form

  
  "" < link href = "... / Styles/MyCSS.css" rel = "stylesheet" type = "text/css" / >
  < / head >

  < body >
  < cfform >
  < div class = "container" >
  < div class = "HomeTitle >"
  < table border style = "hidden" >
  < b >
  < td border-style = "hidden" >
  
  "< cfinput type ="image"name ="Logo"class ="logo"id ="logo1"dir ="ltr"lang ="en"src="/GBS/Apps/Image/MyImage.png "alt ="Image ".

  align = "top" width = "50" height = "60" hspace = "50" hspace = "20" >
  < table >

  < td border-style = "hidden" >
  
  < label for = class "Title" = "GBStitle" > GBS America region Home Page < / label >
  
  < table >
  < /tr >
  < /table >
  < / div >
  < div class = "Login" >
  "< model CFINCLUDE ="... / Commmon/Login.cfm ">"
  <!-end.-> connection
  < / div >
  < / div >
  < / cfform >

  < / body >
  < / html >

  / * CSS document * /.
  {GBStitle}
  font-size: 10cm;
  do-family: Verdana, Geneva, without serif.
  background-color: #ADB96E;
  background-repeat: repeat;
  position: relative;
  visibility: inherit;
  color: #C00;
  text-decoration: underline;
  make-weight: bold;
  Width: 200px;
  }

  }
  . {HomeTitle}
  float: left;
  Width: 500px;
  background-color: #ADB96E;
  }

  . {Login
  do-family: Verdana, Geneva, without serif.
  background-color: #FFF;
  float: right;
  Width: 500px;
  }

  . Container {}
  Width: 1024px;
  background-color: #FFF;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  left margin: auto;
  }

  I use the Dreamweaver template to create this file, I think that model Dreamweaver using the.

  Certainly not. But anyway, the two elements to be floated next to each other must be in the same container.

• White space between the Div tags

  I use DW CS4.  I need to help, reducing the white space between the DIV tags  I have the white space between smaller gray line and my nav bar.  I see all the places where there are margins or padding.  Can anyone help?  Here's the code.  Thank you.

  < body bgcolor = "#CCCCCC" onload = "MM_preloadImages('..)." /_img/HOMEover.jpg ',' /_img/COMPANYover.jpg ','... / _img/PROJECTOR TSover.jpg ', '... CASE STUDIESover.jpg/_img / ','... / CONTACTUSover.jpg/_img ') ">"

  < div id = "container" >

  < div align = "left" >

  "" < p > < img src = "... / _img/Nute_Logo_tag_060612.gif" alt = "logo" name = "logo" width = "113" height = "74" hspace = "5" align = "absbottom" id = "logo" / > < / p >

  < / div >

  < div id = "header" > < / div >

  < div id = "content" > < / p >

  < table border = "0" cellpadding = "0" cellspacing = "0" >

  < b >

  "" "" < td > < a href = "" javascript:; "target ="_top"onclick =" MM_nbGroup ('down', "group1', 'bluebar',", 1) ' onmouseover = "MM_nbGroup ('over', 'bluebar',","1)" onmouseout = "MM_nbGroup ('out')" > < img src = "... / _img/bluebarup.jpg" alt = "" name = "bluebar" width = "118" height = "15" border = "0" id = "bluebar" onload = "" / > < /a > < table >

  "" < td > < a href = "" javascript:; "target ="_top"onclick =" MM_nbGroup ('down', "group1', 'Home',", 1) ' onmouseover = "MM_nbGroup ('more', 'Home','... / _img/HOMEover.jpg ',", 1) "onmouseout ="MM_nbGroup ('out')"" > < img src = ""... / _img/HOMEup.jpg ' alt = "Click HOME to go to the home page" name = "home" width = "115" height = "15" border = "0" id = "home" onload = "" / > < /a > < table >

  "< td > < a href =" "javascript:;" target = "_top" onclick = "MM_nbGroup ("down"," group1', 'society', ", 1) ' onmouseover =" MM_nbGroup ('more', 'society', "..") " "(/ _img/COMPANYover.jpg', '', 1)' onmouseout ="MM_nbGroup ('out')"> < img src ="... / _img/COMPANYup.jpg "alt ="Click to go to our services COMPANY"name ="company"width ="122"height ="15"border ="0"id ="company"onload =" "/ > < /a > < table >"

  "< td > < a href =" "javascript:;" target = "_top" onclick = "MM_nbGroup ("down","Group 1","projects",", 1) ' onmouseover = "MM_nbGroup ('more', 'projects',..." "(/ _img/PROJECTSover.jpg', '', 1)' onmouseout ="MM_nbGroup ('out')"> < img src ="... / _img/PROJECTSup.jpg ' alt = 'PROJECTS click to see our projects' name = 'projects' width = "122" height = "15" border = "0" id = "projects" onload = "" / > < /a > < table > "

  "" "" < td > < a href = "" javascript:; "target ="_top"onclick =" MM_nbGroup ('down', "group1', 'studies',", 1) ' onmouseover = "MM_nbGroup ('more', 'studies,'... / _img/CASE STUDIESover.jpg',", 1) "onmouseout ="MM_nbGroup ('out')"> < img src ="... / _img/CASE STUDIESup.jpg "alt ="click on the CASE STUDIES to see examples of projects' name = "added" width = "150" height = "15" border = "0" id = "added" onload ="" / > < /a > < table >

  "" "" < td > < a href = "" javascript:; "target ="_top"onclick =" MM_nbGroup ("bottom", "group1', 'contactus',", 1) "onmouseover =" MM_nbGroup ('more', 'contactus','... / _img/CONTACTUSover.jpg ', ", 1)" onmouseout = "MM_nbGroup ('out')" > < img name = "contactus" src = "... / _img/CONTACTUSup.jpg" border = '0' alt = "" onload = "" / > < /a > < table >

  < /tr >

  "< / table > < img src =" "alt =" "name ="mainphoto1"width ="780"height ="264"id ="mainphoto1"/ >

  Thank you for all your help.  I solved it by adding a padding to my header (grey line).

• Reduce the number of div tags

  What I could do to reduce the number of div tags used on this page?

  http://www.lash-it.com/what/kayakexamples/kayakexamples.html

  Why do you have comment float: left;?

  .examples_row img {}

  / * [disabled] float: left; */

  }

  Try this:

  {.examples_row}

  height: 300px;

  Width: 880px;

  }

  .examples_row img {}

  float: left;

  }

  .examples_row h1 {}

  do-size: 12px;

  text-align: justify;

  top of the margin: 50px;

  margin left: 260px;

  }

  .examples_row p {}

  margin left: 260px;

  }

• Dreamweaver cs5.5 - div tags don't float next to eachother

  I'm trying to get 2 div tags to float next to each other for hours! I've been playing with the float and messing around with the margins, but what ever I don't the div is always somewhat my another div tag I want that they completely off. I tried to change the top and bottom margins, but that does not work either. How can I get them side by side? We call it "textbox" and the other "imagewrapper". The code is:

  < ! 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 >

  < script src = "SpryAssets/SpryMenuBar.js" type = "text/javascript" > < / script > "

  < link href = "SpryMenuBarHorizontal.css" rel = "stylesheet" type = "text/css" / > "

  < link hand. CSS"rel ="stylesheet"type =" text/css"/ >

  < link href = "style2.css" rel = "stylesheet" type = "text/css" / > "

  <!-integrated styles for this page only-->

  < style type = "text/css" >

  {body

  margin: 0;

  padding: 0;

  font: 1em/1.5 ' Lucida without ","Lucida Sans Unicode ";

  }

  {#wrapper}

  Width: 1064px;

  margin: 0 auto; / * with width, this centers on screen page * /.

  Background: #FFF;

  text-align: center;

  }

  / * This styles image container * /.

  #thumbs p {}

  float: center;

  Width: 50px;

  height: 75px;

  / * This text caption styles * /.

  font: 14px italic/1.5 Geneva, Arial, Helvetica, without serif.

  color: #666;

  text-align: center;

  border: 1px solid silver;

  margin-top: 10px;

  right margin: 5px;

  margin-bottom: 18px;

  margin-left: 5px;

  }

  / * recommend using images of even size * /.

  #thumbs img {}

  Width: 50px; / * adjust the width to the photo * /.

  height: 75px; / * to the picture height adjustment * /.

  / * CSS3 drop shadows * /.

  -moz-box-shadow: 5px 5px 5px #666;

  -webkit-box-shadow: 5px 5px 5px #666;

  -khtml-box-shadow: 5px 5px 5px #666;

  box-shadow: 5px 5px 5px #666;

  }

  / * float clearing * /.

  #thumbs: after {}

  Display: block;

  visibility: hidden;

  height: 0;

  do-size: 0;

  content: "";

  Clear: left;

  }

  #wrapper #thumbs #imagewrapper {}

  height: 362px;

  Width: 280px;

  float: right;

  right margin: 720px;

  }

  #wrapper #thumbs #imagewrapper img {}

  height: 362px;

  Width: 280px;

  }

  {#wrapper #textbox}

  float: right;

  height: 300px;

  Width: 600px;

  right margin: 70px;

  }

  {.clearing}

  Clear: left;

  height: px;

  Width: 100%;

  }

  < / style >

  < / head >

  < body >

  < div id = 'wrapper' >

  < img src = "photos/header.png product and site" width = "1064" height = "116" alt = "header" / >

  <! - start menu - >

  < ul id = "MenuBar1" class = "MenuBarHorizontal" >

  < li > < a href = "#home.html" > home < /a > < /li >

  < li > < a href = "#" class = "MenuBarItemSubmenu" > shop < /a > < ul >

  < li > < a href = "#" class = 'MenuBarItemSubmenu' > women < /a > < ul >

  < li > < a href = "bwt.html" > top < /a > < /li > ""

  < li > < a href = "bws.html" > skirts/Shorts < /a > < /li > ""

  < li > < a href = "bwl.html" > pants/Leggings < /a > < /li >

  < li > < a href = "bwa.html" > Accessories < /a > < /li > ""

  < li > < a href = "bwd.html" > dresses < /a > < /li > < /ul > < /li > ""

  < li > < a href = "#" class = "MenuBarItemSubmenu" > < /a > men

  < ul >

  < li > < a href = "#" > Tops < /a > < /li >

  < li > < a href = "#" > money < /a > < /li >

  < li > < a href = "#" > Accessories < /a > < /li >

  < /ul >

  < /li >

  < li > < a href = "#" > semi Unique < /a > < /li >

  < /ul >

  < /li >

  < li > < a class = "MenuBarItemSubmenu" href = "#" > T-shirt Shop < /a > < ul >

  < li > < a href = "t-shirt shop.html" > men < /a > < /li >

  < li > < a href = 't-shirt shop.html' > women < /a > < /li >

  < li > < a href = "t-shirt shop.html" > single < /a > < /li >

  < /li > < /ul >

  < li > < a href = "clearance.html" > release < /a > < /li > ""

  < li > < a href = "#" > on < /a > < /li >

  < /ul >

  < h2 > < / h2 >

  < div id = "textbox" > < / div >

  < div id = "thumbs" >

  < div id = "imagewrapper" > < / div >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  <! - end wrapper - > < / div >

  < hr align = "center" size = "10" noshade = "noshade" class = "clear" color = "#999999" / >

  < div align = "left" > & copy; 2012, your footer text goes here < / div >

  < / div >

  < script type = "text/javascript" >

  var MenuBar1 = new Spry.Widget.MenuBar ("MenuBar1", {imgDown: "SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});})

  < /script >

  < / body >

  < / html >

  I made a sample for you here: http://forwardfocus.in/sandbox/leftrightfloat/

• I want to use a div tag or another to hide a video flash on my web site

  Hi, I have same video flash for many of my web pages. I'm trying to use the div tag to hide the header when it is not necessary. but it works only broser Firefox not IE. Here's what I did

  Is the above correct? What is the best way to do it?

  < div class = "wrapper" > < div class = "overlay" > african < / div > < span class = "blok_header" >

  < object classid = "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase ="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8, 0,0,0" width = "94%" height = "97%" id = "main" align = "middle" >

  < param name = "allowScriptAccess" value = "sameDomain" / >

  < param name = "movie" value = "main.swf" / > "

  < param name = "quality" value = "high" / >

  < param name = "scale" value = "noborder" / >

  < param name = "salign" value = "t" / >

  < param name = "bgcolor" value = "#ffffff" / >

  < embed src = "main.swf" quality = "high" scale = "noborder" salign = "t" bgcolor = "#ffffff" width = "900" height = "600" name = align 'main' = 'left' allowscriptaccess = "sameDomain" type = "application/x-shockwave-flash" pluginspage ="http://www.macromedia.com/go/getflashplayer" / >

  < / embed >

  < / object >

  </span >

  < / div >

  Thank you

  What I'm saying is, the flash video has a header with a button. I want to permanently hide the part containing the header. The user will never see it. I use the div I want to replace my menu in the header bar. Diving ovelay will contain my Web site menu. When I do, it works great on firefox, but on Internet Explorer, my menu is behinf and usercan see the flash header.

  The parameters of Divs are:

  Wrapper {}

  position: relative;

  height: 600px;

  Width: 900px;

  Top: 0px;

  padding: 0px;

  margin: 0px;

  }

  . Overlay {}

  background-color: #CCC;

  position: absolute;

  height: 98px;

  Width: 900px;

  Top: 0px;

  margin: 0px;

  padding: 0px;

  border-bottom-width: medium;

  border-bottom-style: solid;

  border-bottom-color: #999;

  border-right-color: #999;

  border-bottom-color: #999;

  border-left-color: #999;

  }

  Flash video setting. It is imbaded in the Wrapper Div