Make a DIV 100% of the height of the Page

Similar Questions

• Reflow of edge - first div 100% of the screen

  Hello, is it possible to create a model like this site: https://www.uber.com/ with a first DIV still at 100% of the screen and the other DIV below?
  Thank you

  Yes! Just to make the width of 100% of div and set the height that you want. I hope this helps!

• In Movie Maker, a window runs off the page and can not happen to button publish

  For example, when you go to publish a movie using Windows Movie Maker the lower part with the button publish runs at the bottom of the screen and you have to move the page to the top to access. Equipment: Screen SONY Bravia KDL 32S 2000 native resolution 1366/768. Nvidia graphics card GeForce 8500 GT set at 1360/768

  David, I found the easiest way. Click on adjust font size (DPI), password or continue right click the desktop click Customize, and then select the default 96 DPI and click on apply and were good. Sorry I forgot that I did set it to 120 DPI.

  Thanks for the help.

  RickS

• How to make a mandatory KFF on the page of the OPS?

  Hello gurus,
  
  I'm making a mandatory KFF by extending a controller. While I get the handle of the KFF, kff.setRequired ("yes") does not work. Here is the code in my controller
  
  Revenue and freight on the page account Site Business purpose are required
  Page: / oracle/apps/ar/cusstd/busPurDetails/webui/ArActSiteBusPurPG
  
  OA Framework version: 12.1.3
  
  
  Revenue OAKeyFlexBean = (OAKeyFlexBean) oawebbean.findIndexedChildRecursive ("reveFF");
  oapagecontext.writeDiagnostics(this,"revenue***"+revenue,2); I can see the object printed in diagnostics which means I've got the handle of it
  revenue.setRequired ("yes");
  
  Freight OAKeyFlexBean = (OAKeyFlexBean) oawebbean.findIndexedChildRecursive ("freiFF");
  oapagecontext.writeDiagnostics(this,"freight***"+freight,2);
  freight.setRequired ("yes");
  
  Any help for the resolution of this problem will be greatly appreciated.
  
  Thanks in advance.

  I've worked on similar requirements, to account revenues required field in the site use the creation page.

  ' Public Sub processFormRequest (pageContext OAPageContext, OAWebBean webBean)
  {
  If (pageContext.getParameter ("apply")! = null)
  {
  OAApplicationModule am = pageContext.getApplicationModule (webBean);
  OAViewObject = accountsViewObject
  (OAViewObject) am.findViewObject ("ArBusPurAllVO");

  If (accountsViewObject! = null)
  {
  OARow line = accountsViewObject.getCurrentRow ((OARow));
  If (row.getAttribute ("GlIdRev") == null: row.getAttribute("GlIdRev").equals(""))

  {
  throw new OAException ("Please enter a revenue account for the Bill at the location.", OAException.ERROR);
  }
  }
  }
  super.processFormRequest (pageContext, webBean);
  }
  }

• When you make a new folder in the "Page Bookmarked" pop up, it won't let me name the folder.

  Usually, when you to bookmark a page, by selecting the drop down next to the 'file' box, you can press "New folder", and it create a new folder and allow you to name it.

  Now, it often does nothing when I press the button, and when it does not have a new folder, it won't let me name. I have to go to my favorites, right click and go to properties and then change the name from there. It is very annoying.

  You use Sync to synchronize bookmarks?

  • https://support.Mozilla.org/KB/what-Firefox-sync

  If you then try to disconnect from sync to see if it has effect.

  Start Firefox in Safe Mode to check if one of the extensions (Firefox/tools > Modules > Extensions) or if hardware acceleration is the cause of the problem.

  • Put yourself in the DEFAULT theme: Firefox/tools > Modules > appearance
  • Do NOT click on the reset button on the startup window Mode safe
  • https://support.Mozilla.org/KB/safe+mode
  • https://support.Mozilla.org/KB/troubleshooting+extensions+and+themes

• automatically adjust the bottom of the page and the footer?

  I have a site of muse with a sheet of master with the crumpled footer to header. In my home page, I have a few photos and text. For some reason when I'm viewing the page in Safari, there are about 5 inches of space between the text and the page footer. How can I get this footer and page down to adapt to what's on the page?

  Thank you

  Without seeing the page, it's hard to say, but the problem is most likely either in the in the settings of your template page. Make sure that the "Sticky Footer" is unchecked and that your minimum page size is adjusted to where you need.

  Perhaps you have an invisible element on the page. Make a Select/all on the page and/or the model and make sure that you don't have any empty page elements, forcing the page to the bottom.

  If none of these fix the question can provide you a link?

• Dreamweaver CC fluid grid divs do not stretch to cover 100% of the screen

  Hello

  I do another sensible provision using DW CC and I came across a problem.

  Design colored divs that spans the entire page to 100% with a background color and borders.

  I already did the design upwards as a layout width fixed to get the color codes etc. and that works well, with colors that covers the screen.

  Now, I'm putiing design in DW CC using checkerboard to fluid and there is a white border on the Web site.

  I can't work on how to get rid of this. Here are excerpts from my two lots of CSS stylesheets, one for a presentation grid fixed and one for a structure reactive

  CSS FIXED WIDTH

  body, td, th {}

  do-family: Calibri;

  do-size: 14px;

  Color: #000;

  }

  {body

  left margin: 0px;

  margin-top: 0px;

  margin-right: 0px;

  margin-bottom: 0px;

  }

  * / The wrapper header spans the entire screen no matter what size and does not have a white border on the left and the right

  {#headerWrapper}

  background-color: #000;

  height: 101px;

  Width: 100%;

  margin-right: auto;

  left margin: auto;

  border-bottom-width: 2px;

  border-bottom-style: solid;

  border-bottom-color: #BDDB6D;

  }

  FLUID GRID CSS

  The fluid layout grid CSS has the following in it:

  {.fluid}

  Clear: both;

  left margin: 0;

  Width: 100%;

  float: left;

  display: block;

  }

  {.fluidList}

  list-style: none;

  list-style-image: none;

  margin: 0;

  padding: 0;

  }

  / * Mobile layout: 480px and below. */

  {.gridContainer}

  left margin: auto;

  margin-right: auto;

  Width: 86,45%;

  padding-left: 2,275%;

  padding-right: 2,275%;

  Clear: none;

  float: none;

  }

  {#div1}

  }

  * / This header wrapper extends through the presentation of the grid only and has a white border on the left and the right

  {#headerWrapper}

  Max-width: 100%;

  height: 101px;

  background-color: #000;

  border-bottom-width: 2px;

  border-bottom-style: solid;

  border-bottom-color: #BDDB6D;

  }

  What do I need add to the fluid grid layout to make the headerWrapper div span the screen, no matter what width?

  What should I put in the grid CSS transmissions so that he can do that?

  Thanks in advance!

  I did it! I can't believe. The code I used is followed. The bar divs set color and at the border through the entire page and the wrapper divs to contain content in the various bars across the page.

  I must say that DW CC fluid grids are much more stable to work with and it can take a lot of coding by hand now. This is a great improvement on when I tried to use grids of fluid on a project last year.

  IN THE SECTION MULTIMEDIA PHONE REQUEST

  {.gridContainer}

  left margin: auto;

  margin-right: auto;

  Width: 100%;

  padding-left: 0;

  padding-right: 0;

  Clear: none;

  float: none;

  }

  {#headerBar}

  background-color: #000;

  min-height: 101px;

  border-bottom-width: 2px;

  border-bottom-style: solid;

  border-bottom-color: #BDDB6D;

  padding-top: 2.735px;

  }

  {#headerWrapper}

  Width: 86,45%;

  padding-left: 2,275%;

  padding-right: 2,275%;

  Clear: none;

  float: none;

  left margin: auto;

  }

  {#menuAnimationBar}

  background-color: #B7B7B7;

  height: 293px;

  border-bottom-width: 2px;

  border-bottom-style: solid;

  border-bottom-color: #BDDB6D;

  background-image:-webkit-gradient (linear, 50.00% 0.00%, 50.00% 100.00%, color-stop (0%, rgba (153,153,153,1.00)), color-stop (100%, rgba (192,192,192,1.00)));

  background-image:-webkit-linear-gradient(270deg,rgba(153,153,153,1.00) 0%,rgba(192,192,192,1.00) 100%);

  background-image: linear-gradient (180deg, rgba (153,153,153,1.00) 0%,rgba(192,192,192,1.00) 100%);

  display: none;

  }

  {#contentBar}

  background-color: #F8FCF1;

  min-height: 200px;

  background-image:-webkit-gradient (linear, 50.00% 0.00%, 50.00% 100.00%, color-stop (0%, rgba (245,251,234,1.00)), color-stop (100%, rgba (251,253,247,1.00)));

  background-image:-webkit-linear-gradient(270deg,rgba(245,251,234,1.00) 0%,rgba(251,253,247,1.00) 100%);

  background-image: linear-gradient (180deg, rgba (245,251,234,1.00) 0%,rgba(251,253,247,1.00) 100%);

  }

  {#contentWrapper}

  Width: 86,45%;

  padding-left: 2,275%;

  padding-right: 2,275%;

  Clear: none;

  float: none;

  left margin: auto;

  }

  {#socialMediaBar}

  background-color: #000;

  min-height: 83px;

  border-top-width: 2px;

  border-bottom-width: 2px;

  border-top-style: solid;

  border-bottom-style: solid;

  border-bottom-color: #BDDB6D;

  border-bottom-color: #BDDB6D;

  }

  {#socialMediaWrapper}

  color: #FFF;

  Width: 86,45%;

  padding-left: 2,275%;

  padding-right: 2,275%;

  Clear: none;

  float: none;

  left margin: auto;

  padding-top: 2,275%;

  }

  {#footerBar}

  color: #FFF;

  background-color: #AAAAAA;

  min-height: 176px;

  background-image:-webkit-gradient (linear, 50.00% 0.00%, 50.00% 100.00%, color-stop (0%, rgba (153,153,153,1.00)), color-stop (100%, rgba (185,185,185,1.00)));

  background-image:-webkit-linear-gradient(270deg,rgba(153,153,153,1.00) 0%,rgba(185,185,185,1.00) 100%);

  background-image: linear-gradient (180deg, rgba (153,153,153,1.00) 0%,rgba(185,185,185,1.00) 100%);

  }

  {#footerWrapper}

  Width: 86,45%;

  padding-left: 2,275%;

  padding-right: 2,275%;

  Clear: none;

  float: none;

  left margin: auto;

  }

  IN THE MULTIMEDIA TABLET QUERY SECTION

  {.gridContainer}

  Width: 100%;

  padding-left: 0%;

  padding-right: 0%;

  Clear: none;

  float: none;

  left margin: auto;

  }

  {#div1}

  }

  {#headerBar}

  }

  {#headerWrapper}

  Width: 90.675%;

  padding-left: 1.1625%;

  padding-right: 1.1625%;

  Clear: none;

  float: none;

  left margin: auto;

  }

  {#menuAnimationBar}

  display: none;

  }

  {#contentBar}

  }

  {#contentWrapper}

  Width: 90.675%;

  padding-left: 1.1625%;

  padding-right: 1.1625%;

  Clear: none;

  float: none;

  left margin: auto;

  }

  {#socialMediaBar}

  }

  {#socialMediaWrapper}

  Width: 90.675%;

  padding-left: 1.1625%;

  padding-right: 1.1625%;

  Clear: none;

  float: none;

  left margin: auto;

  }

  {#footerBar}

  }

  {#footerWrapper}

  Width: 90.675%;

  padding-left: 1.1625%;

  padding-right: 1.1625%;

  Clear: none;

  float: none;

  left margin: auto;

  }

  {#menuAnimationWrapper}

  }

  IN THE PC MEDIA QUERY SECTION

  {.gridContainer}

  Width: 100%;

  Max-width: 1920px;

  padding-left: 0%;

  padding-right: 0%;

  margin: auto;

  Clear: none;

  float: none;

  left margin: auto;

  }

  {#headerBar}

  }

  {#headerWrapper}

  Width: 88.5%;

  Max-width: 1232px;

  padding-left: 0.75%;

  padding-right: 0.75%;

  margin: auto;

  Clear: none;

  float: none;

  left margin: auto;

  }

  {#menuAnimationBar}

  display: block;

  }

  {#contentBar}

  }

  {#contentWrapper}

  Width: 88.5%;

  Max-width: 1232px;

  padding-left: 0.75%;

  padding-right: 0.75%;

  margin: auto;

  Clear: none;

  float: none;

  left margin: auto;

  }

  {#socialMediaBar}

  }

  {#socialMediaWrapper}

  Width: 88.5%;

  Max-width: 1232px;

  padding-left: 0.75%;

  padding-right: 0.75%;

  margin: auto;

  Clear: none;

  float: none;

  left margin: auto;

  }

  {#footerBar}

  }

  {#footerWrapper}

  Width: 88.5%;

  Max-width: 1232px;

  padding-left: 0.75%;

  padding-right: 0.75%;

  margin: auto;

  Clear: none;

  float: none;

  left margin: auto;

  }

  {#menuAnimationWrapper}

  Width: 88.5%;

  height: 293px;

  Max-width: 1232px;

  padding-left: 0.75%;

  padding-right: 0.75%;

  margin: auto;

  Clear: none;

  float: none;

  left margin: auto;

  }

• DW CC sensitive site, Image problem, how can I get my image to stretch in the width 100% in the div container (wrapper)?

  I have a HomeHeader (upper Div) homebody (body div), 4 low box divs (not important). Im trying to get my homebody (body div) to stretch 100% width on the container as My HomeHeader (upper div) did. The two albums div and body divs are IMAGE backgrounds!

  

  Now, I did something interesting that is, changed my homebody (body div) of the background color in the Red image background and it streched:

  

  I don't want a solid color! I want the image that I designed in photoshop CC. I don't understand how I could get my div image to stretch, but not the image of the body. Help, please!

  PS. This is a copy of my CSS

  ICWOT:

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

  {.gridContainer}

  Width: 100%;

  margin: 0;

  Clear: none;

  padding: 0;

  float: none;

  }

  {#HomeHeader}

  background-image: url (.. / WebDesign-assets/images/TopFooterH.jpg);

  height: 61px;

  }

  {#HomeBody}

  background-image: url (.. / WebDesign-assets/images/BodyH.jpg);

  height: 653px;

  }

  {#Home1AboutBlock}

  Width: 24.1758%;

  }

  {#Home2ProjectsBlock}

  Width: 24.1758%;

  margin left: 1.0989 per cent;

  Clear: none;

  }

  {#Home3StoreBlock3}

  margin left: 1.0989 per cent;

  Clear: none;

  Width: 24.1758%;

  height: auto;

  }

  {#Home4ContactBlock4}

  Width: 24.1758%;

  margin left: 1.0989 per cent;

  Clear: none;

  }

  {.zeroMargin_desktop}

  left margin: 0;

  }

  {.hide_desktop}

  display: none;

  }

  }

  Please help once again!

  You realize that will only look great on your screen, right?    Background images don't re - adapt to windows.  So for people on larger or smaller screens, it won't have the same experience.

  You could significantly reduce bandwidth by using a smaller picture with this method.

  Resizable background image full Page

  Nancy O.

• Please can someone help me fix this code? Its doesn't seem to make the div you want to stick to the top of the page: the code is shown below.

  I need help, what is the problem with the code below:

  <! DOCTYPE html >

  < html >

  < head >

  < title > < / title >

  < style >

  *{

  margin: 0;

  padding: 0;

  }

  {#sticky}

  Width: 600px;

  background-color: #000;

  color: #fff;

  do-size: 2em;

  border-radius: 0.5ex;

  padding-top: 10px;

  padding-bottom: 10px;

  padding-left: 3px;

  }

  {#sticky.stick}

  position: fixed;

  top: 0;

  z index: 10000;

  }

  {#sticky-anchor}

  height: 0;

  }

  {#wrapper}

  Width: 600px;

  Auto margin: 0;

  padding: 0;

  }

  #header {}

  Width: 600px;

  height: 140px;

  Auto margin: 0;

  }

  #content {}

  Display: block;

  height: 800px;

  Width: 600px;

  background-color: pink;

  }

  < / style >

  < / head >

  < body >

  < script >

  function sticky_relocate() {}

  var window_top = $(window) .scrollTop ();

  var div_top is $('#sticky-anchor').offset () .top;.

  If (window_top > div_top) {}

  $('#sticky').addClass ('stick');

  } else {}

  $('#sticky').removeClass ('stick');

  }

  }

  {$(function()}

  $(window) .scroll (sticky_relocate);

  sticky_relocate();

  });

  < /script >

  < div id = 'wrapper' >

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

  < div id = "post-it-anchor" > < / div >

  < div id = "sticky" > it will stay at the top of the page < / div >

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

  < / div >

  < / body >

  < / html >

  Nothing wrong (other than a few problems regarding coding practices). You simply need to link to the top of the jQuery library.

• Why the height of the page t automatically fill up to 100% in the browser?

  Anyone know why the page fills the height in the browser? I have both header and footer, and I want the height of the whole page to fit the contents of the body. But he keeps extending up to the page to full height even if the minimum height is set to 500 px and the content of the body is much less than that. The result is that the footer displays at the bottom and just above a large empty white I want to get rid of...

  
  

  I don't know about the option 'fill' (is that the right name for it? I use a Swedish version), but I Don t want to have a large area of below filling which makes the scroll bar appear.

  
  

  Any hint of what the cause? Help please!

  Hello

  Try to disable the sticky footer:

  Muse > file menu > Site Properties > Layout > Sticky Footer

  

  Hope this helps,

  Sonam

• How can I make sure that all of the content of an accordion is set to 100% width?

  Hello

  I have an accordion, and it is set to 100% width. Unfortunately the text box doesn't let me drag the edges to 100%. That's why when my page is browsed the title in the menu accordion is centered but the text when you open the content pane is not.

  Help, please

  P.S. I tried to make the pixel area 1 larger text, but does knock my width of 100%, which is set up for the accordion.

  (please see Contact Us)

  Just thought I'd put a note here.

  I found the identification number to the Inspector and it targets by adding to the head of the page metadata:

  Page properties

  Metadata

  HTML code for

  
  

  I was then able to center the text block :-)

• How to make the content of the DIV on the page that I'm going to fade out?

  I'm trying to figure out how to make the content of a DIV on the page I'm clicking away from fade. I know how to do the Next page load with a fade in. So I'm half there (I guess).  WiX has many designs which use for this purpose. Here is a link to an example:

  http://www.wix.com/website-template/view/HTML/633?originUrl=http%3A%2f%2Fwww.wix.com & numbe r page = 1 & = 1 position-in-page

  This is the code I use to make a DIV load with a melted in:

  I have add this CSS code in the div I want to apply the fade in effect to:

  Animation: fadein 2s;

  -moz-animation: fadein 2s; / * Firefox * /.

  -webkit-animation: fadein 2s; / * Safari and Chrome * /.

  -o - animation: fadein 2s; / * Opera * /.

  And I add this additional code to the CSS stylesheet:

  }

  fadein {} @keyframes

  of {}

  opacity: 0;

  }

  to {}

  opacity: 1;

  }

  }

  @-moz - keyframes fadein {/ * Firefox * /}

  of {}

  opacity: 0;

  }

  to {}

  opacity: 1;

  }

  }

  @-webkit - keyframes fadein {/ * Safari and Chrome * /}

  of {}

  opacity: 0;

  }

  to {}

  opacity: 1;

  }

  }

  @-o - keyframes fadein {/ * opera * /}

  of {}

  opacity: 0;

  }

  to {}

  opacity: 1;

  }

  }

  Tutorial with demo & downloadable files here: http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

• How Center any page in the web browser and make the tag div main to kiss the top of the page?

  Okay, so I got in trouble with a couple of things. One, when I look at the my page in live view, it is perfectly centered, but when I open in a web browser, it is on the left of the page. Two, I can not get the main div to kiss the top of the page. Here is the code, so I hope someone can help out me. = P

  < ! 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 > sheet of copper through < /title >

  < style type = "text/css" >

  .main {}

  Width: 980px;

  }

  {.bannerarea}

  height: 200px;

  Width: 950px;

  }

  < / style >

  < style type = "text/css" >

  {#apDiv1}

  position: absolute;

  Width: 200px;

  height: 115px;

  z-index: 1;

  left: 74px;

  }

  {#apDiv2}

  position: absolute;

  Width: 360px;

  height: 226px;

  z-index: 1;

  left: 95px;

  top: 136px;

  }

  {#apDiv3}

  position: absolute;

  Width: 445px;

  height: 297px;

  z-index: 1;

  left: 519px;

  top: 299px;

  }

  < / style >

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

  < style type = "text/css" >

  {#apDiv4}

  position: absolute;

  Width: 447px;

  height: 300px;

  z-index: 2;

  left: 517px;

  top: 628px;

  }

  {#apDiv5}

  position: absolute;

  Width: 479px;

  height: 292px;

  z index: 3;

  left: 33px;

  top: 291px;

  }

  {#apDiv6}

  position: absolute;

  Width: 950px;

  height: 242px;

  z index: 4;

  }

  {#apDiv7}

  position: absolute;

  Width: 480px;

  height: 300px;

  z-index: 5;

  left: 34px;

  top: 627px;

  }

  < / style >

  < / head >

  < body >

  < div class = 'hand' >

  < div id = "apDiv6" > < img src = "CLC/features" width = "950" height = "250" alt = "BanniΦre" / > < / div > "

  < p > < / p >

  < p > < / p >

  < div class = "text" >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < p > < / p >

  < div id = "apDiv5" >

  < h3 > < strong > copper crossing sheet < facilities > is an acre 23 complex dedicated to the care of animals. We have created a warm and friendly destination for lovers of pets. Weather you have a cat or Canary, a dog or a frog, we can help you take care of your pet. On campus, you will find: < / h3 >

  < p > < a href = "f" > < strong > Animal Kingdom Veterinary Hospital < facilities > < /a > - their staff compassionate and is specialized in the care of domestic and exotic animals. < /p > medical

  < p > < a href = "f" > < strong > Comfort Bed & amp; Bath < facilities > < /a > a great pet pension for dogs, cats, birds, reptiles and small mammals which also offers grooming of animals. < /p >

  < p > < a href = "thereatureconservancy.org" > < strong > The Creature Conservancy < facilities > < /a > - an organization non-profit unique offering various educational programs with exotic animals, summer camps, visits and a variety of animals on display. "" < /p >

  < p > < strong > < a href = "f" > dogwood Veterinary Referral Center < /a > < / strong >-a centerthat one full service surgery and Imaging provides exceptional care for pets with neurological problems. < /p >

  < / div >

  < p > < / p >

  < p > < / p >

  < p >

  < div id = "apDiv4" >

  " < iframe width ="444"height ="250"frameborder ="0"scrolling =" "marginheight ="0"marginWidth ="0"src =" http://maps.google.com/maps?f=q & source = s_q & hl = in & geocode = & q = 4940 + ann + rd + ann arbor-saline + + a ROOR + MID + 48103 & aq = & sll = 42.250821, - 83.756397 & DPA = 0.004813, 0.008476 & ie = UTF8 & hq = & hnear = 4940 + nn + Arbor-saline + Rd, + Ann + tree + Charter + canton + Michigan + 48108 & he's = 42.21421, - 83.797332 & spn = 0.004815,0.008476 & t = h & z = 14 & output = embed "> < / iframe > .

  < p > 4940 Ann Arbor Saline RD Ann Arbor MI 48103 < /p >

  < / div >

  < br / >

  < p > < / p >

  < / blockquote >

  < / div >

  < p > < / p >

  < blockquote >

  < p > < / p >

  < blockquote >

  < p > < / p >

  < / blockquote >

  < / blockquote >

  < div id = "apDiv3" > < img src = "CLC/arialCLC.jpg" width = "444" height = "300" / > < / div > "

  < p > < / p >

  "< div id ="apDiv7"> < img src ="... / downloads/copy of PICT0029. Width of "JPG" = "444" height = "300" / > < / div > "

  < / div >

  < / body >

  < / html >

  Thank you! (The site is not live yet, it's that I would have just posted the URL.)

  Add:

  .main {}

  Width: 980px;

  Auto margin: 0;

  position: relative;
  

  }

• How can I make a div expand like adding content?

  I do base a CSS layout in Dreamweaver CS4. The page is a column with the headers, footers and a large area in the Middle for the most part, any statement as div tags in a global div that contains everything.

  I set the height of the div global container to 'auto '. The height of the main content div also has the value 'auto '. I thought it would make the main content area develop if necessary, when the text and images are placed in it - that would happen with a layout based on a table. Everything else was going to stay in the right relative position - the divs below the main content div would simply move down as the main content div expands.

  Unfortunately, it doesn't seem to work. As the main content div moves down, it pushes everything below the road more or less randomly. The lower part of the layout break like the divs below the main content div are tossed out of position.

  Is there some code, I need to keep it all together? Maybe somewhere under the #container #maincontent in the code below?

  Thank you for the ideas!

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

  <!--

  {body

  do-family: Arial, Helvetica, without serif.

  do-size: 100%;

  background-color: #333;

  text-align: left;

  padding-top: 10px;

  padding-right: 0px;

  padding-bottom: 10px;

  padding-left: 0px;

  margin: 0px;

  }

  #container {}

  do-family: Arial, Helvetica, without serif.

  do-size: 100%;

  background-color: #000;

  text-align: left;

  padding: 0px;

  Width: 960px;

  margin-top: 0px;

  margin-right: auto;

  margin-bottom: 20px;

  left margin: auto;

  border: 4px solid #FFF;

  height: auto;

  }

  #container #header {}

  background-color: #FFF;

  height: 268px.

  Width: 940px;

  padding-top: 2px;

  padding-right: 0px;

  padding-bottom: 0px;

  padding-left: 20px;

  }

  #container #header2 {}

  do-family: Arial, Helvetica, without serif.

  make-weight: bold;

  background-color: #CCC;

  height: 50px;

  Width: 920px;

  border-top-width: 0px;

  border-right-width: 0px;

  border-bottom-width: 4px;

  border-left-width: 0px;

  border-top-style: none;

  border-bottom-color: #FFF;

  border-right-color: #FFF;

  border-bottom-color: #FFF;

  border-left-color: #FFF;

  padding-top: 10px;

  padding-right: 20px;

  padding-bottom: 10px;

  padding-left: 20px;

  border-bottom-style: solid;

  }

  {#header2 #navigationbox #container

  float: left;

  height: 50px;

  Width: 600px;

  }

  {#header2 #buttonbox #container

  }

  #container #maincontent {}

  do-family: Arial, Helvetica, without serif.

  color: #FFF;

  background-color: #000;

  text-align: left;

  Width: 920px;

  do-size: 16px;

  make-style: normal;

  line-height: normal;

  make-weight: normal;

  padding: 20px;

  Clear: both;

  height: auto;

  }

  #container #footer {}

  do-family: Arial, Helvetica, without serif.

  background-color: #CCC;

  text-align: center;

  padding: 10px;

  border-top-width: 4px;

  border-top-style: solid;

  border-bottom-color: #FFF;

  border-right-color: #FFF;

  border-bottom-color: #FFF;

  border-left-color: #FFF;

  }

  {#topadbox}

  background-color: #CCC;

  }

  #container #footer2 {}

  background-color: #CCC;

  height: 90px;

  Width: 920px;

  border-top-width: 4px;

  border-top-style: solid;

  border-bottom-color: #FFF;

  do-family: Verdana, Geneva, without serif.

  do-size: 18px;

  line-height: 24 PX.

  make-weight: bold;

  padding-top: 20px;

  padding-right: 20px;

  padding-bottom: 10px;

  padding-left: 20px;

  }

  #container #header #masthead {}

  background-color: #FFF;

  text-align: left;

  height: 260px;

  Width: 550px;

  padding-left: 15px;

  float: left;

  }

  #container #header #topadbox {}

  float: right;

  }

  #container #header #topadbox {}

  background-color: #FFF;

  border: 4px solid #666;

  float: right;

  height: 250px;

  Width: 300px;

  Clear: none;

  }

  #container #header #topadbox {}

  padding: 0px;

  float: right;

  height: 250px;

  Width: 300px;

  background-color: #FFF;

  border-top-width: 5px;

  border-right-width: 20px;

  border-bottom-width: 5px;

  border-left-width: 20px;

  border-top-style: solid;

  border-right-style: solid;

  border-bottom-style: solid;

  border-left-style: solid;

  border-bottom-color: #CCC;

  border-right-color: #CCC;

  border-bottom-color: #CCC;

  border-left-color: #CCC;

  margin-top: 0px;

  right margin: 2px;

  margin-bottom: 0px;

  left margin: 0px;

  }

  #container #footer #bannerbox {}

  margin: auto;

  height: 100px;

  Width: 728px;

  }

  {#searchbox}

  height: 50px;

  Width: 860px;

  border-top-width: 4px;

  border-top-style: solid;

  border-bottom-color: #FFF;

  background-color: #CCC;

  padding-right: 70px;

  padding-left: 30px;

  padding-top: 20px;

  padding-bottom: 10px;

  do-family: Arial, Helvetica, without serif.

  do-size: 16px;

  }

  {#footer2 #creditsbox #container

  }

  #container #footer2 {}

  padding-top: 20px;

  padding-right: 20px;

  padding-bottom: 20px;

  padding-left: 20px;

  }

  {#header2 #buttonbox #container

  float: right;

  height: 50px;

  Width: 300px;

  do-family: Arial, Helvetica, without serif.

  do-size: 16px;

  line-height: 20px;

  make-weight: bold;

  Color: #000;

  padding: 4px;

  }

  {#header2 #navigationbox #container

  do-family: Arial, Helvetica, without serif.

  do-size: 16px;

  line-height: 25px;

  make-weight: bold;

  Color: #000;

  }

  a: link {}

  Color: #F00;

  }

  a: visited {}

  color: #F0F;

  }

  a: active {}

  color: #F90;

  make-weight: bold;

  make-style: italic;

  do-size: 16px;

  }

  {#footer2 #creditsbox #container

  float: left;

  height: 90px;

  Width: 260px;

  do-family: Arial, Helvetica, without serif.

  do-size: 12px;

  line-height: normal;

  make-weight: normal;

  }

  {#footer2 #creativecommonsbox #container

  float: left;

  height: 90px;

  Width: 520px;

  left margin: 20px;

  do-size: 12px;

  do-family: Arial, Helvetica, without serif.

  line-height: 14px;

  make-weight: normal;

  }

  {#footer2 #backtotopbox #container

  float: left;

  height: 90px;

  Width: 100px;

  left margin: 20px;

  }

  {#footer2 #backtotopbox #container

  do-family: Arial, Helvetica, without serif.

  do-size: 14px;

  make-weight: bold;

  }

  #container #maincontent {}

  height: auto;

  }

  ->

  < / style >

  < / head >

  < body >

  < div id = "container" > < a name = 'Top' id = 'Top' > < / a >

  < div id = "header" >

  < div id = "topadbox" > < script type = "text/javascript" > <!--

  google_ad_client = "pub-9536785785834220";

  / * Top of page of advertising * /.

  google_ad_slot = "9886597060";

  google_ad_width = 300;

  google_ad_height = 250;

  ->

  < /script >

  < script type = "text/javascript".

  src = » http://pagead2.googlesyndication.com/pagead/show_ads.js ">

  < /script > < / div >

  < div id = "generic" > < / div >

  < / div >

  < div id = "tete2" >

  < div id = "navigationbox" >

  < center >

  " < a href =" http://www.nemesis.to "> Home < /a > | "< a href ="http://www.nemesis.to/live.htm"> Live < /a > | "< a href ="http://www.nemesis.to/records.htm"> CD/Vinyl/Downloads < /a > | "< a href ="http://www.nemesis.to/records.htm"> Photos < /a > | "< a href ="http://www.nemesis.to/int.htm"> Interviews < /a > < br / > ".

  " < a href =" http://www.nemesis.to/archive.htm "> archive < /a > | .

  " < a href =" http://www.nemesis.to/about.htm "> information and Contacts < /a > | "< a href ="http://www.nemesis.to/links.htm"> < /a > link .

  < /Center >

  < / div >

  < div id = "buttonbox" > < img src = "images_graphics/linkbuttons_4piece.jpg" width = "171" height = "40" hspace = "65" hspace = "4" border = "0" align = "left" well = "#Map" / > "

  < name of the map 'Map' id = 'Card' = >

  " < area shape ="rect"coords ="1,2,42,41"href =" http://nemesis-to-go.livejournal.com "alt ="LiveJournal"/ > "

  " < area shape ="rect"coords ="45,1,86,45"href =" https://Twitter.com/uncle_n "alt ="Twitter"/ > "

  " < area shape ="rect"coords ="90,1,128,38"href =" http://www.mixcloud.com/misadventuresinmodernmusic/ " />

  " < area shape ="rect"coords ="132,2,171,39"href =" https://www.Facebook.com/misadventures.in.modern.music "alt ="Facebook"/ > "

  < / map >

  < / div >

  < / div >

  < div id = "maincontent" > < / div >

  < div id = "footer" >

  < div id = "bannerbox" >

  < p >

  < script type = "text/javascript" > <!--

  google_ad_client = "pub-9536785785834220";

  / * Bottom of page ad * /.

  google_ad_slot = "0254538778";

  google_ad_width = 728;

  google_ad_height = 90;

  ->

  < /script >

  < script type = "text/javascript".

  src=" http://pagead2.googlesyndication.com/pagead/show_ads.js ">

  < /script >

  < /p >

  < / div >

  < / div >

  " < div id ="searchbox"> < form method ="get"action =" http://www.Google.com/search ">

  < div style = "border: 0px solid black; padding: 0px; Width: auto; do-size: 16px; ">

  < table border = "0" align = "center" cellpadding = "2" >

  < b >

  < td width = "291" align = "right" valign = "middle" > < input type = "text" name = "q" size = "35".

  MaxLength = "255" value = "" / > < table > "

  < td width = "102" align = "right" valign = "middle" > < input type = "submit" value = "Google search" / > < table >

  < td width = "247" align = "center" valign = "middle" > < input type = "checkbox" name = "sitesearch".

  value = "nemesis.to" checked / > "

  < span class = "searchtext" > Nemesis to go search for </span > < table >

  < /tr >

  < /table >

  < / div >

  < / form > < / div >

  < div id = "footer2" >

  " < div id ="creditsbox"> Page credits: Photos and construction by < a href =" http://www.nemesis.to/about.htm "> < strong > Michael Johnson < facilities > < /a >." "Nemesis logo by < a href ="http://www. "> < strong > Antony Johnston < facilities > < /a >. «Version red N < strong > < a href = "http://www.rimmell.com" > Mark Rimmell < /a > < / strong >.» < / div >

  < div id = "creativecommonsbox" > < img src = "images_graphics/creativecommonslogo.png" width = "88" height = "31" hspace = "4" hspace = "4" align = "left" "/ > words and photos in Nemesis To Go by Michael Johnson are allowed under < a href =" " http://www.creativecommons.org/licences "> < strong > CC < facilities > < /a >." «You can copy and distribute this material or derivations of it, provided that give you a credit to Michael Johnson and a link to < strong > < a href = "http://www.nemesis.to" > Nemesis To Go < /a > < / strong >.» When using materials from other sources, copyright remains with the original owners. All rights to the name "Nemesis To Go" and the "n" logo are preserved. < / div >

  < div id = "backtotopbox" > < img src = "images_graphics/arrer_sml_up.gif" alt = "Back To Top" width = "40" height = "40" hspace = "4" hspace = "4" align = "left" / > < a href = "#Top" > top < /a > < / div > "

  < / div >

  < / div >

  < / body >

  < / html >

  Height of the DIV is determined solely by the amount of content it contains.  It is best to avoid using explicit height values that this limits the amount of content can contain a div tag  If necessary to reveal a background image, use height min instead of the height.

  If your #container floated div inside and develops to the content, add the following property to the CSS of your #container.

  #container {}

  overflow: hidden;  / * for floating containment * /.

  }

  For more information on why this works, see the link below:

  http://colinaarts.com/articles/the-magic-of-overflow-hidden/

  Nancy O.

• Centering and 100% in the browser display do not work.

  I believe I followed the instructions that have been posted previously and I did some reading on a centering page and display a page at 100% but I can't seem to make it work properly. I might have a conflict or something can help you.

  
  I designed a website that was 1000px wide and now they want changed (they want a picture of both sides of the page) - so, rather than completely change around and trying to mess with the areas and stamps and all that fun stuff. I decided to leave the #container (which is were all the data for the site and the model is applied to other pages, the size will change - the height will change, but the width should be 100px). who was there and then completely wrapp in another div tag I called #master_container, then I inserted 2 div more tags and placed images of each side as desired. I followed the instructions above (because now the site is so large display in a browser is diffacult). I need the site to do 3 things.

  -i it must display centered on the page so that any browser, it is displayed in or what screen size it is seen on this subject is at the center of the screen.

  -I also that it fits on the screen of the person using it so that they see the whole page as one and it is not a huge space empty on one side - now he is on the right.

  -If you know how to do the two images on the side scrolling of the screen that the person scrolls down the page

  HERE IS MY SITE XHTML CODE:

  < ! DO. TYPE 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" >

  < / style >

  "" < link href = "... / Unicorn_main_layout_template_oldform - CopytestCSS.css" rel = "stylesheet" type = "text/css" / >

  < / head >

  < body >

  < div id = "Master_container" >

  "" < div id = "ancestor_left" > < img src = "... / Images/ancestor_cropped.jpg" width = '659' height = '1003' alt = "ancestor right" / > < / div >

  < div class = "container" > b < / div >

  "" < div id = "ancestor_right" > < img src = "... / Images/ancestor_cropped.jpg" width = "659" height = "1003" alt = "ancestor_right" / > < / div >

  < / div >

  < / body >

  < / html >

  HERE'S THE STYLESHEET CSS ATTACHED TO THE MODEL I AM APPLYING TO ALL PAGES OF THE SITE.

  @charset "utf-8";

  / * CSS document * /.

  {#body}

  text-align: center;

  margin: 0;

  padding: 0;

  Width: 100%;

  height: 100%;

  }

  {#Master_container}

  Width: 2300px;

  margin: 0 auto;

  text-align: left;

  margin-right: auto;

  margin-left: auto;

  }

  {#ancestor_left}

  float: left;

  Width: 660px;

  }

  . Container {}

  height: auto;

  Width: 1000px;

  }

  {#ancestor_right}

  Width: 660px;

  float: right;

  }

  THANK YOU SO MUCH FOR YOUR HELP!

  First page, try this:

  {#Containter}

  do-family: "Comic Sans MS", 'Cooper Std Black', 'Copperplate Gothic Bold. "

  font size: xx-large.

  background-color: #909;

  Width: 1000px;

  text-align: center;

  Auto margin: 0;  / * with width, it is centered * /.

  }

  Nancy O.