Sidebar moving over right border of website and outside of main container

Hi
I'm doing a website and have a question.
I have a left nav bar, a fluid center column and an absolute positioned right sidebar.
The sidebar is set to clear left and float right.
However the sidebar moves over to the right and extends past the right border on some browsers.
It moves out of the main container and I would like it to remain within it.
Does anyone know how I can fix it so that the sidebar stays within the white area and does not move to the right?
Thanks for your help!!!!
Here is a screen shot
When the browser window gets a little smaller the sidebar goes back to where I want it.
Here is a link to my test page online:
http://elynncohen.com/index2.html
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">

</style></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">
    <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 & 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 & 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>
</div>
</div>
</body>
</html>

Absolute positioning will always cause you problems so it's best to avoid unless absolutely necessary.
Having said that, your layout issues were a straight-forward fix. Modify your style sheet with the below sections and and it should be ok. You might need to modify your CSS for smaller screens as once you reduce the browser window to about 500px, the right sidebar disappears. Something to be aware of.
.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;
    position: absolute;
.content {
    float: left;
    margin-top: 40px;
    margin: 40px 0 0 0;
    padding:10px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10;
    font-family: museo-sans; arial;
    margin-right: 250px;
    margin-left: 220px;
    width: 50%; /* You can increase this to 55%, or add a left and right margin to space the elements */
    font-size: large;
.sidebar2 {
    float: right;
    float:left;
    width: 20%;
    background-color: #D3CCB2;
    margin-top: 40px;
    padding: 10px 0;
    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: absolute;
    clear: left;
    right: 12%;
.sidebar2 p img {
    min-width: 200px; /* This needs to be removed or made smaller if you are keeping it - or set a min-width on sidebar2 */
    max-width: 100%;
    width:100%;
    height:100%;
.container .content {
    width: 50%;
    font-size: large;
    font-family: museo-sans; arial;
EDIT:// I meant to say, you should probably spend some time tidying up your CSS as they are not in any obvious order and can get confusing with multiple styles for the same element. Having a clean and easy to understand CSS sheet makes it easier for you to figure out what is wrong. Will help you enormously in the long run.
Message was edited by: Rik

Similar Messages

I redeemed Night at the museum 2 digital copy on my old computer I moved over to mac last year and I wanted the digital copy on mac but it says it's already been redeemed which it has on my old computer, so how would i get the digital copy on my mac?

I redeemed Night at the museum 2 digital copy on my old computer I moved over to mac last year and I wanted the digital copy on mac but it says it's already been redeemed which it has on my old computer, so how would i get the digital copy on my mac?

I doubt the license is affecting the performance - it might be a case of the software being too old for the machine.
In any case, you can contact Adobe support thru chat and have them reset your activation count to eliminatre your doubts regarding the license.
For the link below click the Still Need Help? option in the blue area at the bottom and choose the chat option...
Serial number and activation chat support (non-CC)
http://helpx.adobe.com/x-productkb/global/service1.html ( http://adobe.ly/1aYjbSC )

Why haven't my MobileMe files moved over to iCloud? iDisk and Lion issue?

Everything else has matriculated over to iCloud automatically. But my working files, typically MSOffice files also, have not. What can I do to get them to move? Or should I just put everything onto a hard drive on my desk and chuck the notion of online "cloud" storage? Another way of putting it; iDisk isn't showing up on my computer and is not accessbile via Lion. So, how do I get my files to move to iCloud from MobileMe, and then show up via Lion as either in iCloud or my iDisk?

Please amend your signature to show you are using Lion - having the wrong system showing can lead to some irrelevant answers.
Your iDisk and its contents, including websites and Gallery, do not migrate to iCloud: iCloud does not provide these facilities. The iDisk will continue to work as before but will terminate on 30 June 2012 and its contents be deleted, so you will need to find alternatives before then.
The migration process has probably logged you out of MobileMe and you will need to go to System Preferences>MobileMe and sign in again.
This article examines alternatives to the facilities iCloud does not provide:
http://rfwilmut.net/migrate

Desktop Icons moved to right side of screen and are stuck! Help please.

Can anyone please help me? My desktop icons have moved to the right side of my screen and I cannot move them. I have tried 'View Options', right clicking the desktop, 'Finder Preferences' and even a couple of terminal commands suggested in different forums. Nothing helps. In addition, I can't drag to desktop anymore. Anyone? Please. This has consumed me for almost a week now. Thanks.

rightclick on the desktop, click "show view options", choose any thing else as "snap to grid" in the "show icon preview" field.

Hello! I have a MacBookPro5,1. I recently had to erase the disk and start over. So right now I have OS X. what is the best(cheapest/fastest) way to get current on my OS to be able to use current websites and programs? thanks!

Hello! I have a MacBookPro5,1. I recently had to erase the disk and start over. So right now I have OS X 10.5.5. what is the best(cheapest/fastest) way to get current on my OS to be able to use current websites and programs? thanks!
Right now there is pretty much nothing on it, and I cant download basic things.

Upgrading to Snow Leopard
You can purchase Snow Leopard through the Apple Store: Mac OS X 10.6 Snow Leopard - Apple Store (U.S.). The price is $19.99 plus tax. You will be sent physical media by mail after placing your order.
After you install Snow Leopard you will have to download and install the Mac OS X 10.6.8 Update Combo v1.1 to update Snow Leopard to 10.6.8 and give you access to the App Store. Access to the App Store enables you to download Mavericks if your computer meets the requirements.
     Snow Leopard General Requirements
       1. Mac computer with an Intel processor
       2. 1GB of memory
       3. 5GB of available disk space
       4. DVD drive for installation
       5. Some features require a compatible Internet service provider;
           fees may apply.
       6. Some features require Apple’s iCloud services; fees and
           terms apply.
Upgrading to Mavericks
You can upgrade to Mavericks from Lion or directly from Snow Leopard. Mavericks can be downloaded from the Mac App Store for FREE.
Upgrading to Mavericks
To upgrade to Mavericks you must have Snow Leopard 10.6.8 or Lion installed. Download Mavericks from the App Store. Sign in using your Apple ID. Mavericks is free. The file is quite large, over 5 GBs, so allow some time to download. It would be preferable to use Ethernet because it is nearly four times faster than wireless.
    OS X Mavericks- System Requirements
    Macs that can be upgraded to OS X Mavericks
         1. iMac (Mid 2007 or newer) - Model Identifier 7,1 or later
         2. MacBook (Late 2008 Aluminum, or Early 2009 or newer) - Model Identifier 5,1 or later
         3. MacBook Pro (Mid/Late 2007 or newer) - Model Identifier 3,1 or later
         4. MacBook Air (Late 2008 or newer) - Model Identifier 2,1 or later
         5. Mac mini (Early 2009 or newer) - Model Identifier 3,1 or later
         6. Mac Pro (Early 2008 or newer) - Model Identifier 3,1 or later
         7. Xserve (Early 2009) - Model Identifier 3,1 or later
To find the model identifier open System Profiler in the Utilities folder. It's displayed in the panel on the right.
     Are my applications compatible?
         See App Compatibility Table - RoaringApps.

My iPad fell one night from one side (left) and now its border from the inside or the main screen border (left side- portrait) is thicker on the other side (right side) like it moved left when it fell :(( so sad this is a gift from my mother. please help

my iPad fell one night from one side (left) and now its border from the inside or the main screen border (left side- portrait) is thicker on the other side (right side) like it moved left when it fell :(( so sad this is a gift from my mother. please help

thank you. it just annoys me and im scared that my mom would notice it coz she bought it for me..

Is there a way to see a file browser on iCloud? It says my account is filled up to 5G already and I can't imagine what it moved over to there that was that big.

Is there a way to see a file browser on iCloud? It says my account is filled up to 5G already and I can't imagine what it moved over to there that was that big.
I'm wondering if it moved my rhapsody music to the cloud (which is pointless) so I shut off 'document' sharing in case that's the problem, but it's still saying I'm at 5G right now.
When I go to icloud.com all I see is the dumb app icons, with no clue as to what's taking up that disk space.
btw, I did not sync photos from the get-go.
A file browser? please? I need to see my cloud.
sigh

Have you enabled Automatic Downloads on all of your devices? This would download all of the books to all of your devices when you download on any device - as long as you are using the same Apple ID and iTunes account on all of your devices.
Go to Settings>Store>Automatic Downloads>Books>On. When you download a book on one iDevice, it will download to all of your iDevices. This will only work for downloads moving forward from the moment that you turn the setting on. You will have to download the previously purchased books to all of your other devices.
With iCloud, you can start reading the book on one device and then pickup where you left off on another device.

Itunes won't copy over some of my podcasts and purchases since I have moved it to an external hardrive

So I Have moved over all my purchases and everything to an external hardrive. I did everything right and my itunes story works perfectly fine. However one of my podcasts (yugioh the abridged series) won't copy over along to the ipod saying its file type is not supported by the ipod. It only does this with the first 8 episodes (if you find it you will see them) one of which (the bbt movie) worked perfectly fine on my ipod before but now for some reason it won't. It also won't work on a few of the tv shows that are in hd and one music album that had american boy in it. I'm wondering what I can do to solve this problem. My itunes and my computer (windows vista operating system) is up to date and I have an ipod classic with plenty of room what should I do.

This doesn't work. The iOS4 upgrade has wiped out synchronization to Outlook to the phone and back. There are many threads on this here, and Apple has yet to address this issue.

HI. I would like to arrange over 30 pictures into one grid-like ARRANGEMENT. (meaning above, below, left, right, of each other and so forth to form a rectangle)

HI. I would like to arrange over 30 pictures into one grid-like ARRANGEMENT. (meaning above, below, left, right, of each other and so forth to form a rectangle)
Please help...thx

You messaged me that the contact sheet look is what want but w/o spaces.
One method is to actually start with the PSE contact sheet tool. I assume your version has it (mine is PSE 2). Maybe your version has an option to remove spaces; mine doesn't. In this example I created a sheet of 4 rows and 3 columns, with the option to not flatten the layers. Each picture appears on a separate layer.
On each row I moved the left and right pics inward to remove the spaces between the pics:
Activate the Move tool. Click on the left pic and use the arrow keys to move it inward. Same with the right pic.
Now to remove the spaces between the rows. To make this easier. lock together the pics on each row. Here I locked the pics on the top row, then used the arrow keys to move the row as a unit downward. An alternative method would be to merge the 3 pics on each row and move that merged layer. Do the same for the remaining rows.
This method works of course if the pictures are all the same size and all aligned vertical or horizontal.
If you don't want to use the contact sheet tool (e.g., if the pics are different sizes or alignment) you can do this:
Create a blank canvas.
Open a picture, select it (Select > All) and copy to the clipboard (Edit > Copy).
Activate the blank canvas and Edit > Paste. The picture will be placed on its own layer.
Do the same with the remaining pics and use the Move tool with mouse and/or arrow keys to position them where you want.
The advantage of the first method is that the rows and columns are precisely aligned. Using the mouse to align the pictures could be a little tricky.

Moved my website and podcast xml - what to do with iTunes

Hello All
I really need some help.
I published two episodes of a podcast using Feeder some time back. Now I have moved my website and all its files over to a new server.
Since the move I have published another episode, which has uploaded OK, but iTunes still just shows the older episodes.
So far, I have edited the .xml in the old location with the <itunes:new-feed-url> tag and pinged it successfully, but things have remained the same.
It is weird, I am so technically minded, run my own tech website, but just cannot get this sorted.
Any help would be appreciated.

It will take a while for iTunes to update its own database, which is why it is important to leave your old feed up for a couple of weeks prior to completely disabling it.
Ping the feed does show your old feed url, however, when subscribing the iTunes client is picking up on the <itunes:new-feed-url> and updating its url (you can see it when choosing the option to show the description of the feed)...so your subscribers should be getting the new feed and content as well. Keep in mind that the iTunes database is just a matchmaker...it caches a copy of your xml to provide to first time subscribers so as to provide a starting point and the feed url...once they subscribe their iTunes client goes out and grabs the latest copy of your feed from the URL you provided to iTunes and subsequently the URL in the <itunes:new-feed-url> tag.
Bottom line...it's working, iTunes is just being a little slow on its own.
Erik

My wife and i both have an itunes library installed on to our separate pc's, we are now de-commissioning the pc's and are moving over to a single mac mini, can we install both libraries on to the mac mini and run them as separate libraries?

my wife and i both have an itunes library installed on to our separate pc's, we are now de-commissioning the pc's and are moving over to a single mac mini, can we install both libraries on to the mac mini and run them as separate libraries?

graham218 wrote:
are moving over to a single mac mini, can we install both libraries on to the mac mini and run them as separate libraries?
Generally YES.
It's possible to hold separate iTunes library's on a single machine.
Generate two new folders inside the Music folder of the Mini and name them differently; e.g. man and woman.
Copy your whole library into "man" and your wifes into "woman"
Go to sharing in the system settings of the Mini and share the Music folder in your network.
After copying the whole library's to the Mini you may point iTunes to the new location at startup by holding the option key (alt) at the keyboard.
iTunes will then ask you where the library is located.
Point it to the matching library on the Mini.
That's all.
Lupunus
PS ... If you both use only the Mini you have to setup a user account for each and just copy the whole library to the Music folder in particular.
Message was edited by: lupunus

I am changing to iCloud on my iMac, MacBook Air and my iPhone. My iMac and MacBook both moved over to iCloud but my iPhone when I go to Settings and click on iCloud it shows my Mail setting turned Off. When I turn it on it wants me to create a new

I am changing to iCloud on my iMac, MacBook Air and my iPhone. My iMac and MacBook both moved over to iCloud but my iPhone when I go to Settings and click on iCloud it shows my Mail setting turned Off. When I turn it on it wants me to create a new email address to turn on iCloud Mail. I already have to "me" accounts plus another email address and don't want to create another one. I don't understand why it's asking me to do this on my iPhone but didn't ask on my iMac or MacBook and is there a way around creating another @me.com email address?

Hello Timmy790
Try the suggestions in the article below to resolve the issue of seeing your old Apple ID on your iPhone.
iOS 7: If you're asked for the password to your previous Apple ID when signing out of iCloud
http://support.apple.com/kb/ts5223
Regards,
-Norm G.

I have Iphone 4 and its lock from at&t, but my contract is getting over in short time. And no longer i want to use this service. So after contract gets over its my right to get factory unlock my iphone 4. so help me

I have Iphone 4 and its lock from at&t, but my contract is getting over in short time. And no longer i want to use this service. So after contract gets over its my right to get factory unlock my iphone 4.

jatpri1730 wrote:
I have Iphone 4 and its lock from at&t, but my contract is getting over in short time. And no longer i want to use this service. So after contract gets over its my right to get factory unlock my iphone 4.
Unfortunately, AT&T does not provide unlocking.
Stedman

In the past I was using Photoshop 7 to make Web Photo Gallery. My friend could right click on the pictures from my website and save it in their computer. Recently I have bought and registered your Lightroom 5 and have updated it to 5.6. But can not progr

In the past I was using Photoshop 7 to make Web Photo Gallery. My friend could right click on the pictures from my website and save it in their computer.
Recently I have bought and registered your Lightroom 5 and have updated it to 5.6. But can not program it to create Photo Web Galleries that after uploading to my website would allow my friends to down load the pictures from the album to their computer. How could I do it? Please step by step. Thank you M. Mehdi Akhavein

Are you producing HTML galleries with Lightroom (not Flash galleries)?
Lightroom Help | Create web galleries in Lightroom

I created a pdf form and then iported it to Forms Central for distribute. It is now loaded to my website and setup so a person clicks on the link to open the form. At this point they then have to go to upper right to open form using a different view. I wo

I created a pdf form and then imported it to Forms Central for distribute. It is now loaded to my website and setup so a person clicks on the link to open the form. At this point they then have to go to upper right to open form using a different view. I would like the form to open directly in Adobe Reader form to make it easier to enter information. Thanks, Ike

If you created it in Forms Central, you have to edit it there. I believe Forms Central is similar to LiveCycle Designer in that the form created is no longer able to be edited in Acrobat. I might be wrong, but that is my understanding. You add the submit button in Forms Central. Within Acrobat, you should be able to go to the forms menu and Manage Data to save the data to an Excel file. Others better with forms should be by to clarify things, but this should get you started. In the future you might find it better to post a forms question in the forms discussions.

Sidebar moving over right border of website and outside of main container

Similar Messages

Maybe you are looking for