January 22, 201115 yr Hey, I have a page I'm developing where I need 3 equal-width columns on a page that re-size when you re-size the window. I found this example which seemed perfect for what I needed, I'm having niggly problems trying to implement it on my page though so I'm hoping someone here can help? 1) There are no margins around the columns, I need some and I can't seem to create any without the columns overlapping or moving off the edge of the page? I've tried wrapping divs around each column with a margin added but that creates overlapping of the columns. 2) When I use the jscrollpane scrollbar on the windows, the columns are correctly sized when you open the window but don't re-size when you re-size the window? Any help on this would be appreciated, I've been going around in circles with this for a while... Adam #left1, #left2, #left3, #left4 { position:absolute; left:0; top:50px; bottom:110px; width:33.33%; font-size:1em; z-index:3; overflow:auto; } * html #left1, * html #left2, * html #left3, * html #left4 { height:100%; top:0; bottom:0; border-top:50px solid #fff; border-bottom:110px solid #fff; } #left1 {left: 0; } #left2 {left:33.33%; } #left3 {left:66.66%; } #left4 {left:75%; }
January 22, 201115 yr I did it a different way. Use this just to see how the basic structure works. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta name="keywords" content="Wickham"> <meta name="description" content="Test items"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Test</title> <style type="text/css"> body { margin: 0; } #wrap { width: 100%; overflow: hidden; } #col1, #col3 { width: 29%; float: left; margin: 1%; padding: 5px 1%; height: 150px; } #col2 { width: 30%; float: left; margin: 1%; padding: 5px 1%; height: 150px; } #col1 { background: pink; } #col2 { background: lime; } #col3 { background: yellow; } </style> </head> <body> <div id="wrap"> <div id="col1">Col 1</div> <div id="col2">Col 2</div> <div id="col3">Col 3</div> </div> </body> </html> The three divs are 29% + 2*1% + 2*1% = 33% x 3 = 99% so I made the middle div 30% to add the extra 1% making 100%. Each div has padding 1% at the sides and 5px padding top and bottom and margin: 1% all round. See how this works and adapt it. The height is temporary just to see divs with some height as there's little content. Edited January 22, 201115 yr by Wickham
January 22, 201115 yr Author Hey, Thanks a lot for your reply, I think you may have solved my problem! The windows re-size great and have none of the overlapping quirks of the last one. I'm still having a slight difficulty implementing the jscrollpane script though, specifically with the third column (i.e. the right-hand one). The other two resize fine, when I re-size the window the third column disappears to the left of the screen - I've included the code below, if anyone has any suggestions on how to pin the column down it would be appreciated! Thanks again for your help, Adam. (Apologies in advance for the slightly hefty volume of code) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta name="keywords" content="Wickham"> <meta name="description" content="Test items"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Test</title> <!-- JscrollPane - CSS styles --> <link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" /> <!-- START - Google jQuery request --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script> <!-- Jsrollpane - mousewheel plugin --> <script type="text/javascript" src="j/jquery.mousewheel.js"></script> <!-- JscrollPane - script --> <script type="text/javascript" src="j/jquery.jscrollpane.min.js"></script> <!-- Script to re-size the scroll bars --> <script type="text/javascript" src="j/community_resize_script.js"></script> <link href="css/community.css" rel="stylesheet" type="text/css"> <link href="css/jquery.jscrollpane_community.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="j/community_resize_script.js"></script> </head> <body> <div id="community_wrap"> <div id="community_col1"> <h1>Column 1</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non est vel sapien fringilla vehicula in id tortor. Curabitur quis erat nisl, dignissim hendrerit sapien. Proin ligula libero, tristique vitae suscipit et, blandit ut nunc. Nullam malesuada, odio non congue elementum, lacus nisi faucibus quam, a rutrum ante felis a arcu. Nulla ante sapien, malesuada ultrices malesuada quis, convallis vel dui. Vivamus quis lobortis dolor. In rhoncus mi eu metus sodales id adipiscing leo aliquet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed mauris libero, euismod at scelerisque non, faucibus nec dui. Cras semper ipsum quis erat fermentum molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus luctus aliquam dui ut eleifend. Nunc posuere, dui ac cursus varius, risus lacus molestie dui, sed posuere libero justo at enim. Integer sed libero mi. Integer sit amet massa ipsum, eget mattis lacus. Nunc vel pretium purus. Cras gravida sapien et felis pharetra id lobortis enim condimentum. <br /><br /> </div> <!-- END - #community_col1 --> <div id="community_col2"> <h1>Column 2</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non est vel sapien fringilla vehicula in id tortor. Curabitur quis erat nisl, dignissim hendrerit sapien. Proin ligula libero, tristique vitae suscipit et, blandit ut nunc. Nullam malesuada, odio non congue elementum, lacus nisi faucibus quam, a rutrum ante felis a arcu. Nulla ante sapien, malesuada ultrices malesuada quis, convallis vel dui. Vivamus quis lobortis dolor. In rhoncus mi eu metus sodales id adipiscing leo aliquet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed mauris libero, euismod at scelerisque non, faucibus nec dui. Cras semper ipsum quis erat fermentum molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus luctus aliquam dui ut eleifend. Nunc posuere, dui ac cursus varius, risus lacus molestie dui, sed posuere libero justo at enim. Integer sed libero mi. Integer sit amet massa ipsum, eget mattis lacus. Nunc vel pretium purus. Cras gravida sapien et felis pharetra id lobortis enim condimentum. </div> <!-- END - #community_col2 --> <div id="community_col3"> <h1>Column 3</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non est vel sapien fringilla vehicula in id tortor. Curabitur quis erat nisl, dignissim hendrerit sapien. Proin ligula libero, tristique vitae suscipit et, blandit ut nunc. Nullam malesuada, odio non congue elementum, lacus nisi faucibus quam, a rutrum ante felis a arcu. Nulla ante sapien, malesuada ultrices malesuada quis, convallis vel dui. Vivamus quis lobortis dolor. In rhoncus mi eu metus sodales id adipiscing leo aliquet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed mauris libero, euismod at scelerisque non, faucibus nec dui. Cras semper ipsum quis erat fermentum molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus luctus aliquam dui ut eleifend. Nunc posuere, dui ac cursus varius, risus lacus molestie dui, sed posuere libero justo at enim. Integer sed libero mi. Integer sit amet massa ipsum, eget mattis lacus. Nunc vel pretium purus. Cras gravida sapien et felis pharetra id lobortis enim condimentum. </div> <!-- END - #community_col3 --> </div> <!-- END - #community_wrap --> </body> </html> The relevant CSS file: #community_wrap { width: 100%; overflow:hidden; position: fixed; top: 48px; bottom: 120px; } #community_col1 { width: 29.75%; float: left; margin: 1% 1% 1% 1.25%; padding: 5px 1%; height: 100%; bottom: 0px; top: 0px; overflow: auto; } #community_col2 { width: 30%; float: left; margin: 1% 0% 1% 0%; padding: 5px 1%; height: 100%; bottom: 0px; top: 0px; overflow: auto; } #community_col3 { width: 29.75%; float: left; margin: 1% 1.25% 1% 1%; padding: 5px 1%; height: 100%; bottom: 0px; top: 0px; overflow: auto; } Edited January 22, 201115 yr by Adam Dynamic
January 23, 201115 yr Your code worked in my Firefox but in IE7 the third div disappeared. I think it may be because IE doesn't like the decimals in the width and margins, either the first decimal place or the second and may be rounding up so the total exceeds 100%. I used these codes which worked in IE7 (I haven't got your js files but I could see the problem and fix it so I don't think it's a javascript problem):- body { margin: 0; } #community_wrap { background: #ddd; width: 100%; overflow:hidden; position: fixed; top: 48px; bottom: 120px; } #community_col1 { background: pink; width: 29.7%; float: left; margin: 1% 1% 1% 1.25%; padding: 5px 1%; /*height: 100%;*/ height: 400px; bottom: 0px; top: 0px; overflow: auto; } #community_col2 { background: lime; width: 30%; float: left; margin: 1% 0% 1% 0%; padding: 5px 1%; /*height: 100%;*/ height: 400px; bottom: 0px; top: 0px; overflow: auto; } #community_col3 { background: yellow; width: 29.8%; float: left; margin: 1% 1.25% 1% 1%; padding: 5px 1%; /*height: 100%;*/ height: 400px; bottom: 0px; top: 0px; overflow: auto; } As you can see, I've added body { margin: 0; } which isn't part of the cure, it's because both browsers were showing a white body margin on the left of my gray wrap div but not on the right so it looks neater if there are no body margins. IE7 wasn't showing the vertical scrollbar. You need a fixed height when using overflow: auto; Edit: if you still have a problem, make sure that the javascript doesn't have any fixed widths in it. A test for any problem like this is to reduce the widths and see if the third column moves up to where it should be. Edited January 23, 201115 yr by Wickham
January 23, 201115 yr Author Hey, Thanks again for your help! The problem must lie with the jquery files as when you remove them the columns resize fine even with 2 decimal places in the margins etc. The jquery I'm using is called jscrollpane, here is the code, I've no idea if there are any fixed widths in it or anything that might stop the columns from working. Wierdly, if you shrink the window as far as it will go width-wise and refresh the page, the columns load up fine and can be resized all the way out and back in again, the only problem is when you open up a full-size window and shink it in. It seems to work 'up to a point' so a hack solution may be to prevent the window from minimising too much, if anyone can see another ('actual') solution then it would be appreciated! Thanks again for your help, Adam.
January 23, 201115 yr Your link to the js file is http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.js but where is that in your html file? There are other js files, but not that one. I added <script type="text/javascript" src="jquery.jscrollpane.js"></script> with the file in the same folder as the html file. I tried your js file (without the others) and IE7 showed no scrollbars until I changed the height from 100% to 400px (height: 100% often causes trouble) and also reduced the width of the third div from 29.75% to 28.75%. IE7 was then OK.
January 23, 201115 yr Author Hey, The jscrollpane script I used is the 'minimised' version (which was pretty unreadable so I linked the 'normal' version to the post) which is in the code as: <!-- JscrollPane - script --> <script type="text/javascript" src="j/jquery.jscrollpane.min.js"></script> The fluid height is probably as important as the fluid width so setting it at a fixed px value isn't ideal but it may be what is required to get it to work! Though would the scrollbars appear if the content doesn't exceed the length of the box? I'll try your suggestions and hopefully be able to solve the problem, thanks again for all your help! I really appreciate it... Adam.
January 23, 201115 yr If you have a vertical scrollbar in the divs, I don't understand why you need fluid height. Since I got IE7's problems solved with only one js file, try my suggestions with all your js files.
Create an account or sign in to comment