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.

Tags: Dreamweaver

Similar Questions

  • How to create a navigation that resizes with the browser window

    Hello

    I came across this site http://www.smetana.net/. Inside the navigation components resizing with the change of size browser window, but the content remains the same size. I would like to build something similar for my site but I don't know how it's done. I'm willing to work, but I need a direction

    Thank you

    Ravital

    The following links are for the tutorials dealing with various aspects of the Flash design Adaptable fullscreen

    http://www.tutorio.com/Tutorial/liquid-Flash-layout

    http://www.gotoandlearn.com/play?ID=31

    http://www.developphp.com/Flash_tutorials/show_tutorial.php?TID=128

  • How to make the swf not resizing of the browser window?

    Hello

    Im trying to run my swf by going directly to my serer for example (www.example.com/mySWF.swf), later I fit using HTML or PHP, but Im wondering why he maintains have resized to the size of the window, I want to keep it the size of the swf file. In the publishing settings, I updated the game film dimension, and I put in scale n scale in the publication settings HTML tab, I'm doing something wrong or can you not stay its original size without emedding in html?

    Thank you

    Open your fla in flash.  publish a html and swf.  Open the html code in your browser.  any problem?

  • Exit button does not work in the browser window - 8 Captivate

    Someone at - he found a way to get the button leave on the 8 Captivate toolbar to work in the browser window?  I saw that he did not work in previous versions of Captivate. Is there a way to operate in 8 Captivate?  Alternatively, Adobe is working on a fix to get the button work?

    Yes, the close X works in 100% of the time. This is because the browser itself is just a window in the operating system. And you're dominating the window to close.

    And you might wonder why this works while the Exit button fails back. And it would be that it is a security issue. Safety prevents the window from closing because if a web site has been bad, he could actually trick you by change and quickly close the window and prevents you from browsing.

    It is easy to disable the button Exit. Just click Project > Skin Editor and erase the close box.

    See you soon... Rick

  • WebViewer scale with the browser window

    Is there a way to start the sensible scaling of the page layout in the WebViewer (proportionally scale upward and down depending on the size of the browser window)?

    Problem: folios portrait oriented are often grown under the window of the browser. You must scroll down to see the entire page. First scroll to the end of the page, then clicking to access the page following is confusing.

    Any ideas?

    Thank you

    Ulrich haha

    Here is a link to a devnet article describing how to develop embedded Web viewer to fit inside a web browser window, even if it is resized. Note that the embedded Web Viewer that is hosted on your web server in the Organization, rather than on the content hosted at contentviewer.adobe.com.

    Resizing of the integrated Web Viewer | Adobe Developer Connection

    Brian

  • Given that I've upgraded to 20.0, many keyboard shourtcuts do not work in the browser window: Ctrl + C, CTRL-V, etc.

    Many shortcut keys do not work in apps/sites in the browser window:

    CTRL-C, RIGHT/LEFT/TOP/DOWN-arrow, BACKSPACE (back), CTRL-D, CTRL-T, TAB to move from one field, etc.

    Using the menu commands such as COPY and PASTE work fine, while CTRL + C and Ctrl + V do not work.

    Real pain... (since the upgrade to V20 a few days ago)

    Following another suggestion here, I went in: config and disabled the "allowclipboardhelper.tabs.disabled" parameter set to "false". No change.

    I'm on Mac OSX 10.7.5 (Lion).

    Hello

    Thank you very much. And thanks for the quick response!

    I did as suggested and restarted several times enable or disable addons to isolate the one that generated the problem.

    The guilty were:

    Website and SEO analysis 1.1
    SEOpen 1.2

    Everything seems fine now.

    Take care.

  • Why anchor links and rollover buttons do not work with the browser of mountain lion osx?

    I designed a website a page with the muse of adobe. Anchor links and rollover buttons work with all other browsers, but not with osx mountain lion.

    http://www.beatcube.NET

    Can someone help me with this problem?

    Hello

    Please see this related post over here,

    ANCHORS IN SAFARI DOESN'T WORK!

    - http://forums.adobe.com/message/4685851#4685851

    Kind regards

    Abhishek Maurya

  • Page automatically resized to the browser window

    Hello!  I am loving the trend having sites which pick up just about any window and build one for a client.  When I view in the browser it looks great, but I want to ensure that the site automatically resized for each screen size of viewers so there is no scroll from left to right.  My site will adapt itself to the size of the screen of each spectator even though my page size is set larger, or is there a setting I need to change?

    What you ask is delicate design is not yet available in Muse... I would say joining the pre-release version of Muse.

  • Bottom of div container-model is not growing with the page

    Hello! Still fairly new to Dreamweaver.  I'll build a Web site using a template I made.  Theres a problem that I can't understand... I created my div 'container', and I use a style to add a background to that div.  I have all my other div inside the container. The problem that I am running is that with pages of different lengths, the background is not expand to fill the rest of the page.  As my content div (editable) expands with more content, and my footer div down as it should, just cuts background image where it ended in the model.  I created the background in photoshop, and I know for a fact that it is long enough to handle long pages.  It is not a question of the background image is not not long enough, it's just like the content div develops larger than the model, it does not fill the entire container div.

    So far my only solution is to ensure that the model is large enough to treat the longer page, and the shorter pages have just the extra space under the content.  I don't really want to do this, but I will if I have to.  I hope I was clear enough, if you need screenshots or just need to see the code I can post it.  Thank you in advance for your help!

    Justin

    Where the Shingle Springs?

    Change what you now have this:

    #container {}

    Width: 955px;

    min-height: 980px;

    Auto margin: 0;

    background: url(graphics/container_background.jpg) repeat-y;

    overflow: hidden; / * It's float containment * /.

    }

    Nancy O.

    ALT-Web Design & Publishing

    Web | Graphics | Print | Media specialists

    http://ALT-Web.com/

    http://Twitter.com/ALTWEB

  • My new 6 Iphone will not sync with the computer Windows 10

    Upgrade of the Iphone 4 to 6 s. old phone would sync/backup on Windows 10 PC but new phone will not. I tried many "bugs" found on the internet but nothing has worked so far.

    iOS 9.3.2 requires that you have 12.4 installed iTunes on your computer. If you do not, then it first day.

  • Widget does not now with the new Muse update from today

    Hello!

    My widget I bought MuseGrid "Lite and iFrame generator of widgets.

    Does not now with the new Muse update from today?

    So what to do?

    Many widgets from third party that reached deep into the code generated by Muse may not work with the changes that were necessary for the delicate design. You will need to contact the source of the widget for more information about an update of the widget version.

  • Full screen swf don't auto-size until the browser window is resized

    Hi all
    I posted my test here at http://www.urbanlinx.com/Test.swf.
    I have 4 MCs in the film. A header, content box (Center), footer and background image.
    When the browser is set to scale the background will scale proportionally to the widow and maintains its proportions.
    My problem: when the clip is loaded first, the background is not resized until the browser to resize manually by the user.
    Is there a code I can add that will check the size of the window prior to the loading of the movie?

    My code is attached.
    Stop();

    Stage.scaleMode = "noscale";
    Stage.Align = "tl";
    Stage.addListener({onResize:reposition});)


    function reposition() {}
    var header = _root.myHeader_mc;
    var bg = _root.image_mc;
    var content = _root.myContent_mc;
    var _root.myFooter_mc = footer;

    var NPOS;

    NPOS = getNewPosition (header);
    Header._x = nPos.x;
    Header._y = 0;

    NPOS = getNewPosition (content);
    Content._x = nPos.x;
    Content._y = nPos.y;

    NPOS = getNewPosition (bg);
    BG._x = nPos.x;
    BG._y = nPos.y;

    NPOS = getNewPosition (footer);
    footer._x = nPos.x;
    footer._y = Stage.height - footer._height;
    };

    function getNewPosition (mc) {}
    var agree = Math.floor ((Stage.width-mc._width) / 2);
    var = Math.floor ((Stage.height-mc._height) y / 2);
    return to {x: agree, y: Y};
    };

    reposition();

    Stage.scaleMode = "noScale";
    Automatic resizing
    stageListener = new Object();
    stageListener.onResize = function() {}
    backgroundResize (_root.image_mc);
    };
    Stage.addListener (stageListener);
    Background resizing
    function backgroundResize (image) {}
    var imageHeight = 400;
    var imageWidth = 700;
    var wRatio = Stage.width/imageWidth;
    var hRatio = Stage.height/imageHeight;
    Report higher
    If (wRatio > hRatio) {}
    var ratio = wRatio;
    } else {}
    var ratio = hRatio;
    }
    Resize
    If (Stage.width < = imageWidth & & Stage.height < = imageHeight) {}
    image._width = imageWidth;
    image._height = imageHeight;
    } else {}
    image._width = imageWidth * ratio;
    image._height = imageHeight * ratio;
    }
    }
    backgroundResize (_root.image_mc);

    Special thanks in advance.

    PS: If you know a way to do this with a cleaner code, help would be greatly appreciated... If it is already the correct code... Thanks to all the people in the community who taught me :)

    Well right after that a whole bunch of tracks and errors as much as I found the resize code is not like code reposition. Tried another code to reposition and its working great. It is also much smoother during resizing.

    Here is the code I use. Basically the bottom scales proportionally to the browser window, keeps its ratio and scales of the Center. If anyone has any advice on how to do it more easily if you please drop me a line.

  • SWF files that can evolve with the browser

    I downloaded a file with dreamweaver as a stand-alone window swf and it works fine.  How can I get the SWF to a scale large or small that the user must adapt to their browser window, large and small?  I would get the swf file as well as the browser window.  I posted this in dreamweaver, but I was told that it is a problem of action script.

    I found a simple solution, and I think that's what you're looking for.

    1. in Flash, go to file > publishing settings

    2. click on the HTML tab

    3. where is says Dimensions, select percentage

    4. Although it is probably by default, make sure that the width and height are both set to 100.

    5. click OK, then go to file > publish

    Now your film must evolve with the browser window.

    If you do not have Flash, you can simple work with this sample code below:


       
       
       
       
       
       
    align = "middle" allowScriptAccess = "sameDomain" allowFullScreen = "false" type = "application/x-shockwave-flash".
    pluginspage ="http://www.macromedia.com/go/getflashplayer" / > "

    Notice how the width and height are set to "100%"? That's all you need.

  • Want to F9M09UA #ABA: cursor will not appear on the browser

    My cursor will not appear when the browser window. I tried to restart, stop, update and everything I could find on the internet, but nothing has worked.

    Hello @hcl14,

    Thank you for visiting the Forums from the HP Support! The forums are a great place where you can find solutions for your problems, with the help of the community!

    I stumbled upon your post on the issue of cursor and wanted to help!

    How long have you had this problem?  Did you recently install updates?  This will happen in any internet browser, or just a particular browser?  Have you tried to perform a System Restore, to define the notebook to its previous working state?  Forward to your response.

    Please let me know if this information helps you solve the problem by marking this message as 'accept as Solution', this will help others easily find the information they seek.  In addition, by clicking on the Thumbs up below is a great way to say thank you!

    Have a great day!

  • The poster image not centering in the browser

    My image of the poster (for display in IE8) is not centered in the browser window. This is the view as aligned with a big gap to the right of the image on the left. How can I fix it?

    Or I could (which I just discovered) just take my OAM file and place it in a page of Muse, thus ensuring that everything goes as it should.

    Thanks for chiming in well!

Maybe you are looking for

  • ON THE DRIVE C FORMATTING...

    I have hp Pavilion g6 1200tx. On Windows 7... How format c only without deleting data and other readers I disk partition by shrink option...

  • Folio 13-2000 pc HP laptop sound works sometimes

    I had this problem a few times, but at random, it seems to set. I am a new COMPUTER technician, and I really am stumpted there. Computer: hp folio laptop 13-2000: all the drivers and software fully updated and 100% virus-free. I use the computer for

  • Permutation of type type 2007 T60 T60 1951's hard drive

    My main phone is a type of T60 1951. The backlight or the inverter is faulty (the screen has a red tint, and if I operate at whatever it is superior to the lowest brightness setting, the backlight will just cancel), and I need to send the machine for

  • Why Microsoft has Windows 7 XP Mode virtually unusable?

    Last year, the XP Mode would work fine.  As he finished the introduction it was a simple matter to upgrade the version of Internet Explorer to the next version upwards. Given the very announced end of support for Windows XP, this upgrade is not allow

  • Question for all developers, who participated in the offer of Playbook 2012

    Hello Ive got a question for all the developers who participated in the BB PB 2012 bid. Have you received E-mail about your shipping information (giving your address for shipping) immediately with enamel, that said, that your application has been app