Heides666 Posted February 18, 2011 Share Posted February 18, 2011 Hi all. My first post. First, thanks for all the info at W3S. After 15 years of curiosity of html, my entire knowledge consisted of "links have something about href". Finally had need and motivation to learn, and in 3 days I had plowed through html, css and js, grasped the basics and had a working and elegantly stylized version of my game modding tutorial/reference manual, with collapsing sections and all. So right on!Note: I'm using Chrome to develop and checking on FF at milestones.Now, I've been beating my head for almost a week on this one. Followed this 2 Col Layout tutorial, simple and appropriate for doc. But I wanted liquid columns, so did a 70%/30% instead of px; wanted a min-width for the cols so they would shrink on window resize to a certain point, then begin horiz scrollbar. Purpose being to shrink main content with narrow browser window on left for reference while working in another application on the right.I've read source for other 2/3col LOs, which doubly confused me. Back through the w3s material. learned more but still unclear on certain interactions. Some properties I can apply individually, but put them into a bigger script and unexpected things happen. I still don't get negative margins (the method:okay... but why??).EDIT: My brain was mush from column-trauma when I read about neg margins. Got it now: Neg Left-Margin is subtracted from the right-side boundary.I've found that with the combination of % widths, min-widths, and float, the right column wraps below if there's not enough room. Caused by min-widths, disabling scrollbar even if only in column1. 3 days of tweaking; I didn't keep track but I managed a fix, which introduced some other problem. I gave up, learned more JS, and opting for a complex script to handle the two columns and add functionality.Not sure how it will work yet. And I don't like fancy complex systems. Elegance in simplicity. Wow-effects and handy features not needed if basics work perfectly. For that reason, and just to learn and understand, I'd like to explore the CSS method. I'd also like to know what same-height options are best for this - any options aside from 3 listed in the tutorial I linked earlier?Here's the code: <html><head><style type="text/css">#container { width:100%; display:inline-block; background:#000; margin:auto; padding:0;}#header { background:#e91;}#main { float:left; width:70%; min-width:300; background:#fc2;}#sidebar { float:right; width:30%; min-width:150; background:#8af;}</style><body><div id="container"> <div id="header"> <h2>Wrapping Sidebar Inc.</h2> </div> <div id="main"> <h3>Main Column</h3> <p>I am a float-left column with width 70% or so. Sidebar, over there on the right, is a really good friend of mine. We really stick together, side by side. He takes care of all the little ticks and tacks so I can stay on topic with the hips and happs. Keeps things tidy and it's quite something, I say.</p><p>While he's a real cool cat, he's got one bad hab. When things get tight, down he goes below the flows. Leaves ya hangin by a hole, ya know? Just shrink the window sideways-like, bring it down to a peek through a door. You'll see it right clear, it's a real sore.</p> </div> <div id="sidebar"> <ul> <li>tick</li> <li>tack</li> <li>tick</li> <li>tack</li> <li>tick</li> <li>tack</li> <li><img style="position:relative; left:-20;" alt="wacawaca"src="http://i1229.photobucket.com/albums/ee467/Heides666/wacawaca-1.gif" /></li> </ul> <div></div></body></html> Another small question (or maybe not - tell me if I should make separate thread) about CSS.Why does "#ID SELECTOR {}" override ".CLASS SELECTOR {}" when ID contains SELECTOR of class CLASS?: #wrapper p {propertyA:value1}.infobox p {PropertyA:value2}<div id="content"> <p class="infobox">This content uses style"#wrapper p"</p></div> This precedence is not mentioned in ID & Class or Cascade Order of the W3Schools CSS tutorial.Thanks for any clarifications and suggestions. Link to comment Share on other sites More sharing options...
Heides666 Posted February 20, 2011 Author Share Posted February 20, 2011 Not one answer/suggestion/comment? Not much of a brainstorming session But I've not been idle. I was playing with different float/display/overflow settings and made this little sandbox. <html><head><script type="text/javascript">function randcol(){ var color=""; for (i=0;i<6;i++){ color=color+Math.floor(Math.random()*16).toString(16);} return color; }function createNew(parent_name, new_type, new_typeText) { var x = document.getElementById(parent_name); var y = document.createElement(new_type); y.appendChild(document.createElement('p')); y.firstChild.className = 'spawntext'; y.firstChild.innerHTML = 'YAY! I has a '+new_typeText; y.className = 'new'+new_type; y.id = y.className + x.childNodes.length; y.style.backgroundColor = randcol(); x.appendChild(y); } function clearNew(parent_name, new_type) { var x=document.getElementById(parent_name); var y=x.getElementsByTagName(new_type); var lastdiv=y.length-1; if (lastdiv >= 0){ var z=x.getElementsByTagName(new_type)[lastdiv]; x.removeChild(z); }; }function clearAll(parent_name) { var x=document.getElementById(parent_name); x.innerHTML=""; }</script><!--============================--><style type="text/css">body { width:100%; margin:0; padding:0; font-family:"Arial Verdana", Arial, sans-serif; font-size:100%;}div { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}#settings { float:left; background:#f88; border:3px solid red; padding: 0.5em 0.5em 0em 0.5em; max-width:20%; min-height:100%; margin-bottom:0;}#settings select { width:100px;}#controls { display:inline-block; background:#8f8; border:3px solid green; padding: 0em; width:440px;}#controls button { width:30%; margin:1%; height:3em; vertical-align:middle;}#container1 { display:inline-block; overflow:auto; max-width:425; max-height:425; background:#ddd;}#container2 { display: inline-block; overflow:scroll; max-width:479; max-height:329px; background:#ddd; white-space:normal;}.newdiv {float:left; width:96px; height:96px; background:#86f; border:2px solid blue; margin:3px;}.newspan {float:left;} .spawntext { padding:0em 0.8em; vertical-align:middle; font-weight:700; text-align:center; color:white;}.spawntext {float:left;}.boxybox { float:left; width:96; height:96; border:2px solid blue; margin:3px; background:#88f;}</style></head><!--===========================--><body><div id="settings"><form name="settingsPanel"><b>Settings<br/>Container1</b><br/>Display:<br/><select name="input_styleDisplay" onChange="document.getElementById('container1').style.display = document.settingsPanel.input_styleDisplay.options[document.settingsPanel.input_styleDisplay.selectedIndex].value"> <option value="inline">inline</option> <option value="block">block</option> <option value="inline-block" selected="selected">inline-block</option> <option value="inline-table">inline-table</option> <option value="list-item">list-item</option> <option value="run-in">run-in</option> <option value="table">table</option></select> <br/>Overflow:<br/><select name="input_styleOverflow" onChange="document.getElementById('container1').style.overflow = document.settingsPanel.input_styleOverflow.options[document.settingsPanel.input_styleOverflow.selectedIndex].value"> <option value="visible">visible</option> <option value="hidden">hidden</option> <option value="scroll">scroll</option> <option value="auto" selected="selected">auto</option></select> <br/>White-space:<br/><select name="input_styleWhitespace" onChange="document.getElementById('container1').style.whiteSpace = document.settingsPanel.input_styleWhitespace.options[document.settingsPanel.input_styleWhitespace.selectedIndex].value"> <option value="normal" selected="selected">normal</option> <option value="nowrap">nowrap</option> <option value="pre">pre</option></select> <br/>Float:<br/><select name="input_styleFloat" onChange="document.getElementById('container1').style.float = document.settingsPanel.input_styleFloat.options[document.settingsPanel.input_styleFloat.selectedIndex].value"> <option value="none" selected="selected">none</option> <option value="left">left</option> <option value="right">right</option></select> </form></div><div id="controls"><button type="button" onclick="createNew('container1','div','box'); return false">I want more boxes!</button><button type="button" onclick="clearNew('container1','div'); return false">I don't like that one</button><button type="button" onclick="clearAll('container1'); return false">Too many. Take them away!</button></div><br/><div style="height:425;background:#def"><div id="container1"></div></div><br/><div id="controls"><button type="button" onclick="createNew('container2','span','span'); return false">Add a span!</button><button type="button" onclick="clearNew('container2','span'); return false">Undo. Rewind. Rücklauf!</button><button type="button" onclick="clearAll('container2'); return false">Let's do it all again!</button></div><br/><div id="container2"></div></body></html> While I learned more about JS and DOM stuff I found no answers to the problem. Only some conclusions:1. When a floating element can't fit into a container it will try to expand the container horizontally.2. If it can't expand further it will respect the horizontal limits (max-width, window width, etc). It will then try to expand the container vertically.3. If it can't expand vertically the next step depends on the overflow property. It can: Generate a vertical scroll bar with overflow:scroll or auto. -or- Disregard all rules and styling, keep expanding down and plowing its way through everything if overflow:visible or hidden.At no time does the browser consider letting the container scroll horizontally. Bummer.If you could somehow pin them to the top it would fix it, but that would require non-static positioning which would break the horizontal float. I've tried this with margin: and top: properties. And there's no such thing as float:top. Then I read about the float model from W3.org. This seems to confirm everything above. In other words: "working as intended" if you don't make argument for very slight ambiguities.Float was made for elements, sections, etc; to work with the vertical flow of content - webpages are not mean to scroll horizontally. That said, just because a tool has an intended purpose doesn't mean it has only one application. But I'm losing confidence for a way to apply it like this without scripting. Link to comment Share on other sites More sharing options...
cousineaug Posted February 21, 2011 Share Posted February 21, 2011 I've found that with the combination of % widths, min-widths, and float, the right column wraps below if there's not enough room. Caused by min-widths, disabling scrollbar even if only in column1. 3 days of tweaking; I didn't keep track but I managed a fix, which introduced some other problem. I gave up, learned more JS, and opting for a complex script to handle the two columns and add functionality.As you say, it is working as expected. Combining % with min-width can be tricky. However, all is not lost.You have a min width for the two columns...the next logical step is to set a min width for the outer container. Without doing all the math I am guessing somewhere around 500px would work after you take into consideration the default margins.......Guy Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.