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 & 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>
<!-- 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
Similar Messages
-
Stop images from going under the panels?
I don't know what happened but recently when I dock an image it resizes to the entire size of the photoshop window. The image edge stops on the left at the tool bar but on the right it goes underneath my panels. Another thing that started at the same time is an issue with mini bridge, as you can see it's attached to my panel but when I click the arrow to expand it it pushes the rest of the panel to the right and off screen.
Also I've been having issues with the "Fit Screen" button. I used to be able to have the window a certain size and when I'd hit Fit Screen the the window would keep its size but the image would zoom so there were those grey areas around the image, now when I Fit Screen it resizes the window as well. I've checked that the Zoom Resizes Window option is unchecked but nothing works. Please help! I know that there is an application frame option for Mac that supposedly fixes these issues but I'm on a PC (Windows7) so I don't have that option.If you dock the panels on the right (layers,etc) like the toolbox is docked that will stop the image from going under the panels.
Just grab the top of the panels (red box in screenshot) and move to the right until you see a blue line, then release.
MTSTUNER -
I use Windows XP professional, When I use Firefox to go to my Barclay bank statements, they are unreadable as the page with the amounts on is partly covered by the Questions on the right of the page, I also have this problem with the Daily Mail rewards club, If I login to my account from Internet Explorer it works fine for both, this is without making any changes to my setup.
What you are experiencing is 100% related to Malware.
Sometimes a problem with Firefox may be a result of malware installed on your computer, that you may not be aware of.
You can try these free programs to scan for malware, which work with your existing antivirus software:
* [http://www.microsoft.com/security/scanner/default.aspx Microsoft Safety Scanner]
* [http://www.malwarebytes.org/products/malwarebytes_free/ MalwareBytes' Anti-Malware]
* [http://support.kaspersky.com/faq/?qid=208283363 TDSSKiller - AntiRootkit Utility]
* [http://www.surfright.nl/en/hitmanpro/ Hitman Pro]
* [http://www.eset.com/us/online-scanner/ ESET Online Scanner]
[http://windows.microsoft.com/MSE Microsoft Security Essentials] is a good permanent antivirus for Windows 7/Vista/XP if you don't already have one.
Further information can be found in the [[Troubleshoot Firefox issues caused by malware]] article.
Did this fix your problems? Please report back to us! -
Why is the latest upgrade of Firefox preventing me from getting on the internet. I have tried to upgrade twice and both times I have gotten "Can not display this page please try again later" I have tried to open several different pages. Both times I had to restore my computer to previous settings to get on the internet.
Hi Skydiver119
Thank you so much for taking the time to reply to my problem.
Yes the purchases were made though my apple id.
I have looked at a few other questions on this topic and I have read that the app data is stored in the backup file but the apps themselves need to be synced back onto the ipad. Someome has mentioned right clicking on sync my ipad but I don't know where to find that to right click on!! Lol.
Again, I really appreciate your time and if by any chance you know where I can 'right click' I would really appreciate you letting me know as I can't get my ipad to sync with my pc at all, although it is being picked up in itunes and it has backed up to itunes okay. GGrrr. Maybe I have something wrong in the settings which is not making them compatible? -
How do I keep iMessage from going to the upper right and out of sight?
Imessage in Mavericks at random, on sleep, and when minimized, goes to upper right on the screen and I cant get it back. Even Mission control can not access it. I have close iMessage and restart. How do I keep it from going to the upper right and out of sight?
Hi,
I think a Screen Shot will help.
Use the CMD+shift+4 and then decribe around the area when you see the cross hairs.
To Post here use the Camera icon in the reply screen and then select/navigate to the Screen Shot (normally on your Desktop) and select it.
Then use the Insert Image button.
I don't use Sleep so I can't speak to that.
Minimise should put it in the DOCK.
Do you mean coming out of Minimise ?
Actually where is your DOCK (mine is at the bottom and I nearly forgot other people have it in different places)
If it is on the right is the Finder icon top of the icons ?
If the windows of an App are minimised then it does not appear in Mission Control (some of this is mixed with normal behaviour).
9:56 pm Tuesday; May 20, 2014
iMac 2.5Ghz i5 2011 (Mavericks 10.9)
G4/1GhzDual MDD (Leopard 10.5.8)
MacBookPro 2Gb (Snow Leopard 10.6.8)
Mac OS X (10.6.8),
Couple of iPhones and an iPad -
Ever since the last update, I'm having problem accessing my e-mail account. I keep getting an annoying bar at the top of the screen "Firebox prevented this page from automatically redirecting to another page." I have to keep hitting the allow button, sometimes twice. And when I do get into the accounts the bar jumps in and out every time I open a new e-mail, or delete and old one.
How do I get rid of this. I've had this account for years, with a very reputable private e-mail provider. This is nuts.See:
*Firefox/Tools > Options > Advanced > General : Accessibility : [ ] "Warn me when web sites try to redirect or reload the page"
The setting in "Tools > Options > Advanced > General" is meant as an accessibility feature, as you can see by the label of that section, so that people with disabilities or people who use screen readers do not get confused and is not meant as a safety protection to stop redirecting.
See also:
*https://support.mozilla.com/kb/Options+window+-+Advanced+panel#General_tab
*http://kb.mozillazine.org/accessibility.blockautorefresh
*http://kb.mozillazine.org/Accessibility_features_of_Firefox -
I use a yahoo account for my e-mail which worked fine until I changed my password a few weeks ago. I now keep getting a message up telling me to insert my password again. I know I'm putting in the right password but this is driving me to distraction!
I have now deleted the account and reinstalled it but now I can't get my e-mails through at all. Can anyone make any suggestions?Hello,
Open Keychain Access in Utilities, use Keychain First Aid under the Keychain Menu item, then either check the Password under that item, change it, or delete it and start over.
You may have multiple entries.
Open Keychain Access in Utilities, enter the part after the @ sign in the search bar, hit enter -
My ipod keeps flashing on and off by itself and goes to the power off slide screen. How can I fix this problem?
Try:
- iOS: Not responding or does not turn on
- Also try DFU mode after try recovery mode
How to put iPod touch / iPhone into DFU mode « Karthik's scribblings
- If not successful and you can't fully turn the iOS device fully off, let the battery fully drain. After charging for an least an hour try the above again.
- Try on another computer
- If still not successful that usually indicates a hardware problem and an appointment at the Genius Bar of an Apple store is in order.
Apple Retail Store - Genius Bar -
I can't use the right-click function on websites (i.e. Yahoo! Mail) because Firefox's context menu is in the way.
Tools > Options > Content : JavaScript > Advanced > Allow Scripts to: [X] "Disable or replace context menus"
-
When I click on a link in an email using gmail in the Mozilla brower, I get the following message at the top of the screen:
"Firefox prevented this page from automatically redirecting to another page...[Allow].
How can I stop this?# Press Alt+T
# Select Options
# Select Advanced Panel
# Select General Tab
# You will see option "Warn me when websites try to redirect or reload page"
# Uncheck it as given in the screenshot.
<img src=http://dl.dropbox.com/u/7456129/Firefox/advancedgeneraltab.jpg width=600px height=600px>
''<hr>Note: If anyone's reply has solved your problem, then please mark that reply as "Solved It" to the right of that reply after logging in your account. It will help us to concentrate on new questions.'' -
In iOS 7 you can still make calls from the locked screen. Just swipe the missed call numbers to the right. Is this a bug?
How is it a security breach? You're free to turn off lock screen notifications for the phone app so that no one can do that.... even if they can, they can only call the number that called you... nothing else. (well, except for 900 or whatever the emergency services number is where you are, but that's required by law).
-
cant find the right forum for this but as i am having problems booting my macbook pro, keep having to reser pram etc and now wont boot at all.....
aill this theoretically work?
a. Restore entire macpro hard drive from time machine to a time over a year ago before problems started
b. Restore more recent individual files such as logic projects individually from same time machine backup
c. install any programs manually again only couple of vsts
please answer direct question as i have tried everything else and nonhardware problems just will no longer boot after months of reseting each time
cheersoops. typo: "I went ahead and befored the restore." should be... I went ahead and performed the restore.
-
Anyone know how to fix this or is anyone having the same problem? This didn't start until the big update (5.0) a month ago!!
When playing music there is no shuffle button like there was before... On the playlist there is a shuffle bar but this does nothing when I touch it. It's either stuck on my music is messed up.
Any ideas??Start playing a song.
Select the album artwork area for the song playing to reveal the scrubber for the song.
Is the color of the icon located at the right of the scrubber blue?
If so, that is the shuffle icon and blue means shuffle is on. Select the icon to turn shuffle off. White means off. -
Please help!!! iCloud keeps asking my password and it always comes out incorrect even though i know i input the right one. When i tried to reset the password by email (many times already), nothing was sent to me. Tried it again thru security settings, they asked for my birthdate but still, it's incorrect! anyone have the same problem?
Hi,
Thank you for visiting Apple Support Communities.
I would recommend reaching out to our Apple ID Account Security team to assist you with this issue.
Apple ID: Contacting Apple for help with Apple ID account security
http://support.apple.com/kb/HT5699
Cheers,
Jason H. -
Do I have the right software for this?
I am a longtime user of Macromedia Dreamweaver MX and have just recently upgraded to Adobe CS4. I have an existing webpage that I plan to completely redesign. The website content itself is simple but I would like to make the page design template much more visually appealing and dynamic. My inspiration is http://www.wickedthemusical.com/page.php#, I really like the uneven borders of the page and the turning gears. What I would truly like to do is create my page with appearing and disappearing filagrees surrounding the basic content. Now, the question: I had just begun learning about layers in Dreamweaver MX but see that they are no longer available in CS4. Am I able to achieve the kind of effects I want to with CS4? And if so, can someone give me a headstart? I realize that the actual process will be in depth but if I can just get a general direction, I should be able to figure most of it out myself. I appreciate any help.
If you are asking how to do something with Dreamweaver CS4, then the Dreamweaver forum is the place to go. If you are asking what software you can use to design something like the website you mention, then this is the right place. People can recommend what is the best software and/or methods to do what you want.
Maybe you are looking for
-
Condition type is missing in Pricing Procedure determination
Hi experts, We have a problem with Pricing Condition type in CRM. We have created a Transction in CRM as a follow up for the Transaction which is replicated from ECC to CRM the pricing procedure has been determined. But the net value is "0". when I c
-
Have attempted to INSTALL / update to 3.6 and to 4. Both unsuccessful. Download occur and complete but then message stating "corrupt disk" and so installation can not progress. I am using i mac OSX 10 .3.9 on G4. Have tried using Monzilla site and al
-
Difficulties transferring data from old PC to new iMac
I'm currently helping my neighbors set up their new iMac, 27". They own an old PC that a friend built, and it runs Windows XP. The iMac came yesterday, and I was helping them get started with it this afternoon. In order to transfer data like their iT
-
Replace square brackets in SQL queries against ODBC
We use PowerPivot to access an ODBC provider. PowerPivot generates queries with square brackets, which is not ANSI compliant and incompatible with this ODBC provider. In Office 2010, we had a workaround by modifying this file: C:\Program Files\Micros
-
RFC to JDBC Scenario: Multiple Records insertion
Hi All, I am working with RFC->XI->JDBC to update a single table on an Oracle db. When I import RFC I get multiple Records. Here is the sender XML Structure: <?xml version="1.0" encoding="UTF-8" ?> - <rfc:Z_I2_SAP2MDM_VM xmlns:rfc="urn:sap-com:docu