By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,299 Members | 1,253 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,299 IT Pros & Developers. It's quick & easy.

Can you help me fix my Layout/CSS issue?

P: 1
Hi,

I am trying to alter the CSS of my site so that content does not get displaced when the browser window size is decereased.

Screen1 shows the page when the browser size is wide enough. This is deally how the images will appear no matter what the broswer

width is, the images that fall outside the width would merely not be shown.

Screen2 shows the page when the broswer width has been decreased past a certain point.

Screen3 shows the point at which the content stops being displaced.

GOALS:

1. After the browser width is decreased to a certain point, the content stops being pushed down. I want the content not to be pushed

down at all.

2. I would also like to prevent the right sidebar "Links" from moving down.

Webpage:

Expand|Select|Wrap|Line Numbers
  1.  
  2. <div id='ocio-body'>    
  3. <div id='ocio-page-wrap'>
  4. <div id='ocio-main-content'>
  5. <div id='ocio-wrapper'>
  6.  
  7. <!-- CONTENT -->
  8.  
  9. </div><!-- end ocio-wrapper--> 
  10. </div><!--/ocio-main-content-->
  11.  
  12. <div id="col-c">
  13.  
  14. <h3>Links</h3>
  15. <ul>
  16. <li>ICE Image Gallery</li>
  17. <li>DHS Photo Gallery</li>
  18. </ul>
  19.  
  20. </div><!--/col-c-->
  21.  
  22. </div><!--/ocio-page-wrap--> 
  23. </div><!--/ocio-body-->
  24.  
  25.  

CSS:

Expand|Select|Wrap|Line Numbers
  1.  
  2. #ocio-body { position: relative;/*font: 15px/2 Arial, sans-serif; background: #999;*/ border:thin solid 1px red;}
  3. #ocio-body h1 { /*color: white; padding: 10px;*/ }
  4. #ocio-page-wrap            { max-width: 100%; min-width: 560px; margin: 0; position: relative; border:thin solid 1px orange; }
  5. #ocio-page-wrap-02, #ocio-page-wrap-03 { min-width: 560px; margin: 0; position: relative; /*border:thin solid 1px orange;*/ }
  6. #ocio-header            { max-width: 610px; min-width: 560px; background: #222; margin: 15px auto 0; }
  7. #ocio-main-content      { position:relative; float:left; max-width:80%; background:transparent; border:thin solid 1px blue; /*padding: 0px 190px 0px 0px;*/ }
  8. #ocio-main-content-02   { position:relative; float:left; max-width:620px; background:transparent; /*border:thin solid 1px blue; padding: 0px 190px 0px 0px;*/ }
  9. #ocio-main-content-03   { position:relative; float:left; max-width:880px; background:transparent; /*border:thin solid 1px blue; padding: 0px 190px 0px 0px;*/ }
  10. #ocio-main-sidebar      { position:relative; float:right; width:160px; height:100%; bottom:0%; background:#FFF; padding:0px 0px 0px 9px; border-left:thin solid 1px #CCCCCC; }
  11. #ocio-wrapper {/*border:thin solid 1px green;*/ background:transparent; }
  12. #col-c {position:relative; float:right; width:150px; padding-left:5px; border-left:thin solid 1px #CCCCCC; }
  13.  
  14.  

Thanks!
Alan
Attached Images
File Type: jpg screen1.jpg (41.0 KB, 98 views)
File Type: jpg screen2.jpg (56.2 KB, 96 views)
File Type: jpg screen3.jpg (78.5 KB, 97 views)
May 1 '12 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.