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:
CSS:
Thanks!
Alan
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:
Code:
<div id='ocio-body'> <div id='ocio-page-wrap'> <div id='ocio-main-content'> <div id='ocio-wrapper'> <!-- CONTENT --> </div><!-- end ocio-wrapper--> </div><!--/ocio-main-content--> <div id="col-c"> <h3>Links</h3> <ul> <li>ICE Image Gallery</li> <li>DHS Photo Gallery</li> </ul> </div><!--/col-c--> </div><!--/ocio-page-wrap--> </div><!--/ocio-body-->
CSS:
Code:
#ocio-body { position: relative;/*font: 15px/2 Arial, sans-serif; background: #999;*/ border:thin solid 1px red;}
#ocio-body h1 { /*color: white; padding: 10px;*/ }
#ocio-page-wrap { max-width: 100%; min-width: 560px; margin: 0; position: relative; border:thin solid 1px orange; }
#ocio-page-wrap-02, #ocio-page-wrap-03 { min-width: 560px; margin: 0; position: relative; /*border:thin solid 1px orange;*/ }
#ocio-header { max-width: 610px; min-width: 560px; background: #222; margin: 15px auto 0; }
#ocio-main-content { position:relative; float:left; max-width:80%; background:transparent; border:thin solid 1px blue; /*padding: 0px 190px 0px 0px;*/ }
#ocio-main-content-02 { position:relative; float:left; max-width:620px; background:transparent; /*border:thin solid 1px blue; padding: 0px 190px 0px 0px;*/ }
#ocio-main-content-03 { position:relative; float:left; max-width:880px; background:transparent; /*border:thin solid 1px blue; padding: 0px 190px 0px 0px;*/ }
#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; }
#ocio-wrapper {/*border:thin solid 1px green;*/ background:transparent; }
#col-c {position:relative; float:right; width:150px; padding-left:5px; border-left:thin solid 1px #CCCCCC; }
Thanks!
Alan