[c9-adams]

Hey guys,

I am currently working on a project which makes use of a css fluid layout so when the user decreases the size of the window, the layout changes and fits in with the change of screen size. I am unfortunately having problems whereby when I change the screen size it changes the style of the header unyet the container section remains static. I have tried using max-width and min-width with no avail.

This is a link to my work - *please note this site works best in Google Chrome and Firefox - http://www.cems.uwe....ject1/home.html

css:

body{background-image:url('images/background.jpg');margin-left:460px;margin-right:-100px;max-width:1200px;min-width:5%;margin:auto;padding:0;padding-top:0px;}/**/@font-face{font-family:myFirstFont;src:url('Margarine-Regular.ttf');}/**/header{margin-left:auto;margin-right:auto;max-width:1200px;min-width:10px;padding:0;font-family:"gautami",calibri;letter-spacing:1px;}/**/#banner{position:relative;right:-3.1em;top:1.5em;font-family:Alan Den;margin-top:-55px;}/**/#logo{position:relative;top:-14em;right:3em;max-width:10px;min-width:5%;max-height:10px;min-height:5%;}/**/article{font-family:"Utsaah",calibri;margin-left:auto;margin-right:auto;max-width:1200px;min-width:10px;padding:0;}/**/aside{font-family:"gautami",calibri;letter-spacing:1px;background-image:url('images/background-2.jpg');margin-left:-650px;max-height:455px;min-height:445px;max-width:2712px;min-width:2711px;margin-top:50px;/**//**/}/**//**/#aside-column1{max-width:230px;min-width:120px;max-height:30px;min-height:28px;margin-left:660px;position:relative;top:4em;font-family:"Utsaah",calibri;}#aside-column2{max-width:1200px;min-width:260px;margin-left:280px;margin-top:-358px;text-align:left;font-family:"Utsaah",calibri;}#aside-column3{max-width:360px;min-width:350px;margin-left:610px;text-align:left;font-family:"Utsaah",calibri;margin-top:-403px;position:absolute;}#border-top{position:relative;top:4em;right:62em;max-width:2890px;min-width:2790px;margin-right:-1300px;}#border-bottom{position:relative;top:-3em;right:44.1em;max-width:2250px;min-width:2050px;margin-right:-800px;}#border-bottom-2{position:relative;top:-3em;right:44.4em;width:2500px;}footer{font-family:"utsaah",calibri;margin-left:auto;margin-right:auto;max-width:1200px;min-width:220px;padding:0;}/**/#designer{margin-top:-34.5px;position:relative;right:-50em;}#arrow{margin-left:960px;margin-top:-53px;}/**/input{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;width:170px;height:30px;color:#6D6968;font-weight:bold;border-style:solid;border-width:1px;border-color:#669999;background-color:#EBEBEB;}/**/#search{position:relative;right:-45.5em;padding:0;margin-top:-133px;}/**/#button{background-color:#34282C;color:white;height:33.9px;max-width:69px;min-width:20px;font-weight:bold;border-top-left-radius:0px;border-bottom-right-radius:10px;border-top-right-radius:0px;border-bottom-left-radius:0px;margin-left:auto;margin-right:auto;padding:0;}/**/#button:hover{background-color:#e0e0e0;color:black;}/**/#flower{max-width:100%;min-width:20%;padding:0;position:relative;right:-53.9em;top:-6.9em;z-index:1;}/**/a{color:#a83f44;text-decoration:none;}/**/a:hover{color:black;background-color:#e0e0e0;text-decoration:none;}/**//**/h1{font-family:myFirstFont;font-size:90px;text-shadow:3px 3px 3px #628b8d;text-transform:uppercase;max-width:100%;min-width:5px;margin-left:150px;margin-right:auto;}h2{font-family:"Utsaah",calibri;font-size:28px;position:relative;right:-3.5em;top:-1.5em;font-weight:bold;text-shadow:1px 1px #628b8d;text-transform:uppercase;}h3{font-family:"Utsaah",calibri; color:#2f3430;font-weight:bold;font-size:29px;text-shadow:1px 1px #628b8d;}h4{font-family:myFirstFont;}h5{font-family:myFirstFont;text-align:center;}/**/nav{background-color:#67999a;border-top:1px dashed;border-bottom:1px dashed;font-family:"utsaah",calibri;color:black;font-weight:bold;max-height:55px;min-height:55px;max-width:970px;min-width:965px;}nav ul{margin:0px;text-align:center;font-family:"utsaah",calibri;font-size:23px;margin-left:90px;padding:0;margin-left:0px;color:black;padding-top:15px;min-width:40px;}nav ul li{display:inline;list-style:none;padding:13px;text-transform:uppercase;}nav li a{color:black;text-decoration:none;font-family:"utsaah",calibri;}nav ul li:hover{color:black;background-color:#e0e0e0;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;transition:all 1s ease-in-out;transform:skew(30deg);transform:rotate(30deg);}nav li ul{display:none;}nav ul li a{display:inline;white-space:nowrap;}nav li:hover ul{display:inline;position:absolute;margin-top:1.5em;margin-left:-8.5em;}nav li:hover li{float:none;font-size:19px;font-family:"utsaah",calibri;font-weight:bold;border:1px solid black;background-color:#a83f44;}nav li:hover li a:hover{background:#e0e0e0;}ul.navigation li.highlight{background:#e0e0e0;}ul.navigation li.highlight a{color:black;cursor:default;}/**/.triangle{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid black;position:relative;top:0.5em;}.triangle:hover{width:0;height:0;border-color:#a83f44 transparent transparent;border-style:solid;border-width:11px 7px 10px;position:relative;top:0.5em;}/**/#container{max-width:964px;min-width:960px;width:20%;border:1px solid #686465;background-color:white;-moz-border-radius:5px;border-radius:5px;-moz-box-shadow:10px 10px 10px #628b8d;-webkit-box-shadow:10px 10px 10px #628b8d;box-shadow:10px 10px 10px #628b8d;}.container-column-1{max-width:450px;min-width:20px;margin-left:24px;padding-top:25px;font-family:"utsaah",calibri;}.container-column-2{margin-left:504px;margin-top:-375px;max-width:450px;min-width:5%;}/**/hr{max-width:910px;border:1px solid #999999;}.hr-1{max-width:235px;border-top:1px dotted #336699;border-bottom:1px solid white;}.hr-2{max-width:280px;border-top:1px dotted #336699;border-bottom:1px solid white;}.hr-3{max-width:356px;border-top:1px dotted #336699;border-bottom:1px solid white;}.container-hr-main{max-width:95%;min-width:60%;padding:0;}.container-hr-1{max-width:95%;min-width:60%;padding:0;border:none;border-top:medium double #999999;}.container-hr-2{max-width:95%;min-width:10%;padding:0;border:none;border-top:medium double #999999;}iframe{max-width:100%;min-width:60%;margin-left:-12px;}/**/.tooltip{border-bottom:1px dashed #336699;color:#2f3430;outline:none;cursor:help;text-decoration:none;position:relative;} .tooltip span{margin-left:-999em;position:absolute;}.tooltip:hover input{border-radius:5px 25px;-moz-border-radius:5px;-webkit-border-radius:5px;box-shadow:5px 5px 5px rgba(0,0,0,0.1);-webkit-box-shadow:5px 5px rgba(0,0,0,0.1);-moz-box-shadow:5px 5px rgba(0,0,0,0.1);font-family:Calibri,Tahoma,Geneva,sans-serif;position:absolute;left:1em;top:2em;z-index:99;margin-left:0;width:450px;background-color:#996600;border-bottom:3px dotted #000000;border-top:3px dotted #000000;}.tooltip:hover span{border-radius:5px 25px;-moz-border-radius:5px;-webkit-border-radius:5px;box-shadow:5px 5px 5px rgba(0,0,0,0.1);-webkit-box-shadow:5px 5px rgba(0,0,0,0.1);-moz-box-shadow:5px 5px rgba(0,0,0,0.1);font-family:Calibri,Tahoma,Geneva,sans-serif;position:absolute;left:1em;top:2em;z-index:99;margin-left:0;width:450px;background-color:#996600;border-bottom:3px dotted #000000;border-top:3px dotted #000000;}.tooltip:hover img{border:0;margin:-10px 0 0 -55px;float:left;position:absolute;}.tooltip:hover em{font-family:calibri,Tahoma,Geneva,sans-serif;font-size:16px;font-weight:bold;display:block;padding:0.2em 0 0.6em 0;color:white;}.SAM{padding:0.8em 1em;}/**/.email{font-size:15px;}.email:hover{background-color:#e0e0e0;font-family:Alan Den;color:#34282C;}.tel:hover{background-color:#e0e0e0;font-family:Alan Den;color:#34282C;}/**/.bbc-image{border:10px solid #e0e0e0;padding:6px;width:400px;}.surfer{border:10px solid #e0e0e0;padding:6px;margin-top:55px;width:400px;}.girl{border:10px solid #e0e0e0;padding:6px;width:400px;}.facebook{position:relative;right:7.5em;}.twitter{position:relative;right:4.5em;top:-2.5em;}.flikr{position:relative;right:1.5em;top:-5em;}.linkedin{position:relative;right:-1.5em;top:-7.5em;}.youtube{position:relative;right:-4.5em;top:-10em;}/**/.holiday-picture-1{-moz-box-shadow:0 21px 14px -11px #000;-webkit-box-shadow:0 21px 14px -11px #000;box-shadow:0 19px 22px -10px #000;}.holiday-picture-2{-moz-box-shadow:0 21px 14px -11px #000;-webkit-box-shadow:0 21px 14px -11px #000;box-shadow:0 21px 21px -10px #000;}.holiday-picture-3{-moz-box-shadow:0 21px 14px -11px #000;-webkit-box-shadow:0 21px 14px -11px #000;box-shadow:0 21px 21px -10px #000;}.holiday-picture-4{-moz-box-shadow:0 21px 14px -11px #000;-webkit-box-shadow:0 21px 14px -11px #000;box-shadow:0 21px 21px -10px #000;}/**/#googleMap{position:relative;top:-8em;border:10px solid #e0e0e0;max-width:450px;min-width:40px;max-height:450px;min-height:440px;right:1.5em;margin:0 auto;}.fn{background-color:#e0e0e0;font-weight:bold;font-style:italic;}.fn:hover{background-color:#a83f44;color:white;font-weight:bold;font-style:italic;}.org{font-style:italic;font-family:arial;}.org:hover{font-style:italic;font-family:arial;color:#a83f44;font-weight:bold;}.sams-email{font-family:comic sans;font-weight:bold;}.sams-email:hover{font-family:comic sans;font-weight:bold;border:5px solid pink;padding:8px;background-color:black;color:white;}.street-address{background-color:#4682B4;color:white;font-weight:bold;border:5px solid black;padding:3px;}.locality{font-family:calibri;font-style:italic;color:#4682B4;}.postal-code{font-family:Myriad;color:#a83f44;font-style:italic;}.country-name{color:red;font-weight:bold;}.contact-info{border:10px solid #e0e0e0;padding:6px;margin-left:-35px;margin-top:23px;max-width:400px;min-width:360px;}.thanks{margin-top:40px;border:10px solid #e0e0e0;margin-left:-13px;max-width:100%;min-width:40%;max-height:100%;min-height:40%;overflow:hidden;}.surfing-video{position:relative;right:-1em;margin-top:8em;}.video1{position:relative;top:-3em;}#border-texture{background:linear-gradient(#BCED91 49%,transparent 49%),linear-gradient(-45deg,white 33%,transparent 33%) 0 50%,white linear-gradient(45deg,white 33%,#BCED91 33%) 0 50%;background-repeat:repeat-x;background-size:1px 100%,40px 40px,40px 40px;}.more-info-1{float:right;}.more-info-2{float:right;}.more-info-3{float:right;}.required:focus{border:none;/**//**/-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;background-image:url(../images/asterix.jpg);background-repeat:no-repeat;background-position:right;}

[Lemur]

That CSS is absolutely impossible to read. Tabbing and whitespace are dead essential, because code is read far more often than it's written. Honestly it looks generated which is a bad thing as well.

Divide up the code, make it cleaner, and read back through it. How you have it now will only confuse people.

[andrewsw]

Essentially, your min-widths are too small (5%, 10px?!) so that causes child elements to overflow when the browser is narrowed.

But your layout is all out of whack. The page is too wide on first loading. For example, you have a (small) flower with a width of 1200px, and it shouldn't be necessary to mess with the left and right-margins of the body.

CSS fluid layouts usually involve percentages, centring elements and sometimes floats.

http://matthewjamest...-liquid-layouts

[andrewsw]

You've also applied different max- and min-widths to many elements on your page, so they are not likely to co-operate very well.

Essentially, you need a min-width on a parent container that is sufficiently wide to neatly contain its child elements. If these elements are block-level elements, such as Ps, then these will contract with their parent (down-to the min-width).

This post has been edited by andrewsw: 25 January 2013 - 06:04 PM