Width of the div on screen

I have a big div (used as container) and a few smaller that div. smaller divs have defined width, and width of the container is based on the sum of the small divs. Is it possible to define a div so it could automatically auto trimming to match the screen resolution (div is the width of 1381px), or I have to redefine the image used for the div?

Use static images not resized to the width of the screen.  If they did, they would look deformed.

As a general rule, you choose a width of page is comfortably displayed by the majority of visitors to your site without having to use the horizontal scroll bar.

Fixed width (pixel-based), centered layouts are more comfortable to work with.  I think this is why many designers of web sites, use them.  The trick is to find the 'right' width for your target audience.  For most desktop and laptop users, 900 to 1100px is a good range.  For mobile devices, 320 to 480px.

Related link:

Google labs - the browser size

http://browsersize.googlelabs.com/

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

Tags: Dreamweaver

Similar Questions

  • Float div for the text wrapping around - without width of the div setting?

    Is it possible to get the text to wrap a div, without setting the width of the div?

    If I float my div to the left and specify its width it works, but if I take the value of the width then the text wrapping will stop.

    Thank you

    Set the floating

    width to Auto:

    Width: auto;

    Seems to work in Firefox, have'nt tested under IE. I usually put a fixed with.

  • Image - width of the div and the issue of scale. Help, please

    Hi guys,.

    I have a problem with the bgr image that I can't solve. Here's a tutorial (Web Animation and interactivity with Adobe Edge animate - Designers Fiesta 2012 - YouTube). On the beginning on this movie, this guy has all its items on stage. There is an image called Green who is a div itself (as opposed to a bgr image). Size of this div is much shorter than the image itself, and I don't know how he did it. Whenever I import my (wider) image on the stage, it shows that it is the actual width. I need to be inside the shorter div due later scaling '' operation. '' It's probably very easy to do, but I am new to AE so I would really appreciate your help because I'm stuck.

    Thank you very much

    Hello

    SYM. $("elementName") .css ({'background-size': '100% 100% ', 'background-repeat': 'no-repeat'});

    The above code will be "resize" or "resize" your image.

    You can write on the Board of compositionReady or on creationComplete Panel.

    elementName is the container: the div tag

    Now, how do I load an image inside a rectangle (tag div) using the code:

    SYM. $("Rectangle") .css ({' background-image': "url(images/picture.jpg)", 'background-size': '100% 100% ', 'background-repeat': 'no-repeat'});

  • width of the div are ignored

    Salvation;

    I'm settng a new site at http://www.marketingguy.biz/Wooddale/index.html . I put the div container to 850px. It works fine on my pc and 19 "wide and 22" screens. However when I saw today on a 22 '' wide screen the customer (using IE), it is more than 100% wide. all that it has been stretched and distorted.

    What I'm missing here?

    Thank you;

    Pat

    The client browser has mounted beyond the default Zoom.  Essentially Zoom gives browsers the ability to make elastic sites when you increase the size of text.  It is people use, and others do not.

    Add an IE conditional comment to your web pages.  Place it below the tag.

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

  • Pass elements according to the width of the browser & full screen video backgrounds

    Hallo,

    Possible how ist create with Adobe Muse, a Web site like this: http://www.bootsprinting.com

    Hi Chris!

    Just to translate the a little bit for others who may read this thread in the future... ;^)

    You can get this result within the Muse by creating a block of text that is 100% browser width (the width of the text block to align the edges left and right of the background of the browser are in drag Muse). Then take the sets of items that you want to have "reformatting" and each set of group. Then cut it, click an insertion point in the 100% width text block and paste. At this point, you have a group that behaves as a single character of text/letter. Repeat for each item you want "reformatting". You can use the text tool to select the entire document in the text frame and focus.

    If you can get a glimpse into the browser and close browser resizing adapt not enough groups that you pasted in the block of text on a single line, they will wrap to two, three, lines etc. and the text block, they'll grow in height, if necessary. You can also use paragraph withdrawals to adjust the width of the browser in which the packaging occurs.

  • How to change the width of the div CSS from the Center?

    Very basic question here, but I'm relatively new to DW. Please use the following url for reference: www.pawnpawn.com.

    Basically, I inherited the site of a previous Designer, who is no longer available. All I want to do is expand the container with our Services, how it works, etc so that contact us either on the same line with the rest. I know how to expand the container in CSS, but it grows to the right instead of from the Center. Here is the original code, without the new specification of width:

    #nav {}

    display: block;

    text-align: center;

    border-top: 1px solid #d3d3d3;

    border-bottom: 1px solid #d3d3d3;

    margin: auto 10px 0;

    min-height: 35px;

    Padding: 12px 0 0;

    If I add "width: 1100px;" he broadens it properly, but not Center. I tried "align: center;" but it was just a guess, and it does not work.

    Any help would be greatly appreciated, thanks in advance and sorry for this fundamental question!

    MP

    Line 24 of skeleton.css says

    . Container {position: relative;} Width: 960px; margin: 0 auto; padding: 0; }

    If you change the width, you will get what you want. The problem is that the entire page will be the new width. You then have the choice either redevelop available to suit or wrap the rest of the page in another container with the width of origin.

  • When I add a < br > tag for my album the div width gets wider (White right border)?

    Hi I have recived this code lightbox and I tried to change it because I want some image in the lightbox iframe icons, I did this by adding a < br > tag so that the photos was aligned under the < iframe >... but somehow the < br > tag adds that more width to the div as well on the right side of the light therapy device there is a white border or something? It is the background color, but why the tag < br > did this?

    Questions

    (1) how can I fix the width of the div when the < br > tag is added?

    (2) how can I add a second video to the light therapy device? so that when you press the 1 button a video if displays in the light table and when you press the key 2 a different video appear in the lightbox?

    Other issues it would be great if the answer

    (1) when I use this bootstrap code and I put the < iframe > with a width = '640' and a height = '480' and put in a class of favouring incorporate it or stir-reagent-point is not at all sensitive? what I can do here

    This is just an example to show what happens

    <! doctype html >

    < html >

    < head >

    < meta charset = "utf-8" >

    HTML < title > < /title >

    < meta name = "viewport" content = "width = device-width, original scale = 1" >

    " < script src =" https://AJAX.googleapis.com/AJAX/libs/jQuery/1.11.3/jQuery.min.js "> < / script > .

    < style type = "text/css" >

    {html, body

    height: 100%;

    padding: 0px;

    margin: 0px;

    }

    .page-overlay {}

    position: fixed;

    left: 0px;

    Top: 0px;

    height: 100%;

    Width: 100%;

    background: rgba (0, 0, 0, 0.5);

    }

    {.lightwrap}

    position: fixed;

    left: 0px;

    Top: 0px;

    height: 100%;

    Width: auto;

    left: 20%;

    }

    {.lightbox-content .lightwrap

    position: relative;

    top: 50%;

    transform: translateY(-50%);

    background-color: #fff;

    border: 3px solid black;

    text-align: center;

    }

    .a-lightbox {}

    text-align: right;

    padding: 0 20px 10px 0;

    margin: 0;

    }

    {.tmb}

    margin-left: 600px;

    margin-top: 50px;

    z-index: 1;

    }

    IFRAME {}

    border: none! important;

    }

    H1 {}

    padding-left: 50px;

    }

    @media only screen and (max-width: 768px) {}

    {.lightwrap}

    Width: 80%;

    left: 10%;

    }

    }

    < / style >

    < / head >

    < body >

    < div class = "page-overlay" >

    < div class = "lightwrap" >

    < div class = "lightbox-content" >

    " < iframe width ="640"height ="480"src =" https://www.YouTube.com/embed/Ofo4DbPFx-0?modestbranding=1 & iv_load_policy = 3 "allowfullscreen > < / iframe > "

    < here > <!-< - THE BREAK (Remove to see the difference) - >

    < class p 'close lightbox' = > [X] < /p >

    < / div >

    <!-lightbox-content-> end

    < / div >

    <! - end lightwrap - >

    < / div >

    <!-end of page-overlay->

    < button class = "tmb" > button 1 < / button >

    < br >

    < button class = 'tmb' > 2 key < / button >

    < / body >

    <! - latest jQuery core library - >

    " < script src =" http://code.jQuery.com/jQuery-latest.min.js "> < / script > .

    < script >

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

    $('.page-overlay,.lightwrap').hide ();

    $('.tmb').click (function () {}

    $('.page-overlay,.lightwrap').fadeIn ();

    });

    {$('.close-lightbox') ('cursor', 'pointer') .css ravishing (function ()}

    $('.page-overlay,.lightwrap').fadeOut ();

    });

    });

    < /script >

    < / body >

    < / html >

    demmacs wrote:

    The only problem I have with this gallery of images, is that some of my photos has a height that exceeds the screen... then I tried to change the height so that the img would be smaller, which worked just fine the only problem is that the width of the image do not match the width of the Gallery / modal... that looks a bit silly , and the modal / Gallery does not automatically adjust the width of the image :/

    Have you looked at:

    Example #12: Global galleries

    Bootstrap 3 Lightbox

  • Justify the Divs to the left and right of the page with the gaps between the two. Possible?

    I have 4 eponymous divs with different images and rollover Javascript on them, spread horizontally on my page effects.

    I'm trying to align their so there are gaps between each div, but NO space on the right and left side, so that they are tight to the edge. If I put a margin on the right side of 5px, for example, the div right hand still has a gap of 5px, otherwise he's going on the next line.

    Of course, I can make a new rule for the div of the right hand with no margin to the right, but this will make more complex Javascript code with perform effect hover on two types of divs.

    Is it possible to pin the divs to the left and right of the page with an 'auto' margins inbetween them?

    Untitled.jpg

    I found a solution in any case. I've adjusted to the width of the div so that they coincide closely each side. Then align the images (HTML) 'Left, middle, Hugo, right' so that they are tight against each side and have differences even between them. If all goes well, there is no flaws with this method, it seems to work pretty well.

  • fluid grid appears as his means to chrome and firefox, but in ie and safari the divs to display as a percentage of the entire screen, rather than as a percentage of the maximum width

    fluid grid appears as his means to chrome and firefox, but in ie and safari the divs to display as a percentage of the entire screen, rather than as a percentage of the maximum width

    I found the problem, thank you! nothing just a missing brace in the css that was causing the problem. the lines of code are numbered, and red when there is a problem (in cc at least 15). I could be the last to know that.

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

    Capture 1.PNG

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

    Capture 2.PNG

    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.

  • Images to the width of the screen

    Hello

    So I was wondering.

    When you look at all the tutorials, I see that people have photos/pictures and stuff even to the entire width of the screen?

    I did it with a large image in browserfill but I don't think it's the right way.

    Or how to do this with the slide show?

    Anyone with some intell?

    THX!

    Create a div with the square tool, stretch the handle to the edge of the fabric until you get the red line, and then use your image as background.

  • Why this problem with the width of the content does not not on smaller screens?

    When I test this page on 800 x 600 screens, the text of the article is cut on the right side. I thought that including min-width and max-width (w/IE6 hack) on the div that contains the text of the article would solve my problem, but it does not work. He doesn't even answer if I decrease my browser window on my screen of 1024 x 768. I was reading on, and try to use, "elastic design" but I obviously missed one of the steps. Can someone look at this with a look?

    The same thing happens if I use the zoom feature on my browser, but I don't know if I can handle this via CSS?

    http://www.keithpurtell.com/kthings/BJ-Cole.htm

    Elastic layouts use Ems.

    http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-CSS

    It is very different from (%) of fluid or semi-fluid (% + pixels) layouts.

    See the following example of a liquid header & footer with a fixed width content area.

    http://ALT-Web.com/templates/I-page-with-floats.shtml

    To prevent the header & footer to collapse too on the small windows, I added a min-width of 900px (semi-fluid).

    View source to see the code.  Of course on web devices with small windows, they see a horizontal scroll bar.  Which is expected.

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

  • How can I stop him adding that pop multiple bookmarks - up to fill the width of the screen?

    Whenever I try to add more than one link to my favourites, the pop-up that asks to add these links fills the width of the screen. It happens when I try to add all of the current tabs to Favorites, as well as when I use the add on, multi links. This makes it very difficult to add links because I have to go across the screen to find the ok button.

    I want to resize the pop up to a more manageable size. However, even though I should be able to resize, I can't figure out how. I also tried to minimize it, but the next time I tried to gather more bookmarks, it was back to the large size again.

    After validation, I tried once more to resize the pop-up. This time, it worked, and it seemed to stick. I think that I could have an add on (multi link). I thought I had tried resizing without which adds be on. I already knew that I was unable to use the search functions on different sites with the add on assets.

    So my problem has been resolved. Even if I don't know what caused the large size first.

  • How to display the width of the page or the big screen in firefox 11 automatically?

    How to display the width of the page or the big screen in firefox 11 automatically? I know how to Ctrl +, ctrl - and ctrl 0, but is there a way to define 11 firefox to automatically set the page viewing by default "page width" or full screen (F11 not)?
    Help, please. Thank you.

    You can use an extension to set a page zoom and the size of the default font on the web pages.

  • How to change the width of the image on the screen?

    How can I change the width of the images on my screen?  Everyone seems wide.  How depressing!

    It may be interesting to try to change the resolution of your screen.

    See the following...

Maybe you are looking for

  • The 64 GB of RAM upgrade option OWC

    Is it worth getting? Or 32 GB is plenty for most applications. Because I use 16GB on my work Mac Pro, I have a question the need all memory. I am considering getting an iMac 27 "new 5K will be just to get the bare minimum 8GB and then increase by OWC

  • Where can I find drivers for Satellite A100

    For some reason, I want to use an older version of the extra value package and bluetooth for a satellite A100 drivers but I can not find them. I spent every day looking and nothing. Pls help

  • Satelite L50 - A - 16 Q multidrive stoped working

    Hello My TSSTcorp multidrive on satelite L50A - 16 Q stop working. I think it happened after I upgraded my BIOS to v 1.6-1.8 v.Multidrive is visible in the system (windows 8.1 64B), but when I insert and its spin just for a second and stops disc (cdr

  • Custom report HTML Horizontal questions

    I have a few questions regarding the customization of HTML reports.  I'm looking to create a horizontal HTML report which seems identical to the horizontal report XML.  I could extract the relevant formatting of the document horizontal.xsl to enable

  • Windows 2008 Server R2 crash at classpnp.sys, had this error C000021a {fatal system error}

    Hi, I have tried several methods of recovery, but I still crash the server. I already tried safe mode and all the variants. I also try to start installation CD WinRE, I could check the partitions with diskpart and everything is ok, I try to use Start