Div resizing went

Similar Questions

• Open full screen div resizing in CS6

  I have Dreamweaver CS6 and am new to Dreamweaver (and web design in general, although I did graphics for decades). I try to have a background that resizes with the browser window resizing AND still is 220 pixels down from the top of the screen with responses (that is to say, I want the image to fill the screen, always horizontally not distort and always be 220 pixels high). In a first time I tried this, the most logical way, as a definition of "cover" image, background image and the definition of the 'Top' to 220px. It does exactly what I wanted... in Safari. But in Firefox, the picture was flush with the top of the screen. After trying various things so he can work in Firefox as well, I've found a workaround: I took the background image and placed in a div to "Left: 0px" and "Top: 220px. This displays as I want only it in Safari and Firefox... except that the image is no longer resizes: it remains static and gets cut off when the user reduced their size of browser window. So my question (finally!): is there a way in Dreamweaver CS6 to have the image jpg inside a div always fill out the horizonatlly of the screen resizes with versicles with resizing the browser window and always be at a distance set by the top (in this case 220px)? Thanks for any help!

  No APDivs required.  Simply insert image in database % layout and add margin-top.

  {body

  Width: 100%;

  }

  {#your_img}

  Max-width: 100%;

  margin-top: 200px;

  }

  HTML: (by removing the height & width attributes)

  

  NOTE: is a slight distortion occurs whenever you re - scaling of images.  There are no that you can do about it.

  Nancy O.

• Strip tip that displays the coordinates while moving (delta) and size when resizing went

  I've been using LabVIEW since version 3.  I used to use it full time, but only part-time and the.

  I have a Win XP Professional computer running LabVIEW 7Express, and I have a Win 7 Home Premium computer running Labview 2013.

  I have always used and relied on small pop - up (Advanced band, ToolTips) which indicates the coordinates when you move an object on the screen: delta 4, 19 for example; and shows the new size when resizing: 4, 19 for example.  It works my Win XP Professional LabVIEW 7Express machine but NOT on my Win 7 Home Premium LabVIEW 2013 machine (and I need to work on this machine).

  I think there are 3 places to search for:

  1) LabVIEW, tools, Options, block: see the tip terminal strips - "this option is enabled on both machines.

  (2) LabVIEW.ini - "I can find similar entries on both machines.

  3) strips of MS Windows Advanced treatment - "not sure about it, Win 7 Home Premium is not easy to use with this and web sites I've found seem to point to key in regedit which seem not to be there.

  Thanks for any help!

  Nevermind, I figured it.

  My Win 7 machine is dual-boot.  I have a SSD LabVIEW 2013, on the other hand I have LabVIEW 2012.  I looked on the side of 2012.  I noticed that there are 3 places that you can treat with strips of tip under LabVIEW Options: front panel, block diagram AND UNDER environment.  Who has been disabled on my side LabVIEW 2013.  I fixed it.

  I think I have disabled all 3 places when I was trying to stop one of the most annoying things in LabVIEW.  When interacting with case and sequence stacked Structures, that terrible pop-up ads (Advanced band) would appear and cover the value of the Structures or Structures of stacked sequence case who I was interacting with blocking my view.

• I have to divs side by side, I want to have the same height

  Hello

  I have divs side by side, I want to have the same height no matter if more content is in div 1 or div 2. I want it to be sensitive so when the window resizes or if the user is on mobile or tablet, it still works. I tried the columns wrong but with the shapes of background / I want that just, it will not work with this technique. I also tried to use the hack 1000px-1000px fill however this cut of the lower part of the div that is unacceptable because the divs have a RADIUS on the corners. He comes to the jquery that I tried and it runs in full screen mode, but when the content inside the div resizing is eliminated. Here is the jquery:

  < script src = "jquery - 1.10.2.min.js" > < / script >

  < script >

  $(document) .ready (function () {}

  {$(window) .resize (function ()}

  resizeDivs();

  });

  var resizeDivs = function() {}

  var highestCol = Math.max ($('.discription').height (), $('.targetinfo').height ());

  $('.discription').height (highestCol);

  $('.targetinfo').height (highestCol);

  var highestCol = Math.max ($('.discription1').height (), $('.targetinfo1').height ());

  $('.discription1').height (highestCol);

  $('.targetinfo1').height (highestCol);

  }

  resizeDivs();

  });

  < /script >

  

  Please let me know if you have a decent jquery or css solution. So far I have it works in a sensitive environment. Thank you

  If you use fluid grid Layouts, none of these methods do not work.  I think the best you can do is determine the min-height required for desktop computers & tablets.  Mobile devices do not need min-height because these divisions will stack up.

  To illustrate by an example.

  http://ALT-Web.com/FluidGrid/Fluid2.html

  The corresponding CSS code:

  / Special rules for tablets * /.

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

  .gridContainer > div {min-height: 255px ;}}

  }

  / * Special rules that apply to workstations * /.

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

  .gridContainer > div {min-height: 325px ;}}

  }

  Nancy O.

• The sensible scaling of composition edge animating in Dreamweaver checkerboard to fluid

  I've created an animation on board animate and placed in the header of a checkerboard fluid to Dreamweaver. I put it in a div in itself so it can be disabled in the mobile layout. When I test the layout in a browser, the composition of edge animate changes adapted to the size of the window, but the height of the div that it's actually not. The width of the div changes with the width of the window, but the div height remains the same. Because the height of the div does not change, as the animation responds and resizes it leaves a big empty space between the bottom of the animation and the content that follows it in the page.

  The div itself doesn't have a rule for its height that are associated with. It seems to me that the div gets its height from the original size of the html object that is the animation. I tried to remove the rule of height of the object, but then the div at the bottom of the animation clips, and yet once, it is not resize the window.

  Is it possible that I can get the height of the div resize to the size of the animation as it changes?

  This should help you.

  Using compositions dashboard animate reactive in Dreamweaver «Adobe Edge animate Team Blog»

  Nancy O.

• How can I fix a big problem in my PS5?

  Hello

  something strange happened with my PS5. Before that resizing went very well. If I go to Image-> image-> size, change the resolution to 300 and for example at 8 x 10 size and click Ok. Before this weird when problem I 'ok' that information leaders showed 8 inches x 10 inches, but now

  It shows 2000 x 3000, which is pixel inches not as I want. What's past and how to fix it?

  Thanks for the help!

  Right-click on the rule, and select pixels.

  

  MTSTUNER

• resize the image in a div with css

  Hi I have a slideshow and I load image dynamically with this code when I click on the thumb

  ($(sym.lookupSelector ("image1container")) .css ("background-image', ' url(images/ALBUM_01/album1_1.jpg)');

  All good, but what an opportunity of css, I use to Center and resize the image in a div to 100% height and 100% width of the div?

  It's my solution and it function

  I have attached the external stylesheet in compositionReady;

  $("_ _").appendTo ("#Stage");

  myStyle. CSS is subsequently

  @charset "utf-8";

  / * CSS document * /.

  HTML, body, #container {}

  height: 100%;

  Width: 100%;

  }

  IMG {}

  Max-width: 100%;

  height: auto;

  Width: auto\9; / * ie8 * /.

  }

  div {}

  background-repeat: repeat no.;

  background-size: 100% 100%;

  }

  on the edge of adobe in the rectangle that contains the image I put in class 'div '.

• Make paste of DIV 1 place on your Web site, but move them when resizing the window.

  Well, it's a really long, weird question.

  Let me explain with a video.

  https://www.YouTube.com/watch?v=lugJRijYcZc & feature = youtu.be

  As you can see, the Twitter account is not position, but this is not the point. I would like to keep it in the background container that you see on the right, while remaining in the position. But when I Center the background image, it is resized as you see in the video. But if I do not use background-position: center 0px; tag that the background does not remain in the centre...

  How can I fix?

  Thank you!

  Daniel

  You have two containers on your page with the same ID value (container). You can do that - you are only allowed to use a given once on any page ID value.

  Correct it and then wrap the contents of the first div #container in an envelope with a fixed width to 1050px CSS and auto margin: 0. who should do it.

• Why I can't resize my divs

  Hello

  I have taken a few sites CS5 wit, but know I have cs6 with fluid grid and I can't find how to resize. "

  I saw a few tutorials, but the divs don't resize. See http://www.ifacilityservices.nl/naamloos-4.html

  I just did the first Navigation with a nav sup (another problem).

  Before that I could resize, but when I saw in the see is a not resize?

  Where I'm going wrong?

  Thanks for your help!

  Carla

  Seems to be very well resizing on the web

  (I didn't have never been concerned with how it looks to any display of DW)

  Submenu does not not in Firefox; Maybe you can fix this

  http://validator.w3.org/check?URI=http%3A%2f%2Fwww.ifacilityservices.nl%2Fnaamloos-4.html& charset = % 28detect + automatically 29% & doctype = Inline & group = 0

• Get div to auto may not resize with the browser window

  I'm trying to get a div with a paragraph of text will resize automatically when the browser window is resized.

  I've seen what happens automatically, when I had no style applied to the < div > tag, but because I have my content centered using a < div > Interior inside a container fixed-width < div >, the inner div is now fixed so despite not having a fixed width.

  Here is the page I'm trying to settle (the box with the text is the < div > inner circle in question):

  http://beta.deltsig.com/about.html

  Here's a test page showing what I want the text to do when the window is resized:

  http://beta.deltsig.com/test.html

  And here's the CSS of the inner divs and container:

  {#div-container}

  Width: 768px;

  text-align: center;

  left margin: auto;

  margin-right: auto;

  }

  .div-redtint-flexsize {}

  padding: 1px 20px 20px 20px;

  text-align: left;

  background-color: #f3e4e4;

  -moz-box-shadow: 0 0 7px rgba (0, 0, 0,. 7);

  -webkit-box-shadow: 0 0 7px rgba (0, 0, 0,. 7);

  box-shadow: 0 0 7px rgba (0, 0, 0,. 7);

  }

  I tried to add different styles of width to the CSS, but nothing had no effect.

  It's a style that I have to change in the container div?

  You cannot have two meanings.  Your page is fixed (px or em based) or liquid (% based).

  A container fixed width parent does everything inside it fixed.

  If you want to try to work with liquid layouts, go to file > New > blank page > HTML > layouts and select one of the liquid patterns from the 3rd Panel.  Creating success.

  Nancy O.

• Missing divs fluid grid resize handles

  Hi, I followed the tutorials of page layout fluid grid step by step, but every time I insert a div tag (class: fluid) I don't get the sizing on the div. handles the div hover highlights in red, onclick the Red edge Gets a blue inner border. Resize it, duplicate, delete buttons, I can't create a layout. Any ideas?

  Win7 Home premium. Latest update of cloud creation.

  Thank you

  I have the SOLUTION!  Here is what happened...

  In the fluid - grid.css you created first...

  Find the class which is more you allows to have the handles (ie. the handles have disappeared from my .pageHeader class)

  Add width: 100%; on the inside of the hooks.

  {.pageHeader}

  Width: 100%

  }

  Save the file and go back to Design mode.  You have the rear handles!

• Strange scale flash when resizing the div

  Hi all!

  Since the new version of Flash Player, I had some problems resizing of the scene.

  The scenario:

  I have a flash inside an html < div > tag application. The html div tag has width and height controlled by jQuery. In flash, I have

  this.stage.scaleMode = StageScaleMode.NO_SCALE;

  OK, no news so far. The content of the flash changes every 3 or 4 seconds. Because there are other elements on the page in the swf file, we decided to use the scrollbar of the browser to the page to roll. Then, if content is flash on height of 1200px, swf appealed ExternalInterface and JQuery will resive the DIV html at this height, so that the user can scroll the page and see the content.

  It works very well, but that's the problem. When jQuery resize the div, the app flash "blink" and "squeeze" to many horrible ways until he is seated at the right size. It is "adjusted" for a few seconds. It is very fast, but since this happens several times a minute, turn things ugly, "buggy".

  I made a video of the screen and catch some images in a GIF image, so you can see what is happening. The image can be see here:

  http://ImageShack.us/a/img109/4255/flashreposit.gif It has 4 frames. The first is the initial state. When I put the HTML DIV around half of its height, flash goes through 2 strange scales, until coming to the 4th last final image, with the correct aspect and a correct report.

  Does anyone know how to prevent this? This is really boring and use an internal roll flash is not an option on this project. Before the flash 11 I could freely manipulate the html div (which owns flash) without intermediate distortion.

  Thanks in advance.

  Pedro Paulo Almeida

  Brazil

  Flash has a purpose which has simply changed. While it was perfectly possible to do most of what jQuery seems to effortlessly before, nobody was ready to take on the enormous task of differences between browsers with scripting. Only with the market standards browser is that it becomes possible. Flash has made this gap for a long time.

  But that has never been the main purpose of flash. Flash is about the simple animations or sohpisticated, as spicy as you like. People who use it misused does not mean that it is the fault of the Flash more than WebKits bad scaling of the Flash plugin is. It's the fault of WebKits, no Flash.

  With 3D on the rise, I feel Flash will finally debut as the favorite for the web content high-end multimedia engine. The difference between HTML and Flash should be the difference between YouTube and IMAX. Point being, you should be able to tell the difference, otherwise the author didn't use it for the purpose of the right.

  You are welcome and if you all together can you please mark it answered so we can filter the questions without answer and good luck!

• keep a div under content when resizing

  I have a page where the image is resized and the SHIFT when you resize your browser

  http://toddheymandirector.com/reel/index_newlook_gallery2222aa.html

  How can I keep the div social (facebook tweet google buttons) to stay in below any resizing - at the moment that they will cover it up if your browser window is small

  You can also dismantle them in a separate div and use a lower z-index / superior. Lower z-index keeps the content below other divs. Most high not vice versa.

• Div moves down when the window is resized

  Hello

  Here's my problem: when I resize my browser window the main div is scaled up to a certain point when it just fell below all other content.

  How can I stop this from happening?  I have div the upper and lower the value of width of the car, so I can't understand what goes wrong.

  Here is the site if you want to see for yourself: www.hondovfd.org

  Here's a code in my template file:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "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" />
  <!-- TemplateBeginEditable name="Title" -->
  <title>Untitled Document</title>
  <!-- TemplateEndEditable -->
  <meta name="description" content="Hondo Fire and Rescue serves the Arroyo Hondo and Canada Village areas of Santa Fe County, NM." />
  <meta name="keywords" content="hondo, hondo fire, hondo vfd, hondo fire department, santa fe county fire department, santa fe county, volunteer fire department, hondo volunteer fire department" />
  <link href="../stylesheet1.css" type="text/css" rel="stylesheet" />
  <!--[if IE]>
  <style type="text/css"> 
  #mainContent, #sidebar1 { zoom: 1;}
  </style>
  <![endif]-->
  <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
  <link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
  </head>
  
  <body class="thrColLiqHdr">
  
  <div id="container">
   <div id="header"></div>
    <div id="sidebar1">
    <h3>Navigation : </h3>
    <ul id="MenuBar1" class="MenuBarVertical">
    <li><a href="/index.php">Home</a></li>
  <li><a href="/support.php">Support Hondo</a></li>
    <li><a class="MenuBarItemSubmenu" href="#">Information Menu</a>
      <ul>
        <li><a href="/people.php">Our People</a></li>
        <li><a href="http://www.google.com/maps/ms?ie=UTF8&hl=en&msa=0&msid=101620713606637979698.00045b6ead4ab4ea70b78&z=11" target="_blank">Response Area</a></li>
        <li><a href="/medical.php">Medical</a></li>
        <li><a href="/apparatus.php">Apparatus</a></li>
        <li><a href="/training.php">Training</a></li>
        <li><a href="/volunteer.php">Volunteer</a></li>
        <li><a href="/statistics.php">Statistics</a></li>
        <li><a href="/patchtrading.php">Patch Trading</a></li>
      </ul>
    </li>
    <li><a href="/gallery2/main.php">Photo Gallery</a></li>
    <li><a href="/calendar.php">Calendar</a></li>
    <li><a href="/news.php">Blog/News</a></li>
    <li><a href="/links.php">Links</a></li>
    <li><a href="/contact.php">Contact Us</a></li>
  </ul>
  <br />
  <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <span class="lefttext">
  <input type="hidden" name="cmd" value="_s-xclick">
  <input type="hidden" name="hosted_button_id" value="8567201">
  <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" align="middle" />
  <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" align="absmiddle" >
  </img></input></input>
    </span>
  </form>
  <span class="lefttext"><br />
  </span>
  <center>
    <span class="lefttext"><a href="http://www.facebook.com/pages/Santa-Fe-NM/Hondo-Volunteer-Fire-Department/74284233488" target="_blank" class="lefttext">Hondo VFD on Facebook</a></span>
  </center> 
    <!-- end #sidebar1 --></div>
    <div id="sidebar2">  
      <p><a href="/membersonly/login.php">Log In</a> | <a href="/membersonly/logout.php">Log Out</a><br />
      <a href="/membersonly/register.php">Register</a></p>
      <p><img src="/firedanger/Moderate.jpg" width="127" height="100" /></p>
      <p>Call Statistics as of:<br />
      <?php
  $myFile = "/home/hondovf1/public_html/membersonly/month.txt";
  $fh = fopen($myFile, 'r');
  $theData = fread($fh, filesize($myFile));
  fclose($fh);
  echo $theData;
  ?><?php
  $myFile = "/home/hondovf1/public_html/membersonly/date.txt";
  $fh = fopen($myFile, 'r');
  $theData = fread($fh, filesize($myFile));
  fclose($fh);
  echo $theData;
  ?></p>
    <table width="90%" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
      <td width="60%">EMS Calls</td>
      <td width="40%"><?php
  $myFile = "/home/hondovf1/public_html/membersonly/emscalls.txt";
  $fh = fopen($myFile, 'r');
  $theData = fread($fh, filesize($myFile));
  fclose($fh);
  echo $theData;
  ?></td>
    </tr>
    <tr>
      <td>Fire Calls</td>
      <td><?php
  $myFile = "/home/hondovf1/public_html/membersonly/firecalls.txt";
  $fh = fopen($myFile, 'r');
  $theData = fread($fh, filesize($myFile));
  fclose($fh);
  echo $theData;
  ?></td>
    </tr>
      <tr>
      <td>Other Calls</td>
      <td><?php
  $myFile = "/home/hondovf1/public_html/membersonly/othercalls.txt";
  $fh = fopen($myFile, 'r');
  $theData = fread($fh, filesize($myFile));
  fclose($fh);
  echo $theData;
  ?></td>
    </tr>
  </table>
    
    <hr />
         <!-- Begin Google Search Element -->
      <div id="cse" style="width: 100%;">Loading</div>
  <script src="http://www.google.com/jsapi" type="text/javascript"></script>
  <script type="text/javascript">
    google.load('search', '1', {language : 'en'});
    google.setOnLoadCallback(function(){
      var googleNumSearchResults = 5;
       var customSearchControl = new google.search.CustomSearchControl('002969495656254731547:rhlwwedx2hi');
      customSearchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);
      customSearchControl.draw('cse');
    }, true);
  </script>
  <link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
         <!-- End Google Search Element -->
  </div>
    <!-- end #sidebar2 -->
  
    <div id="mainContent">
    <div class="topleft"></div><div class="top"><div class="topright"></div></div>
    <div class="wrap">
  <!-- TemplateBeginEditable name="Main Content" -->
      <table width="95%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td height="47" class="h2">Header</td>
        </tr>
        <tr>
          <td>Text Goes Here!</td>
        </tr>
      </table>
    <!-- TemplateEndEditable -->
    </div><br class="clearfloat" />
  <div class="bottomleft"></div><div class="bottom"><div class="bottomright"></div></div></div>
  </div>
  </div>
  </div>
    
       <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
    <div id="footer">
      <p align="center">&copy; Copyright 2009 Hondo Volunteer Fire Department | <a href="mailto:[email protected]">Contact Us</a><a href="http://www.legalhelpers.com/chapter-13-bankruptcy/chapter13.html"></a><br />Hosting provided by <a href="http://studiox.com/" target="_blank">Studio X</a></p>
    <!-- end #footer --></div>
  <!-- end #container --></div>
  <script type="text/javascript">
  <!--
  var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
  //-->
  </script>
  <?php include_once("/home/hondovf1/public_html/analyticstracking.php"); ?>
  </body>
  </html>
  
  

  And here is my CSS file:

  body {
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 12px;
       width: auto;
       color: #333333;
       margin-top: 0;
       margin-right: 0;
       margin-bottom: 0;
       margin-left: 0;
       padding-top: 0;
       padding-right: 0;
       padding-bottom: 0;
       padding-left: 0;
       background-image: url(images/main-right.png);
       background-repeat: repeat-y;
  }
  .thrColLiqHdr #container {
       width: 95%; /* this overrides the text-align: center on the body element. */
       margin-top: 0;
       margin-right: auto;
       margin-bottom: 0;
       margin-left: auto;
       height: auto;
       background-image: url(/images/halftone1.png);
  } 
  .thrColLiqHdr #header {
       padding: 0 10px;
       height: 100px;/* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
       background-image: url(images/header.jpg);
       background-repeat: no-repeat;
       background-position:center;
       border-bottom-width: 5px;
       border-bottom-style: solid;
       border-bottom-color: #000;
  }  
  .thrColLiqHdr #navbar {
       height:45px;
  } 
  .thrColLiqHdr #header h1 {
       margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
       padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
  }
  
  /* Tips for sidebars:
  1. Since we are working in percentages, it's best not to use side padding on the sidebars. It will be added to the width for standards compliant browsers creating an unknown actual width. 
  2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".thrColLiqHdr #sidebar1 p" rule.
  3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.
  */
  .thrColLiqHdr #sidebar1 {
       float: left; /* this element must precede in the source order any element you would like it be positioned next to */
       width: 15%; /* top and bottom padding create visual space within this div  */
       height: 100%;
       padding-top: 15px;
       padding-right: 0;
       padding-bottom: 15px;
       padding-left: 0;
       min-width: 150px;
       
  }
  .thrColLiqHdr #sidebar2 {
       float: right; /* this element must precede in the source order any element you would like it be positioned next to */
       width: 15%; /* top and bottom padding create visual space within this div */
       padding-top: 0px;
       padding-right: 0;
       padding-bottom: 15px;
       padding-left: 0;
       min-width: 150px;
  }
  .thrColLiqHdr #sidebar3 {
       float: right; /* this element must precede in the source order any element you would like it be positioned next to */
       width: 275px; /* top and bottom padding create visual space within this div */
       padding-top: 0px;
       padding-right: 0;
       padding-bottom: 15px;
       padding-left: 0;
       min-width: 150px;
  }
  .thrColLiqHdr #sidebar1 p, .thrColLiqHdr #sidebar1 h3, .thrColLiqHdr #sidebar2 p, .thrColLiqHdr #sidebar2 h3 {
       margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
       margin-right: 10px;
       text-align: center;
  }
  
  /* Tips for mainContent:
  1. the space between the mainContent and sidebars is created with the left and right margins on the mainContent div.
  2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 300px or smaller (this includes images).
  3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
  */
  .thrColLiqHdr #mainContent {
       margin-top: 10px;
       margin-bottom: 10px;
       float: left;
       width: 65%;
       background-image: url(images/main-right.png);
       background-repeat: repeat-y;
       background-position: right;
  }
       
  
  .h2 {
       color: #B4241B;
       font-size: 20px;
       letter-spacing: -2px;
       font-weight: 100;
       font-family: Verdana, Arial, Helvetica, sans-serif;
       padding-top: 0px;
       padding-right: 0px;
       padding-bottom: 0px;
       padding-left: 0px;
       line-height: normal;
  }
  
  .thrColLiqHdr #footer {
       text-align: center;
       color: #666;
       font-size: 11px;
       padding: 10px;
       background: #f7f7f7;
       border-top: 1px solid #aaa;
       width: auto;
  } 
  .thrColLiqHdr #footer p {
       margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
       padding: 2px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
  }
  
  /* Miscellaneous classes for reuse */
  .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
       float: right;
       margin-left: 8px;
  }
  .fltlft { /* this class can be used to float an element left in your page The floated element must precede the element it should be next to on the page. */
       float: left;
       margin-right: 8px;
  }
  .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain its child floats */
       clear:both;
      height:0;
      font-size: 1px;
      line-height: 0px;
  }
  .topleft {
       height:22px;
       width:19px;
       background-image:url(images/top-left.png);
       float: left;
  }
  .top {
       height:23px;
       background-image: url(images/top.png);
       background-repeat:repeat-x;
       width: auto;
  }
  .topright {
       height:22px;
       width:28px;
       background-image:url(images/top-right.png);
       float: right;
  }
  .textarea{
  }
  .wrap{
       text-align: justify;
       padding-right: 40px;
       padding-left: 40px;
       background-repeat: repeat-y;
       float:left;
       background-image: url(images/main-left.png);
       width: auto;
       clear: left;
  }
  .wrapright {
       width:4px;
       background-image:url(images/main-right.png);
       background-repeat: repeat-y;
       float: right;
  }
  .bottomleft {
       height:22px;
       width:19px;
       background-image:url(images/bottom-left.png);
       float: left;
       clear: left;
  }
  .bottom {
       height:23px;
       background-image: url(images/bottom.png);
       background-repeat:repeat-x;
       width: auto;
  }
  .bottomright {
       height:22px;
       width:27px;
       background-image:url(images/bottom-right.png);
       float: right;
  }
  
  

  It's one of the problems with the liquid (%) according to. In your default.css file, replace the top 2o selection rules with the following:

  {body
  do-family: Verdana, Arial, Helvetica, without serif.
  do-size: 12px;
  Color: #333;
  margin: 0;

  padding: 0;
  background: url(images/main-right.png) repeat-y;
  }
  .thrColLiqHdr #container {}
  Width: 95%;

  min-width: 870px; / * prevent collapsing page * /.
  Auto margin: 0;
  background: url(/images/halftone1.png);
  }

  Nancy O.
  ALT-Web Design & Publishing
  Web | Graphics | Print | Media specialists
  http://ALT-Web.com/
  http://Twitter.com/ALTWEB
  http://ALT-Web.blogspot.com

• Urgent - how to set shaded bg for resizing div?

  Hi all

  Apologies for the "urgent" query first - desperately trying to end a four-month project that needs to be done at the end of today, and my developer is related to the last minute, coding issues and is not a CSS pro!

  Here's my question:

  We have built a widget using CSS, so a div is a main container, which will be distributed through the http://www.clearspring.com/ platform. At the present time, it was just a simple white bg, but I want to present a simple vertical bg shaded - goes from grey to white at the top.

  However, the widget will be resizable vertically through the Clearspring platform, so the solution must take into account for this.

  I did some reading autour but don't understand how to do it, and if it must be done through an image, or can be done entirely using CSS.

  Can anyone help please? I get usually frustrated with people when they ask to be fed info, but here I am in a panic, asking exactly that!

  Thanks in advance!

  Aspiring Div

  Thank you very much for the response quick and fantastic - really, really appreciated!

  You are welcome

  The "horizontal" bit count when the widget is resized vertically?

  Repeats the image horizontally, hence the reason why you use a background-color rule - giving it a color that corresponds to the lower part of the image, while any height container, it is not 'break' between image and color.