Content in my div goes beyond the width

I have created a <div> to put my main content into.  I have given it a width of 810px.  However when I type a really long line of text into the <div> then it is not autowrapping the text to the next line when it goes beyond a width of 810 px.  What could be the problem?  It even creates a horizontal scroll bar when I preview the long line in a web browser.
Here is the CSS for my content <div>
#outerWrapper #contentWrapper #content_bigbody {
float: left;
width: 810px;
background-color: #FFFFFF;
min-height: 690px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border-radius:8px;
box-shadow:5px 5px 5px #6d6e70;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
margin-top: 15px;
margin-bottom: 15px;
margin-left: 15px;

This might happen if you are typing in a long string of characters without any spaces.
For best results, use some Lorem ipsum (dummy text) in your content areas.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id pellentesque lorem? In suscipit tellus mi, ut ornare nisi. Duis aliquam odio sit amet mi sagittis ut sollicitudin orci ultricies. Duis quam lectus, consectetur in luctus ut, ultricies vel risus? Morbi at nisl sodales metus porttitor hendrerit? Vestibulum in facilisis dui. Nulla ligula nibh, semper at consequat quis, dignissim eget mauris. Praesent quis tortor urna! Vivamus libero turpis, scelerisque vel placerat sit amet, fringilla eget diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut vel sodales augue. Sed tristique aliquam dolor, a hendrerit tortor lacinia eget. Nulla at accumsan orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis egestas massa fringilla nulla faucibus pharetra. Fusce scelerisque, ante sit amet tempus aliquet, ipsum lorem mollis sem, eget commodo turpis est ac lectus.
</p>
<p>
Suspendisse facilisis lobortis interdum. Vestibulum ultrices ultrices cursus. Cras scelerisque massa in lacus suscipit facilisis. Pellentesque auctor tempus orci, venenatis lacinia quam hendrerit eget. Nulla a tellus sem, sed varius purus. Proin luctus venenatis fringilla. Donec vitae sapien sit amet massa auctor condimentum.
</p>
<p>
Nam tristique elementum orci sed tempus. Donec viverra nibh sit amet magna consectetur sodales. Suspendisse sodales turpis vel leo venenatis vitae elementum dui eleifend. Etiam in neque vitae mauris pulvinar varius. Curabitur ut commodo tortor! Suspendisse sodales ante ac justo ultrices sagittis. Cras nisl tellus, adipiscing vel congue fermentum, euismod non nulla. Morbi tempor ornare augue at condimentum! Curabitur lorem dolor, consectetur et convallis.
</p>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists 
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/

Similar Messages

  • Extending div's across the width of the browser

    I wan't to extend some div's across the width of the browser, for eg: background colors. My container has a max width, so its not straightforward. If I remove that constraint, I lose the ability to demonstrate the max width behavior, which I don't want either.

    Yeah, the grid in reflow is really just a visual and snap aid, it doesn't have any implications except for the min/max width in relation to the breakpoints. We use a lot of full width background images which don't really snap to the area outside the grid unless they're set to body, but want full page or at least much wider than half a gutter (via show outer gutter) content images and bgs. 
    So it really depends on the min col grid you need and the hard 16 col limit is an issue for a grid that that has a higher common multiple for it's column variations. I.e. a 5 and 3 column design would need 15 for the content and 2 for the outside margin but that's over the limit.
    For simplicity's sake we've moved to mostly 2-4 column designs which we can make work with a max 12+2 cols, but you have to figure out multiples that work out cleanly while maintaining a natural looking relationship of content to margins.
    For that reason, and because of the platform on which we build most projects (NationBuilder) requiring a sidebar,  we've gone heavily to 3,2,1 col layouts which we can break into just six layout cols.
    But another workaround we're using is to flop the grid and gutters so that we have 7 gutters of 12% and 6 cols of 4%. The grid is largely just a visual aid so it doesn't seem to have any implications so far. The issue we were having was that the outside gutters are only half width which doesn't work for our designs which tend to have a lot of common match ups and lineups. In that case you have the larger gutters which have a central snap guide as well which you may be able to repurpose to many more cols if you can come up with a clean grid is a lot of experimentation or a spreadsheet, the only way we were able to calculate all our variables into nice round numbers…
    The simplest fix though is probably a lifting of the arbitrary limit on number of columns. I saw on another thread the devs were willing to consider that, they just needed a solid usecase to do so. A grid that accounts for a design with both 4 and 5 columns in it would require at least 20 cols, and 2 extra on the outside would probably be pretty useful so a 24 col max should allow for almost all contingencies…

  • "Red eye correction" goes beyond the eyeball.

    I'm using PSE 3.0, Windows XP Home. Occasionally, when I try to apply "red eye correction", the "darkening" effect is applied to areas of the cheeks, eye brow, or forehead (as well as the eye). My guess is: The subject's skin color or "cosmetic makeup color" is within the range of spectra that "red eye correction" is sensitive to and therefore interprets that it too, needs darkening. How can I "mask off" or otherwise prevent PSE from going beyond the eyes of the subject in it's quest to "eradicate red eye"?

    Larry,
    I only have PSE 2 so I don't know how the red eye correction tool works in PSE 3, but I'm guessing you can select just the eye (and maybe feather 1 or 2 pixels) before applying the tool.
    You just might skip the red eye tool and do this instead:
    - Zoom in to large eye.
    - Select the red area and feather.
    - Add a Hue/Saturation layer. Select Reds from the Edit menu, move Saturation slider left.

  • Can a div auto-detect the width of its contents?

    By default, a div's width will extend as far as its container allows (100%) and we can restrict this by specifying width values. But I'm not looking to do either one. Instead, I'd like to know if there's a way to make a div adopt the width value of its contents dynamically?
    In other words, wrap tightly around its contents, instead of expanding to fill whatever space allows.
    <div>
      <img src="image.jpg">
    </div>
    Where image.jpg is 200px wide and so is the div that's containing it.

    jyeager11 wrote:
    By default, a div's width will extend as far as its container allows (100%) and we can restrict this by specifying width values. But I'm not looking to do either one. Instead, I'd like to know if there's a way to make a div adopt the width value of its contents dynamically?
    Where image.jpg is 200px wide and so is the div that's containing it.
    Yes you can do it.  You need to float the DIVs either left or right.  The process of floating the div shrinks the div to fit the contents.  Try it and let us know if this works in your case.
    Good luck.

  • Libreoffice right-click context menu going beyond the end of the page

    having a rather annoying issue with libreoffice 3.x (started with 3.5.x and still in 3.6.1): The right-click context menu goes over the screen borders when I am at the end of the page (instead of opening in the other direction so that all options are visible). I am running arch 64bit KDE 4.9.1. But I think in this case that's not relevant because we have a second computer, the same one basically with an extremely similar setup and there it works just fine. I did uninstall libreoffice, got rid of the .cache in the home folder, then reinstalled but the problem persists.
    Anyone know how to fix this or hints on how to approach the problem?
    Thx!
    Captn

    Update:
    the problem was fixed with an update to KDE 4.9.2 but shortly after for some reason, it reappeared. As previously mentioned, I tried uninstalling libreoffice entirely, including the libreoffice .config folder. Here is what it looks like (second screen shot):
    I noticed that this also happens with dolphin when I open it as root. Someone came across the same issue and fixed it?
    Help's greatly appreciated
    Captn
    Edit: libreoffice version 3.6.1
    Edit 2: Real Problem identified:
    I just wanted to update this thread should there be others that, at one point or another, run into a similar problem. I won't be marking the thread as solved since I did not actually solve the problem (yet). However, I did identify the cause and therefore know how to circumvent it.
    Since I didn't elaborate much on the specs / technical side, I have an HP pavilion with an Nvidia card and I am using the propretiary drivers. I set up a separate X screen for my TV and there is where the problem lies. It has worked for months but since recently this setup causes some weird graphical behavior (as in the above pictures) which can be annoying. If using the twinview setup or no external monitor, everything works normal. My guess is that plasma-desktop and the separate x screen don't work very well together for a reason unknown to me for the time being.
    The problem itself can be annoying if you rely on libreoffice to work so I hope this might help somebody should there be annyone running into a similar issue.
    Last edited by capthilts (2012-10-13 06:02:32)

  • My page goes beyond the fold, but no scrollbar? :S

    Hi,
    I have made a website in Flex, located at
    http://www.theplaygrounds.co.uk/The_Playground.swf
    Now this site is just a simple portfolio, but I have a lot
    planned for it. What I was wondering is that when you go to the
    contact page, you cannot see a submit button because that is below
    the fold and requires scrolling. But in Flex, there is no scrollbar
    in the browser. Why? If the site is a html document made in
    Dreamweaver the browser would provide a scrollable scrollbar.
    What do I have to do to enable the scrolling in the browser?
    Or is there another way around this. I must be doing something
    wrong because it can't be right for Flex to limit the page's size
    to just the monitor's size.
    Thanks in advance

    I know that some components dont activate the scrollbar when
    they oversize, try putting the component that is not making a
    scroll bar inside a canvas and set the internal component to
    width="100%" and height="100%"
    If its the browswers scrollbar you want (note that this is
    different from flex's scrollbar, and if yoru whole site is flex
    youd be better off using the flex scrollbars) you will have to set
    your width and height of your <Application> to something that
    isnt a percentage.

  • In Firefox4, can I lose the folder icons from the Bookmarks Bar while keeping icons everywhere else (because the folder icons are superfluous and extend the horizontal list of bookmark folders beyond the width of the window)?

    I've just installed Firefox4 for Mac (OS 10.6.7) and can no longer see all my bookmark folders at once across the top -- because the folder icons make the Bookmarks Bar too wide. Yet, I like the icons on the other bars, so I don't want to turn them off globally. Is there a way to just lose the folder icons -- which don't appear to serve a purpose anyway?

    Small correction to original post. Machine is an iMac 2.4ghz Intel Core 2 Duo. (I was at home when I made the first post.) But the bookmarks menu behavior still exists today and FF 5 is essentially unusable.
    System details next to the post are not for machine with the bug in question.
    Found a copy of FF4 to use until a solution is found. Turned off automatic updates to preserve this version.

  • When tabs are on top options is on; if I click a link (which is set to open in new window by web site or addon) the new opened page's tabs goes beyond the screen limit. when i restore down and restore up the page it gets its normal form.

    http://i55.tinypic.com/25jbejm.png ( this is the problem )
    http://i55.tinypic.com/303k3kx.png ( this is how it should be)

    I don't even know if that's possible, and I have so far not seen any unusual activity on the computer.
    No, it's not even remotely possible. What you encountered was an attempt to scam you, and a pathetic one at that.
    Identity theft in general is a significant threat to any computer (a term encompassing Macs, PCs, iPads, iPhones...) user. However, that threat most commonly arises in the form of "phishing" and you didn't play along with it. The likely reason the email appeared to have come from one of your previous eBay vendors is that his email address was harvested using any number of methods. The email probably didn't even originate with him. eBay is a rich source for obtaining such information.
    eBay has a fairly helpful guide on the subject: http://pages.ebay.com/help/account/recognizing-spoof.html
    To answer your specific questions:
    Is there any malware or other harmful/malicious computer code--read, something that could steal my identity if/when I do my taxes online this year--currently known to be a threat to home non-business Mac computers?
    No.
    So, in summary: Should I be worried that I fell for some new (since 2013) method of unknowingly downloading malicious software to my Mac?
    No — although Mac-targeted adware has arisen since that time and is a rapidly growing annoyance that can make using your Mac practically impossible, it will not directly cause information theft as you have described it concerns you. Furthermore, it requires your participation to install it in the form of an Admin name and password — and it requires deception to convince you to supply those credentials. Learn more about how that happens here: How to install adware.

  • How to increase the width & heigt of page in smart forms...

    Dear abaper,
    In smartform i have one problem,
    the default page size is 20 cm ht & 20 cm width,. but i want to create 4 windows havehing
    leng & width of (total 4 windows) more the 20*20cm .so an error message is displaying ''window dose not fit on page 1''.
    can any one sugesst how to increase the page size (weather it is possible or not) .what is the soulution for this.
    regards
    veera

    Hi,
    Open the Smartform and click on FORM PAINTER.
    A graphical window will appear displaying all the windows you have created.
    These windows are going beyond the paper size. Resize them so that they would fit in the page. You can also extend the page by simply clicking & dragging the edge of the window.
    Best regards,
    Prashant

  • How to capture a Safari webpage beyond the screen boundary?

    While doing research, I make screenshots on OS X Safari very often.  Many webpages go down beyond the screen.  Is there any utility that can capture a whole webpage which goes beyond the height (or width) of the screen?

    Hi there, I think the shortcut keys can help to do so. Cmd+Shift+4+Space bar will definitely capture the Safari webpage. If u tried it n still not working regarding the screen boundary, then u’d better read the tutorial first, it indicates the ways to do Mac OS X screen capture. Hope it helps.

  • Help! Divs extend beyond parent container! Clearing doesn't seem to work!

    My "mainContent" div extends beyond the "Container" div. It seems that I've tried everything--clearing doesn't seem to work.
    Help!
    Here is my css:
    @charset "UTF-8";
    /* CSS Document */
    body  {
         margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
         padding: 0;
         text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
         color: #000000;
         font-family: Arial, Helvetica, sans-serif;
         font-size: 100%;
         background-color: #FFF;
    .twoColFixRtHdr #container {
         width: 960px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
         background: #FFFFFF;
         text-align: left; /* this overrides the text-align: center on the body element. */
         font-family: Arial, Helvetica, sans-serif;
         margin-top: 0;
         margin-right: auto;
         margin-bottom: 0;
         margin-left: auto;
         top: 10px;
         padding-top: 10px;
         clear: both;
    .twoColFixRtHdr #header {
         height: 180px;
         padding-top: 10px;
         padding-right: 0px;
         padding-bottom: 5px;
         padding-left: 0px;
         border-top-width: 1px;
         border-right-width: 0px;
         border-bottom-width: 5px;
         border-left-width: 0px;
         border-top-style: solid;
         border-bottom-style: solid;
         border-top-color: #999;
         border-bottom-color: #000;
         margin-top: 5px;
         margin-bottom: 0px;
    .twoColFixRtHdr #container #sidebar1 img {
         padding-top: 10px;
         border-bottom-width: 1px;
         border-bottom-style: solid;
         border-bottom-color: #999;
         margin-bottom: 0px;
         padding-bottom: 10px;
         padding-left: 10px;
    .twoColFixRtHdr #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 */
    .twoColFixRtHdr #sidebar1 {
         width: 315px;
         padding: 0px;
         top: 200px;
         float: right;
    .twoColFixRtHdr #mainContent {
         width: 643px;
         padding-top: 10px;
         border-right-width: 1px;
         border-right-style: solid;
         border-right-color: #999;
         overflow: hidden;
         top: 230px;
         position: absolute;
         clear: right;
    .twoColFixRtHdr #footer {
         background:#DDDDDD;
         top: 50px;
         clear: both;
         padding-top: 0;
         padding-right: 10px;
         padding-bottom: 0;
         padding-left: 20px;
    .twoColFixRtHdr #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: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    .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 */
         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 a float */
         clear:both;
         height:0;
         font-size: 0px;
         line-height: 0px;
    .spacer { 
         clear: both; 
    .twoColFixRtHdr #container #mainContent #article_main_head {
         font-family: Arial, Helvetica, sans-serif;
         top: 10px;
         width: 635px;
         float: left;
    .twoColFixRtHdr #container #mainContent #article_img {
         width: 630px;
         float: left;
         margin-top: 10px;
         clear: both;
    .twoColFixRtHdr #container #mainContent #article_main_txt {
         float: right;
         width: 450px;
         clear: both;
         padding-top: 10px;
         height: 500px;
    .twoColFixRtHdr #container #mainContent #article_main_pq {
         clear: both;
         float: left;
         width: 180px;
         margin-top: 100px;
    Here is my html:
                                                                   Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend  sollicitudin, molestie id, varius et, nibh. Donec nec libero. 
    Loading news. please wait...                                   
    Loading news. please wait...                    
    Loading news. please wait...            
          Footer 

    This CSS sends up a red flag:
    .twoColFixRtHdr #mainContent {
         width: 643px;
         padding-top: 10px;
         border-right-width: 1px;
         border-right-style: solid;
         border-right-color: #999;
         overflow: hidden;
    /******DELETE THE FOLLOWING*****/
         top: 230px;
         position: absolute;
         clear: right;
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb

  • Why is the div sitting at the bottom of the page?

    Can anyone tell me why the div <div id="maindiv" class="maindiv_scroll">  is sitting at the bottom of the page?
    http://www.milesfunerals.com/nafd.php

    I have not tested this BUT most probably the scrollbar on the central <div> is making the width of the <div> wider than the space it has to fit itself into so the <div> is being thrown to the next available space, at the bottom of the construction. Below I have commented out the overflow: scroll; - see what effect it has, if any.
    .maindiv_scroll {
        width:100%;
        max-width:812px;
        background-image: url(images/scrollbgnew.jpg);
        /* overflow:scroll; */
        background-repeat: no-repeat;
        margin-left: 138px;
        height:1176px;
        border-top: 1px solid #F4ECC5;
    I don't want to be the bringer of bad news (again) but you really are getting into a bit of a mess. This is largely down to excessive css. When it gets to that amount of css you should try breaking it down, ie you could put the mainnav css into its own linked css file and that gets that out of the way, making troubleshooting a bit less of a nightmare.
    Also you are mixing fixed width with percenatge width. I don't have a lot of experience with that but it's not as easy as using all percentages or all fixed width. Obviously in this case you need the percentages as it's a responsive construction so why are you fixiing the left navigation and the right sidebar.
    It would be better to set those as percentages and float all the <divs> left in my opinion.

  • How to keep the right sidebar on this website from going under the main content (center) column?

    Hi...is there a way to keep the right sidebar on this website from going under the main content (center) column when the browser window is made smaller? It would be great if the middle (main content) column could get smaller instead of the sidebar moving under the text when the window is made smaller. I'm working with a fluid layout and this is the first time I've tried this. Any help would be appreciated. Here is the link to the website:
    http://www.elynncohen.com
    and here is my code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Your Career Direction Career and College Counseling</title>
    <meta name="Keywords" content="career counseling, college counseling, job search, career choice, college options, career options, work, jobs, new opportunities, career change, new career, new job" />
    <meta name="Description" content="Your Career Direction :: Career and College Counseling" "Considering your college choices & career options" "Preparing for the world of work after college" "Seeking a new position to further your career"
    "In-transition and considering new opportunities"
    "Seeking to make a significant and meaningful career change"  />
    <meta name="Publisher" content="Your Career Direction, LLC" />
    <meta name="Copyright" content="Copyright 2012, Your Career Direction, LLC. All rights reserved." />
    <meta name="Author" content="Lisa Mark" />
    <meta name="Language" content="en-US" />
    <meta name="distribution" content="global" />
    <meta name="revisit-after" content="10 days" />
    <meta name="Robots" content="All" />
    <link rel="Index" href="index.html" />
    <link rel="Site Map" href="sitemap.html" />
    <script type="text/javascript" src="//use.typekit.net/ifb2bte.js"></script>
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
    <style type="text/css">
    <!--
    body {
        margin: 0;
        padding: 0;
        color: #000;
        font-size: 100%;
        line-height: 1.4;
        background-image: url(images/background.gif);
        background-repeat: repeat;
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl {
        padding: 0;
        margin: 0;
    h1, h2, h3, h4, h5, h6, p {
        margin-top: 0;    
        padding-left: 15px;
    .container .sidebar1 h3 {
        padding-left: 0px;
        color: #C60651;
        font-size: x-large;
    h1 strong {
        color: #C60651;
        font-size: 90%;
        font-family: "Binary ITC Bold";
    h1 strong em {
    a img {
        border: none;
    a:link {
        color:#414958;
        text-decoration: underline;
    a:visited {
        color: #4E5869;
        text-decoration: underline;
    a:hover, a:active, a:focus {
        text-decoration: none;
    .container {
        width: 80%;
        max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
        min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
        background: #FFF; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
        margin-top: 0;
        margin-bottom: 0;
        margin-right: auto;
        margin-left: auto;
        border-right-width: thick;
        border-left-width: thick;
        border-right-style: solid;
        border-left-style: solid;
        border-right-color: #C60651;
        border-left-color: #C60651;
    .header {
        padding-top: 40px;
    #Quote {
        float: right;
        clear: left;
        margin-right: 1%;
    .sidebar1 {
        float: left;
        width: 20%;
        padding-bottom: 10px;
        margin-top: 40px;
        border-top-color: #FFF;
        border-left: #FFF;
        margin-left: 25px;
        background-color: #FFF;
        font-family: museo-sans;
    arial;
        max-width: 200px;
        min-width: 180px;
    .content {
        float: left;
        margin-top: 40px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10;
        font-family: museo-sans;
    arial;
        width: 30%;
    .container .content p {
        padding-top: 0px;
    .sidebar2 {
        float: left;
        width: 30%;
        background-color: #D3CCB2;
        margin-top: 40px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 0px;
        border-top-color: #FFF;
        border-right-color: #FFF;
        border-bottom-color: #FFF;
        border-left-color: #FFF;
        border-right-width: 5px;
        font-family: museo-sans;
    arial;
        font-size: 90%;
        position: relative;
    .content ul, .content ol {
        padding-top: 0px;
        padding-right: 25px;
        padding-bottom: 15px;
        padding-left: 40px;
        font-family: museo-sans; arial;
        font-size: 100%;
        color: #666;
    .container .content p {
        font-family: museo-sans;
    arial;
        padding-top: 0px;
        padding-left: 17px;
        padding-bottom: 0px;
    #Quote {
        float: right;
        clear: both;
    ul.nav {
        list-style: none; /* this creates the space between the navigation on the content below */
        font-family:museo-sans; arial;
        line-height: 250%;
    .nav {
        font-family: museo-sans;
    arial;
        padding-left: 0px;
    ul.nav li {
        font-family: museo-sans; arial;
        padding-bottom: 10px;
    ul.nav a, ul.nav a:visited
        display: block;
        text-decoration: none;
        color: #333333;
        background-color: #FFF;
        font-family: museo-sans; arial;
        padding-top: 5px;
        padding-right: 5px;
        padding-bottom: 10px;
        padding-left: 15px;
    ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
        color: #C60651;
        font-family:museo-sans; arial;
        background-color: #FFF;
        background-image: url(images/navbar2.gif);
        padding-bottom: 10px;
    .content img {
    .footer {
        position: relative;/* this gives IE6 hasLayout to properly clear */
        clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
        padding-top: 0px;
        padding-right: 0;
        padding-bottom: 10px;
    .fltrt { 
        float: right;
        margin-left: 8px;
    .fltlft {
        float: left;
        margin-right: 8px;
    .clearfloat {
        clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    .container .content {
        width: 50%;
        font-size: large;
        font-family: museo-sans; arial;
    #footer {    width: 100%;
        background-color: #FFF;
    .container .sidebar2 h4 img {
        padding-left: 20px;
        padding-top: 0px;
    .sidebar2 p img {
        border: medium solid #C60651;
    #Insert_logo2 {
        border-top-width: 4px;
        border-right-width: 4px;
        border-bottom-width: 4px;
        border-left-width: 4px;
        border-top-color: #fff;
        border-right-color: #fff;
        border-bottom-color: #fff;
        border-left-color: #fff;
    .container .content p .content strong {
        font-family: museo-sans; arial;
    .container .content .content {
        font-family: museo-sans; arial;
    .container .content ul li strong {
        font-family: museo-sans;
    arial;
        font-size: 95%;
        line-height: 150%;
        list-style-type: disc;
    .container .content ul {
    test {
        font-family: "Binary ITC Bold";
    .container .sidebar2 p img {
        margin-right: auto;
        margin-left: auto;
        border-top-width: medium;
        border-right-width: medium;
        border-bottom-width: medium;
        border-left-width: medium;
        border-top-color: #C60651;
        border-right-color: #C60651;
        border-bottom-color: #C60651;
        border-left-color: #C60651;
    li strong {
        line-height: 130%;
        list-style-type: circle;
        color: #978980;
    .container .content ul {
    .container .sidebar1 .nav {
        margin-top: 10px;
        margin-bottom: 10px;
    .sidebar1 .nav li {
        padding-bottom: 10%;
    .nav li a {
        background-image: url(images/navbar2.gif);
        background-repeat: no-repeat;
        background-position: right center;
        left: auto;
        right: auto;
        clip: rect(auto,auto,auto,auto);
    .container .sidebar1 .nav li a {
    .container .sidebar1 h6 {
        padding: 0px;
        color: #000000;
    #footer h3 strong {
        font-size: 60%;
        color: #978980;
    .container .content p {
        padding-right: 0%;
        padding-left: 0%;
        font-size: 85%;
    .container .sidebar2 p {
        padding-right: 8%;
        padding-left: 8%;
        padding-top: 5px;
    #Insert_logo2 #Insert_logo2 {
        padding-left: 15px;
    .container .content ul {
        color: #C60651;
    h6 {
        color: #978980;
        font-family: museo-sans;
    arial;
        font-size: 82%;
        padding-left: 20%;
        text-align: left;
        text-indent: 8px;
    .nav li a {
        padding-bottom: 10px;
    h8 {
        font-family: museo-sans; arial;
        font-size: 100%;
    h4 {
        font-family: museo-sans;
    arial;
        font-size: 100%;
        color: #C60651;
        padding-left: 17px;
        padding-top: 5px;
        padding-bottom: 0px;
    .container .content p {
        padding-left: 17px;
        padding-right: 30px;
    .sidebar1 h8 strong {
        font-size: 80%;
        font-family:museo-sans; arial;
    .container .sidebar1 h7 {
        font-size: 40%;
        color: #978980;
    h7 {
        font-family: museo-sans; arial;
        font-size: 15%;
    .container .sidebar1 h8 {
        font-family: museo-sans; arial;
    .sidebar2 p img {
        min-width: 200px;
        max-width: 100%;
    .container .content img {
        padding-left: 3%;
    img {
        position: static;
        text-align: left;
    body,td,th {
        font-family: museo-sans; arial;
    h5 {
        font-size: 150%;
        color: #C60651;
        padding-left: 0px;
        font-family:museo-sans; arial;
    .container .content p {
        padding-left: 17px;
        padding-right: 30px;
        font-size: 87%;
    .container .sidebar2 p {
        font-size: 90%;
    .container .sidebar1 .nav li {
        font-family: museo-sans;
    arial;
    .container .sidebar1 .nav li a {
        padding-left: 0px;
        margin-bottom: 0px;
        height: 30px;
    li a {
        padding-left: 2px;
    -->
    </style><!--[if lte IE 7]>
    <style>
    .content
    ul.nav a { zoom: 1; } 
    </style>
    <![endif]--></head>
    <body><script type="text/javascript">
    function pageWidth() {
    return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
    function pageHeight() {
    return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
    </script>
    <div class="container">
      <div class="header"><!-- end .header -->
        <p class="clearfloat"><a href="#index.html" id="Insert_logo2"><img src="images/YCD-logo-tag-RGB-web-SM.gif" alt="Your Career Direction Logo" name="Insert_logo" width="50%" id="Insert_logo2" style="background: #FFF
        ; display:block;" /></a></p>
        <div id="Quote"><img src="images/quote.gif" alt="Choose a job you love" width="355" height="81"></div>
        <p class="clearfloat"> </p>
    </div>
      <div class="sidebar1">
        <ul class="nav">
          <li><a href="#">Home</a></li>
          <li><a href="#">High School Students</a></li>
          <li><a href="#">College Students</a></li>
          <li><a href="#">Parents/Educators</a></li>
          <li><a href="#">Professionals</a></li>
          <li><a href="#">Bio</a></li>
          <li><a href="#">Q &amp; A Blog</a></li>
          <li><a href="#">Testimonials</a></li>
        </ul>
      </div>
      <div class="content">
    <p>Given today's competitive job market, global economy, and changed corporate culture,
    we can no longer depend upon others to ensure our professional futures. Choosing or
    changing your career direction requires self-reflection, career education and an action plan.</p>
    <img src="images/Whether-you-are-.gif" alt="Whether you are considering your college choices and career options" width="197" height="31" align="left">
    <ul>
          <br><br><li><strong>Considering your college choices &amp; career options</strong></li>
          <li><strong>Preparing for the world of work after college</strong></li>
          <li><strong>Seeking a new position to further your career</strong></li>
          <li><strong>In-transition and considering new opportunities</strong></li>
          <li><strong>Seeking to make a significant and meaningful career</strong> <strong>change</strong></li>
        </ul>
    <img src="images/Onethingisforsureraster.gif" width="352" height="49" alt="One thing is for sure, we all want to direct our own careers, our own lives!">
    <br><p> Building a successful and rewarding career requires linking your interests, education and experience with employment trends, growth industries, and career choices. It takes making smart decisions about your college major, vocational training and continuing education options. With enthusiasm, persistence and top notch job search skills, you can succeed in finding a path to career that is right for you.</p>
    <p> We are your advocate. We listen, assess, strategize, inspire, counsel, and network on your behalf. With a personalized, holistic approach, we'll work with you to help you create an action plan; a path designed to get you to where you want to go and become what you want to be.</p>
    <img src="images/yourcareerourpassionraster.gif" width="441" height="20" alt="At Your Career Direction, YOUR career is our passion!"> </div>
      <div class="sidebar2">
        <p><img src="images/Counselingastudent.gif" width="100%" alt="Lisa Mark counseling a student"></p>
        <p>Our mission is to help you explore, choose and create your direction for an exciting and rewarding career path.</p>
         <p>We incorporate our experience with today's job market and career counseling expertise with your passions and interests. We'll introduce you to new career ideas, target companies and generate job and internship opportunities for you.</p>
         <p>We provide step by step guidance to ensure your success during the college application, job interview
    and decision making process.
    </p>
    </div>
      <div class="footer">
        <div id="footer">
          <h6 align="left"> Your Career Direction, LLC •  96 Harvard Avenue, Maplewood, N.J. 07040 • (973) 996-0207 • [email protected]</h6>
             </div>
        <p> </p>
      <!-- end .footer --></div>
    <!-- end .container --></div>
    </body>
    </html>

    You should make your sidebar1 and sidebar2 fixed positioned. Make your content DIV fluid.
    This should help you: http://www.glish.com/css/7.asp

  • I need to write a Java script to make my Art board bigger by 1 (one) inch on the Width and Length, Regardless of the Content?

    Hi,
    I am currently using "Visible bounds" (java script)to add 1 inch to the width and to the Length of my Art board, but when i make a clipping mask it actually reads the hidden content from the Clipping mask and makes conforms my art board to that particular shape. Am using Adobe illustrator cs6 Here is My Code:
    var myDocs = app.documents;
    var i = 0;
    for (i = myDocs.length-1 ; i >= 0; i--)
        var doc = myDocs[i];
        app.activeDocument= doc;
        var myVisibleBounds = doc.visibleBounds; //Rect, which is an array;
        myVisibleBounds[0] -= 36;
        myVisibleBounds[1] += 36;
        myVisibleBounds[2] += 36;
        myVisibleBounds[3] -= 36;
        doc.artboards[0].artboardRect = myVisibleBounds;
    All i Want is to add 1 inch to my width and length and this does it but if i have a clipping mask it will pick up the bounding box i guess? and it will conform it to the shape... any help please... Try my code and you will see that it does add 1 inch but now make you artboard lest say 12" x 12" and make a shape bigger than the art board and you will see how it adds 1 inch to the art board based on that shape...  now if you make a clipping mask to fit that shape in the 12" x 12" art board you will still get 1 inch bigger than the shape thats being clipped ... 

    yes, visible bounds is reading the non-visible masked objects too.
    you're going to have to do it the hard way, loop through all your objects to get your bounds manually, and while you're at it, test for clipping masks and use the masking path instead.

  • Using Divs/Layers - am I going in the right direction?

    Decided to give divs a try and get away from tables cause
    everyone says I
    should :-)
    Teaching myself from scratch about them and just wanted
    guidance on how it
    is going so far.
    I am trying to construct my template and have created one
    test page.
    http://www.mmmcommentaries.com/test/index.htm
    I am creating the site by just setting up a div for each area
    - main body,
    menu, banner.
    Is this the right way to do it or is there a better way? I
    suppose I am
    still thinking like a tables user in that I am setting up a
    cell (div) for
    each item.

    If you remove this line -
    <?xml version="1.0" encoding="iso-8859-1"?>
    your page will render in Standards mode in IE, rather than
    quirks mode. You
    don't need that line currently, so it's safe to delete.
    Your concern about the menu is well placed. Horizontal menus
    always run the
    risk of breaking when the text is resized in the browser.
    Yours will too.
    But, to spread things out a bit, you need to manage the
    padding and the
    width of the div#nav ul li a rule.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.dreamweavermx-templates.com
    - Template Triage!
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    http://www.macromedia.com/support/search/
    - Macromedia (MM) Technotes
    ==================
    "Koenig" <[email protected]> wrote in
    message
    news:e3rn3o$54h$[email protected]..
    > Thanks very much for those links - spent an interesting
    morning teaching
    > myself this (I think!)
    >
    > I am hoping you can help me with a small problem.
    >
    > I have a menu bar on it now - just as simple thing but I
    want to make the
    > text for the menu items bigger without making the items
    run onto two
    > lines.
    >
    > There seems to be plenty of space on the line for them
    to sit but I have
    > played around with the settings and forthe life of me
    can't work it out.
    >
    >
    http://www.mmmcommentaries.com/test/index.htm
    >
    > Thx
    > Trev.
    >
    >

Maybe you are looking for

  • Help to keep multiple windows open and active?

    Just purchased a new Macbook Pro and when I open an application, any other open application minimizes to the dock. On my previous Mac, whenever I opened an application, all applications would remain open in the same window so I could click back and f

  • Internet Connection Slow on Macbook Pro (Mid 2010)

    All of the sudden, this past week, my internet has been running quite slow on my Macbook Pro.  This problem is with the Macbook itself and not with the internet connection (I have connected to various networks and my other wifi devices run well on th

  • How to create a new business group in production instance?

    Hi All How can I create a new Business Group in Oracle Apps in a production Instance where there wont be any HRMS responsibility. Do I need to create a new Business Group through Inventory responsibility ? Any documents about this issue? Thanks and R

  • Facetime iMac vs Macbook Pro

    Why do we have to pay for Facetime on iMac when it's fee on Macbook Pro (beta, but still)? Only .99, but really!

  • ICloud is a joke. Where is my camera roll?

    iPhone 4s iCloud. How do I get my camera roll back. I backed it up because I had to replace it. Where us my stuff?