DarkxPunk Posted August 21, 2013 Share Posted August 21, 2013 (edited) Hey everyone, Here I wanna list through questions and issues to try and find the best fluid layout framework for me to use. ***UPDATE*** Please feel free to check out and use any code from here: http://testzone.ormt.ca/ This is my test zone and I strongly support open source code! ***UPDATE*** Here is my issue so far: When I shrink the page to 480px an odd spacing appears on these divs... They are not hugging each other... <!DOCTYPE html><html><head> <meta charset="UTF-8"/> <title>Test Zone 1</title> <link rel="stylesheet" type="text/css" href="reset.css"/> <link rel="stylesheet" type="text/css" href="style.css"/> <script type="text/javascript" src="javascript.js"></script></head><body> <div id="pageWrap"> <div class="contentWrap"> <div class="col2S"> <h1>Test Zone 1</h1> </div> <div class="col2B"> <p>This is my test zone 1</p> </div> </div> <div class="contentWrap"> <div class="col3LC"> <h1>Test Zone 1</h1> </div> <div class="col3CC"></div> <div class="col3RC"> <div class="col2S"> <h1>Test Zone 1</h1> </div> <div class="col2B"> <p>This is my test zone 1</p> </div> </div> </div> <div class="contentWrap"> <div class="col3L"> <h1>Test Zone 1</h1> </div> <div class="col3C"> </div> <div class="col3R"> <p>This is my test zone 1</p> </div> </div> <div id="push"></div> </div> <div id="footer"></div></body></html> body,html { width: 100%; height: 100%;}#pageWrap { width: 100%; min-height: 100%; height: auto !important; height: 100%;}.contentWrap { margin: 0 auto; padding: 3em 1.5em 4.5em; max-width: 96em; overflow: hidden;}.col2B,.col2S,.col3L,.col3C,.col3R,.col3LC,.col3CC,.col3RC { float: left; min-height: 10em;}.col2B { width: 62%; background-color: #ed6666;}.col2S { width: 38%; background-color: #8967ee;}.col3L,.col3C,.col3R { width: 33.36%;}.col3L,.col3R { background-color: #ed6666;}.col3C { background-color: #8967ee; }.col3LC,.col3RC { width: 49.999998%; background-color: #ed6666;}.col3RC { background-color: #8967ee;}.col3CC { border-left: 0.1em solid #000000;}#push { width: 100%; height: 20em;}#footer { margin: -20em 0 0; border-top: 0.1em solid #000000; width: 100%; height: 19.9em; clear: both;}@media screen and (max-width: 480px) { .col2B,.col2S,.col3L,.col3C,.col3R,.col3LC,.col3CC,.col3RC { width: 100%; float: none; clear: both; } .col3CC { display: none; }} I will keep playing, but any ideas are greatly appreciated. Edited August 25, 2013 by DarkxPunk Link to comment Share on other sites More sharing options...
davej Posted August 21, 2013 Share Posted August 21, 2013 What does your reset.css look like? <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>title</title><style>*{ margin: 0; padding: 0;}body,html { width: 100%; height: 100%;}#pageWrap { width: 100%; min-height: 100%; height: auto !important; height: 100%;}.contentWrap { margin: 0 auto; padding: 3em 1.5em 4.5em; max-width: 96em; overflow: hidden;}.col2B,.col2S,.col3L,.col3C,.col3R,.col3LC,.col3CC,.col3RC { float: left; min-height: 10em;}.col2B { width: 62%; background-color: #ed6666;}.col2S { width: 38%; background-color: #8967ee;}.col3L,.col3C,.col3R { width: 33.36%;}.col3L,.col3R { background-color: #ed6666;}.col3C { background-color: #8967ee; }.col3LC,.col3RC { width: 49.999998%; background-color: #ed6666;}.col3RC { background-color: #8967ee;}.col3CC { border-left: 0.1em solid #000000;}#push { width: 100%; height: 20em;}#footer { margin: -20em 0 0; border-top: 0.1em solid #000000; width: 100%; height: 19.9em; clear: both;}@media screen and (max-width: 480px) { .col2B,.col2S,.col3L,.col3C,.col3R,.col3LC,.col3CC,.col3RC { width: 100%; float: none; clear: both; } .col3CC { display: none; }}</style></head><body><div id="pageWrap"> <div class="contentWrap"> <div class="col2S"> <h1>Test Zone 2S</h1> </div> <div class="col2B"> <p>This is my test zone 2B</p> </div> </div> <div class="contentWrap"> <div class="col3LC"> <h1>Test Zone 3LC</h1> </div> <div class="col3CC"></div> <div class="col3RC"> <div class="col2S"> <h1>Test Zone 2S</h1> </div> <div class="col3RC"> <p>This is my test zone 3RCB</p> </div> </div> </div> <div class="contentWrap"> <div class="col3L"> <h1>Test Zone 3L</h1> </div> <div class="col3C"> <p>blue</p> </div> <div class="col3R"> <p>This is my test zone 3R</p> </div> </div> <div id="push"></div> </div> <div id="footer"></div></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted August 21, 2013 Share Posted August 21, 2013 Try avoid using width: 100% as much, especially on block elements, the width will usually end up being total width of parent, but extras like margins will be added to this as well. Whereas a block element as it is, will stretch to full width available to it. Link to comment Share on other sites More sharing options...
DarkxPunk Posted August 22, 2013 Author Share Posted August 22, 2013 Try avoid using width: 100% as much, especially on block elements, the width will usually end up being total width of parent, but extras like margins will be added to this as well. Whereas a block element as it is, will stretch to full width available to it. Interesting... Should I still make the html and body 100% width? What does your reset.css look like? html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{ margin:0; padding:0; border:0; font-family: arial, helvetica, sans-serif; vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ display:block;}body{ line-height:1; font-size:62.5%;}h1{ font-size:3.2em; margin:1em 0;}h2{ font-size:2.4em; margin:1.2em 0;}h3{ font-size:1.8em; margin:1.3em 0;}h4,a,a:link,a:visited,a:hover,a:active,p,blockquote,ul,fieldset,form,ol,dl,dir,menu{ font-size:1.4em;}h4,p{ margin:1.7em 0;}h5{ font-size:1.3em; margin:2.4em 0;}h6{ font-size:1.2em; margin:2.6em 0;}a,a:link,a:visited{ text-decoration:none;}a:hover,a:active{ text-decoration:underline;}ol,ul{ list-style:none;}blockquote,q{ quotes:none;}blockquote:before,blockquote:after,q:before,q:after{ content:''; content:none;}table{ border-collapse:collapse; border-spacing:0;} Link to comment Share on other sites More sharing options...
DarkxPunk Posted August 22, 2013 Author Share Posted August 22, 2013 I think I found the cause of the spacing... But I don't understand why, or have a workaround... The margins on the elements I am using are scaled down to fit the smaller default font size... I read a good way to contain margins from overlapping was to add a padding to the wrapper, which I did and it's still affecting... Confused Link to comment Share on other sites More sharing options...
davej Posted August 22, 2013 Share Posted August 22, 2013 (edited) I think what we need is an image / diagram / storyboard / mockup that shows us what you are trying to make the page look like. Edited August 22, 2013 by davej Link to comment Share on other sites More sharing options...
dsonesuk Posted August 22, 2013 Share Posted August 22, 2013 Interesting... Should I still make the html and body 100% width? Why? Its not required, if you don't zero the margins/padding of body/html, what would happen is these elements would be be 100% width of browser window PLUS the default margin, which would cause horizontal scrollbars to appear when a block element is added with content such as paragraph with text or div with text. The same will happen with block elements given 100% width, where it contains paragraphs and you wish to move this container 15px from left so the paragraphs inside it are away from left edge of outer parent container. body, html { background-color:#CCCC00; width: 100%;}#wrapper {background-color:#CC9966; width: 980px; margin: 0 auto; height: 400px;}#wrapper div {background-color:#66CC99; width: 100%; margin-left:15px;} <body><div id="wrapper"><div> <p>Big is no longer impregnable exploiting the productive lifecycle the vitality of conceptual synergies is of supreme importance. Motivating participants and capturing their expectations, by moving executive focus from lag financial indicators to more actionable lead indicators, taking full cognizance of organizational learning parameters and principles. Working through a top-down, bottom-up approach, the balanced scorecard, like the executive dashboard, is an essential tool while those at the coal face don't have sufficient view of the overall goals.</p> <p>An important ingredient of business process reengineering as knowledge is fragmented into specialities benchmarking against industry leaders, an essential process, should be a top priority at all times. Quantitative analysis of all the key ratios has a vital role to play in this working through a top-down, bottom-up approach, building flexibility through spreading knowledge and self-organization. The vitality of conceptual synergies is of supreme importance building a dynamic relationship between the main players.</p></div></div></body> You will see the inner div has moved 15px to right with same 100% width of parent BEYOND the outer parent right edge, (also note scrollbars appearing on html/body in this example), by removing width: 100% it reverts to width available to it after the margin is applied. Link to comment Share on other sites More sharing options...
DarkxPunk Posted August 25, 2013 Author Share Posted August 25, 2013 (edited) I think what we need is an image / diagram / storyboard / mockup that shows us what you are trying to make the page look like. Reality Want --EDIT-- So I tried the padding fix again... The reason it did not work last time was because I only added it to the top, needed to be on both the top and bottom. Now this can't be the best way to fix this, I know I can do floats or position fixed but there must be a better way! Okay, second thought... I guess floats do work... I got rid of the padding while using floats, but ugh I hate (what I say below). ***DAMN YOU COLLAPSING MARGINS!*** Edited August 25, 2013 by DarkxPunk Link to comment Share on other sites More sharing options...
DarkxPunk Posted August 25, 2013 Author Share Posted August 25, 2013 I added to the top of this thread, but will make clear here... Please feel free to check out and use any code from here: http://testzone.ormt.ca/ This is my test zone and I strongly support open source code! Link to comment Share on other sites More sharing options...
davej Posted August 25, 2013 Share Posted August 25, 2013 (edited) Uh, each region should ideally have a unique name. Try... <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>darkxpunk 2b</title><style>html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{ margin:0; padding:0; border:0; font-family: arial, helvetica, sans-serif; vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ display:block;}body{ line-height:1; font-size:62.5%;}h1{ font-size:3.2em; /*margin:1em 0;*/}h2{ font-size:2.4em; margin:1.2em 0;}h3{ font-size:1.8em; margin:1.3em 0;}h4,a,a:link,a:visited,a:hover,a:active,p,blockquote,ul,fieldset,form,ol,dl,dir,menu{ font-size:1.4em;}h4,p{ /*margin:1.7em 0;*/}h5{ font-size:1.3em; margin:2.4em 0;}h6{ font-size:1.2em; margin:2.6em 0;}a,a:link,a:visited{ text-decoration:none;}a:hover,a:active{ text-decoration:underline;}ol,ul{ list-style:none;}blockquote,q{ quotes:none;}blockquote:before,blockquote:after,q:before,q:after{ content:''; content:none;}table{ border-collapse:collapse; border-spacing:0;}/****************************************************/body,html { height: 100%;}#pageWrap { min-height: 100%; height: auto !important; height: 100%;}.contentWrap { margin: 0 auto; margin-bottom: 3em; /*padding: 3em 1.5em 4.5em;*/ max-width: 96em; overflow: hidden;}.col2B,.col2S,.col3L,.col3C,.col3R,.col3LC,.col3CC,.col3RC { float: left; min-height: 10em;}.col2B { width: 61%; background-color: #ed6666;}.col2S { width: 38%; background-color: #8967ee;}.col3L,.col3C,.col3R { width: 33%;}.col3L,.col3R { background-color: #ed6666;}.col3C { background-color: #8967ee; }.col3LC,.col3RC { width: 49%; background-color: #ed6666;}.col3RC { background-color: #8967ee;}.col3CC { border-left: 0.1em solid #000000; background-color: #aaa;}#push { width: 100%; height: 20em;}#footer { margin: -20em 0 0; border-top: 0.1em solid #000000; width: 100%; height: 19.9em; clear: both;}@media screen and (max-width: 480px) { .col2B,.col2S,.col3L,.col3C,.col3R,.col3LC,.col3CC,.col3RC { width: 100%; float: none; clear: both; } .col3CC { display: none; }}</style></head><body><div id="pageWrap"> <div class="contentWrap"> <div class="col2S"> <h1>TOP col2S</h1> </div> <div class="col2B"> <p>TOP col2B</p> </div> </div> <div class="contentWrap"> <div class="col3LC"> <h1>MIDDLE col3LC</h1> </div> <div class="col3CC"> <p>MIDDLE col3cc</p> </div> <div class="col3RC"> <p>MIDDLE col3RC</p> <div class="col2S"> <h1>MIDDLE col2S</h1> </div> <div class="col3RC"> <p>MIDDLE col3RC</p> </div> </div> </div> <div class="contentWrap"> <div class="col3L"> <h1>BOTTOM col3L</h1> </div> <div class="col3C"> <p>BOTTOM col3C</p> </div> <div class="col3R"> <p>BOTTOM col3R</p> </div> </div> <div id="push"></div> </div> <div id="footer">Footer</div></body></html> Edited August 25, 2013 by davej Link to comment Share on other sites More sharing options...
dsonesuk Posted August 25, 2013 Share Posted August 25, 2013 this works for me, well in firefox anyway body, html { height: 100%;}#pageWrap { min-height: 100%; min-width: 320px;}.contentWrap { clear: both; margin: 3em 1.5em; min-width: 320px; overflow: hidden;}#header { height: 18em; margin: 1.5em; overflow: visible;}#header .col2 { height: 100%;}#headerL { background-color: #ED6666; float: none; overflow: hidden;}#headerL .logo { margin: 5em auto 0;}.logo { height: 8em; width: 26.5em;}.logo div { float: left;}.logogram { background-color: #8967EE; height: 8em; width: 12em;}.logotype h1, .logotype h2 { margin: 0;}#headerR { background-color: #8967EE; float: right; height: 2em; min-height: 2em !important; position: relative; text-align: right;}#nav { bottom: -0.5em; display: block; position: absolute; right: -0.5em;}#nav li { border: 0.2em solid #27FF00; float: left; margin: 0 0 0 1em;}#nav a { background-color: #ED6666; display: block;}.col2, .col2B, .col2S, .col3L, .col3C, .col3R, .col3LC, .col3CC, .col3RC { float: left; min-height: 10em;}.col2 { width: 50%;}.col2B { background-color: #ED6666; width: 62%;}.col2S { background-color: #8967EE; width: 38%;}.col3L, .col3C, .col3R { width: 33.33%;}.col3L, .col3R { background-color: #ED6666;}.col3C { background-color: #8967EE;}.col3LC, .col3RC { background-color: #ED6666; width: 49.83%;}.col3RC { background-color: #8967EE;}.col3CC { border-left: 0.1em solid #000000;}#push, #footer { height: 20em;}#footer { border-top: 0.1em solid #000000; clear: both; margin: -20em 0 0;}#footer .contentWrap { margin: 0 1.5em;}#footer .contentWrap, #footer .contentWrap div { height: 100%;}@media screen and (max-width: 640px) {.col2, .col2B, .col2S, .col3L, .col3C, .col3R, .col3LC, .col3CC, .col3RC { clear: both; min-width: 320px; width: 100%;}.col3CC { display: none;}#header, #footer .contentWrap { height: auto;}#headerL .logo { margin: 5em auto;}#headerR { float: right;}} Link to comment Share on other sites More sharing options...
davej Posted August 25, 2013 Share Posted August 25, 2013 Okay, second thought... I guess floats do work... So you are all happy now? Link to comment Share on other sites More sharing options...
DarkxPunk Posted August 25, 2013 Author Share Posted August 25, 2013 It's a functional solution, but no, I am not happy cause I hate collapsing margins.Be great to see something similar to box-sizing for margin collapsing Link to comment Share on other sites More sharing options...
davej Posted August 26, 2013 Share Posted August 26, 2013 (edited) And "Collapsing Margins" is the general descriptive term for the weirdness of using float? I agree that the effect of float seems to be weirder than what you would think is necessary or desirable. What would be helpful would be a way to turn on a visible "outline" at the outer edge of the margins, or a way to make the margins a visible region, and the browser developer tools should do this. <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>Float is weird</title><style>*{margin: 0;padding: 0;}#container{width: 80%;margin: 0 auto;background-color: #ccc;}div.small{float: left;width: 200px;height: 200px;border: 1px solid black;background-color: red;text-align: center;}div.smallrect{float: left;width: 200px;height: 100px;border: 1px solid black;background-color: blue;text-align: center;}div.tinyrect{float: left;width: 100px;height: 30px;border: 1px solid black;background-color: yellow;text-align: center;}div.medrect{float: left;width: 120px;height: 40px;border: 1px solid black;background-color: orange;text-align: center;}footer{text-align: center;font-size: 10pt;float: none;clear: both;}</style><script>window.onload = function(){var c = document.getElementById('ckbox');c.onchange = setMargins;c.checked = false;}function setMargins(){var m = document.getElementById('ckbox').checked;var list = document.getElementsByTagName('div');for(var i=0 ; i<list.length ; i++){if (m){list[i].style.margin = '10px 10px';}else{list[i].style.margin = '0';}}}</script></head><body><div id="container"><div class="small"><p>1</p></div><div class="smallrect"><p>2</p></div><div class="tinyrect"><p>3</p></div><div class="medrect"><p>4</p></div><div class="small"><p>5</p></div><div class="tinyrect"><p>6</p></div><footer><hr/><label><input type="checkbox" id="ckbox"> Enable margins</label><p>© Copyright 2013 Footer</p><p>Adjust the width of the browser window</p></footer></div><!-- end of container --></body></html> Edited August 26, 2013 by davej Link to comment Share on other sites More sharing options...
DarkxPunk Posted August 28, 2013 Author Share Posted August 28, 2013 (edited) I don't understand the point your trying to make... But its fine... To clarify myself... I hate collapsing margins, the idea of collapsing margins because (some) people want that when writing text is silly to me. Margins are margins, they should not be collapsed in when against each other. Its annoying to me. Floats make margins act like margins, stops that silly collapsing, and make containing elements stay well, contained. Its a pain that I have to float everything when I wanna stack divs because of silly margins. Anyway rant over... Nothing I can do right now... Still be great a margin-collapse addition to CSS, simply to turn it off! Now my next post I got an interesting issue... Edited August 28, 2013 by DarkxPunk Link to comment Share on other sites More sharing options...
DarkxPunk Posted August 28, 2013 Author Share Posted August 28, 2013 (edited) So my current code... HTML: <!DOCTYPE html><html><head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Test Zone 1</title> <link rel="stylesheet" type="text/css" href="reset.css"/> <link rel="stylesheet" type="text/css" href="style.css"/> <script type="text/javascript" src="javascript.js"></script> <!--[if lt IE 7]> <style rel="stylesheet" type="text/css"> #pageWrap {height: 100% !important;} </style> <![endif]--></head><body> <div id="pageWrap"> <div id="header" class="contentWrap "> <div id="headerR" class="col2"> <ul id="nav"> <li><a>Link 1</a></li> <li><a>Link 2</a></li> <li><a>Link 3</a></li> </ul> </div> <div id="headerL" class="col2"> <div class="logo"> <div class="logogram"><p>Logo</p></div> <div class="logotype"> <h1>ComNaBi</h1> <h2>ComNaSm</h2> </div> </div> </div> </div> <div class="contentWrap"> <div class="col3L"> <h1>Test Zone 1</h1> </div> <div class="col3C"> </div> <div class="col3R"> <p>This is my test zone 1</p> </div> </div> <div id="push"></div> </div> <div id="footer"> <div class="contentWrap"> <div class="col3LC"> <h1>Test Zone 1</h1> </div> <div class="col3CC"></div> <div class="col3RC"> <div class="col2S"> <h1>Test Zone 1</h1> </div> <div class="col2B"> <p>This is my test zone 1</p> </div> </div> </div> </div></body></html> CSS: body,html { height: 100%; background-color: #000000;}#pageWrap { min-height: 100%; height: auto !important;}.contentWrap { margin: 0 auto; padding: 3em 1.5em 4.5em; max-width: 100%; overflow: hidden;}#header { height: 18em; padding: 0 1.5em; overflow: visible;}#header .col2 { height: 100%;}#headerL { background-color: #ed6666; float: left;}#headerL .logo { margin: 5em auto 0;}.logo { width: 26.5em; height: 8em;}.logo div { float: left;}.logogram { width: 12em; height: 8em; background-color: #8967ee;}.logotype h1,.logotype h2{ margin: 0;}#headerR { min-height: 2em !important; text-align: right; background-color: #8967ee; float: right; position: relative;}#nav { display: block; position: absolute; right: -0.5em; bottom: -0.5em; font-size: 100%;}#nav li { margin: 0 0 0 1em; border: 0.2em solid #27ff00; float: left;}#nav a { padding: 0.25em; display: block; background-color: #ed6666; font-size: 2em;}.col2,.col2B,.col2S,.col3L,.col3C,.col3R,.col3LC,.col3CC,.col3RC { float: left; min-height: 10em; height: expression( this.scrollHeight < 101 ? "100px" : "auto" );}.col2 { width: 50%; }.col2B { width: 62%; background-color: #ed6666;}.col2S { width: 38%; background-color: #8967ee;}.col3L,.col3C,.col3R {/* width: 33.35%; */ width: 33.33%;}.col3L,.col3R { background-color: #ed6666;}.col3C { background-color: #8967ee; }.col3LC,.col3RC {/* width: 49.999998%; */ width: 49.83%; background-color: #ed6666;}.col3RC { background-color: #8967ee;}.col3CC { border-left: 0.1em solid #000000;}#push { height: 20em;}#footer { margin: -20em 0 0; border-top: 0.1em solid #000000; height: 19.9em; clear: both;}#footer .contentWrap { padding: 0 1.5em;}#footer .contentWrap,#footer .contentWrap div { height: 100%;}@media screen and (max-width: 640px) { .col2,.col2B,.col2S,.col3L,.col3C,.col3R,.col3LC,.col3CC,.col3RC { width: 100%; min-width: 320px; clear: both; } .col3CC { display: none; } #header,#footer .contentWrap { height: auto; } #headerL .logo { margin: 5em auto; } #headerR { float: left; } #nav { position: static; float: right; }} Now if you shrink the browser window past the 640px mark, zoom in, then scroll to the right. The content as you will see does not extent all the way, unlike the header... Any ideas? Here is a picture of the reality and what I want: Reality: Want: Thanks for any assistance. ***Update*** This is funny. The problem lies in the fact I have overflow hidden set to contain the floated elements... If I remove the overflow hidden it all scrunches together... If I remove the float, the collapsing margin issue returns. Fun...! Edited August 28, 2013 by DarkxPunk Link to comment Share on other sites More sharing options...
davej Posted August 28, 2013 Share Posted August 28, 2013 So you are happy now? By "collapsing margin issue" you mean the box collapsing to the width of the contents, right? And you fix that by setting the width to 100%. The point of the other demo was the annoyance of colliding margins which can sometimes produce odd-looking float results. Link to comment Share on other sites More sharing options...
DarkxPunk Posted September 1, 2013 Author Share Posted September 1, 2013 I am not happy and prob won't be cause as I say many times, collapsing margins is annoying.Now no one has a solution for my other issue above? Link to comment Share on other sites More sharing options...
dsonesuk Posted September 1, 2013 Share Posted September 1, 2013 (edited) The header is using overflow: visible; so all it content will show, the others overflow: hidden; especially the contentWrap this container has no width restriction, unlike it child elements of min-width:320px, so it keeps on shrinking, and overflow: hidden hides the the child right edge, even though THEY have stopped shrinking at the 640px width point. Normally you would apply min-width to the outer container 'pageWrap', or 'contentWrap', but not with child elements. Edited September 1, 2013 by dsonesuk Link to comment Share on other sites More sharing options...
DarkxPunk Posted September 1, 2013 Author Share Posted September 1, 2013 Okay I got that understood, but how would I achieve my desired result. I can't turn off overflow hidden, so what you think I can do. I have been playing with no luck... Link to comment Share on other sites More sharing options...
dsonesuk Posted September 1, 2013 Share Posted September 1, 2013 Normally you would apply min-width to the outer container 'pageWrap', or 'contentWrap', but not with child elements Link to comment Share on other sites More sharing options...
DarkxPunk Posted September 1, 2013 Author Share Posted September 1, 2013 I attempted it before I made the last post and all it did was clip all the content... When I zoom I want the box to grow too to fit the content zooming and just bring up scroll bars... Not clip my content. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 1, 2013 Share Posted September 1, 2013 These are the changes i made which seem to me to be what is in the wanted image, the only clipping is the header text, which will happen when using fixed width elements greater than min-width: restricted width. @media screen and (max-width: 640px) { .col2,.col2B,.col2S,.col3L,.col3C,.col3R,.col3LC,.col3CC,.col3RC{ width: 100%; clear: both; } #pageWrap, .contentWrap {min-width: 320px; } .col3CC { display: none; } #header,#footer .contentWrap { height: auto; } #headerL .logo { margin: 5em auto; } #headerR { float: left; } #nav { position: static; float: right; }}.contentWrap { margin: 0 auto; padding: 3em 1.5em 4.5em; max-width: 100%; overflow: hidden; clear: both; /*added by dsonesuk */} Link to comment Share on other sites More sharing options...
davej Posted September 5, 2013 Share Posted September 5, 2013 If it still isn't right please post code with content that more clearly shows the clipping problem. Simply adding... div{overflow: auto;} ...should prevent any clipping -- if you like scrollbars. Link to comment Share on other sites More sharing options...
DarkxPunk Posted September 7, 2013 Author Share Posted September 7, 2013 I will keep playing with the layout... I probably will rewrite it again to try and clean up, and involve some of the suggestions you guys have made. I appreciate it. Once I make the changes I will post it here. In the mean time I have been attempting to apply this design (or at least elements), and have achieved good results. Sadly though because of IEs failure to support many basic features in earlier instalments of IE, I have run into odd issues... Specifically in this instance, for some reason my two divs are overlapping in IE8 and below. In my left div I have text and an image. In my right div, simply text. Now as I shrink the page the text (other than the headers) seems to resize correctly and wrap as required. But the image on the other hand just gets overlapped with the text, and even the headers do the same. I can't seem to understand why. Its almost like the header and image are being taken out of confinement of the div, and the div simply is only as wide as the text... Anyway, here is the code (Note: the reset has not changed) HTML: <!DOCTYPE html><html><head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Design 1</title> <link rel="stylesheet" type="text/css" href="reset.css"/> <link rel="stylesheet" type="text/css" href="style.css"/> <script type="text/javascript" src="javascript.js"></script> <!--[if lt IE 7]> <style rel="stylesheet" type="text/css"> #pageWrap {width: 96em !impoirtant; height: 100% !important;} </style> <![endif]--></head><body> <div id="pageWrap"> <ul id="nav" class="contentWrap"> <li><a class="active" href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a>Practice</a></li> <li><a>Contact</a></li> </ul> <div class="banner contentWrap"> <div class="logo"> <div class="logogram"></div> <div class="logotype"><h1>Susan Patterson</h1><h2>RMT, CDT</h2></div> </div> <img src="massageBanner.png"/> </div> <div class="solidWrap"> <div id="home" class="contentWrap"> <div class="col2B"> <h1>Massage</h1> <h2>Therapy</h2> <p>Massage therapy is lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus erat magna, consectetur vel ultricies et, faucibus sit amet felis. Duis luctus malesuada lacus, a euismod purus molestie vitae. Donec vestibulum dapibus purus ac hendrerit. Fusce vitae vehicula eros. Nunc lacus risus, mollis vitae dictum eu, blandit sit amet lectus. Morbi pellentesque diam augue, ac fringilla purus aliquam vel. Fusce a laoreet nisl, ac tempor lectus. Etiam odio ligula, luctus eu nunc ac, posuere tempus arcu. Quisque vel tristique justo. Vestibulum euismod facilisis tortor ut consequat. Donec euismod fringilla vestibulum. Integer gravida egestas dictum. Nam sapien tellus, placerat non lacus id, sollicitudin auctor nulla. Aenean iaculis, elit eu porttitor cursus, felis massa fermentum erat, commodo rutrum urna neque quis risus. Maecenas sed massa a magna scelerisque dignissim. Integer in laoreet lectus.</p> </div> <div class="col2S"> <h1>Client</h1> <h2>Care</h2> <p>Massage therapy is lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus erat magna, consectetur vel ultricies et, faucibus sit amet felis. Duis luctus malesuada lacus, a euismod purus molestie vitae. Donec vestibulum dapibus purus ac hendrerit. Fusce vitae vehicula eros. Nunc lacus risus, mollis vitae dictum eu, blandit sit amet lectus. Morbi pellentesque diam augue, ac fringilla purus aliquam vel.</p> </div> </div> </div> <div id="push"></div> </div> <div id="footer"> <div class="contentWrap"> </div> </div></body></html> CSS: body,html { height: 100%; background-color: #ffffff;}#pageWrap { min-height: 100%; height: auto !important;}.contentWrap { margin: 0 auto; padding: 2.2em 2.2em; max-width: 96em; overflow: hidden; position: relative;}#header { min-width: 32em; overflow: visible;}#nav { padding: 2.2em 0 0; font-size: 100%; overflow: hidden; text-align: center; letter-spacing: -4px; word-spacing: -4px;}#nav li { letter-spacing: normal; word-spacing: normal; display: inline-block; *display: inline; zoom: 1;}#nav li a { font-size: 2em; padding: 0.355em 1.5em 0.355em; display: block; cursor: pointer;}#nav li a.active { background: #e3edd5;}#nav li a.active:hover { text-decoration: none; cursor: default;}#nav li a:link,#nav li a:visited,#nav li a:hover,#nav li a:active { color: #000000;}.logo { width: 35em; height: 8em;}.logo div { float: left;}.logogram { width: 6.5em; height: 8em; background: url(leafDrop.png) no-repeat;}.logotype { margin: 1.2em 0 1.2em 2.2em;}.logotype h1,.logotype h2 { margin: 0;}.banner .logo { position: absolute; top: 2.5em; left: 2.5em;}.banner { max-width: 96em; max-height: 25em;}.banner.contentWrap { padding: 0;}.banner img { max-width: 101%; height: auto; width: auto9;}.col2B,.col2S { padding: 0 1%; float: left;}.col2B { width: 60%;}.col2S { width: 36%;}.solidWrap { background: #e3edd5;}.profilePic { margin: 2.5em auto; border: 0.3em solid #000000; width: 20em; height: 20em; background: url(massageTherapis.png) no-repeat center center;}#home .col2B h1,#home .col2B h2,#home .col2S h1,#home .col2S h2,#about .col2B h1,#about .col2B h2 { display: inline;}#about .col2S h1,#about .col2S h2 { margin: 0;}p { line-height: 1.4em; text-align: justify;}#push { height: 18em;}#footer { margin: -18em 0 0; border-top: 1px solid #e6e6e6; height: 17.9em; clear: both;}#footer .contentWrap { padding: 0 2.2em;}#footer .contentWrap,#footer .contentWrap div { height: 100%;}@media screen and (max-width: 960px) { .banner { position: relative; top: 1px; z-index: 1; }}@media screen and (max-width: 320px) { #pageWrap { min-width: 32em !important; } .profilePic { margin: 2.5em auto !important; float: none !important; }}@media screen and (max-width: 520px) { .solidWrap { min-width: 32em; overflow: visible; } #header { padding: 2.2em 0; } #nav li a { padding: 0.355em 0.3em 0.355em; } .banner img { min-height: 10em; } .banner .logo { margin: 0 auto; max-width: 31em; top: 1.5em; left: 0; right: 0; } .logotype { margin-left: 1.2em; } .logotype h1 { font-size: 2.9em; } .logotype h2 { font-size: 2.1em; }}@media screen and (max-width: 640px) { #header,#footer .contentWrap { height: auto; }}@media screen and (max-width: 755px) { .col2B,.col2S { width: 100%; float: none; clear: both; } .profilePic { margin: 2.5em 1em 1em 0; float: left; }} P.S. I am contemplating of adding IE comments to simply limit the width of the webpage for the troublesome browsers, but if a solution can be found...thats only more knowledge. Knowledge is good... Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now