- This topic is empty.
-
AuthorPosts
-
April 17, 2015 at 10:50 am #200624
straygoat
ParticipantI have a documentation project that is using an HTML5 output. The output has a header div, a left-side panel that contains the table of contents, a main body div, a right-side panel with images, and a footer underneath.
The table of contents that goes in the left-side panel is very long, and sometimes the content in the main body is just a paragraph or two. This means there is loads of white space as the divs are sized to match the tallest (the left-side one).
I would like to get the left-side panel to never be bigger than the main body div, and to have scroll bars if it is too small. It has to be a responsive layout.
Is it possible to achieve this without scripting? (Sorry I cant show the pages as I would be breaking the law…hope the description is adequate).
Thanks
April 17, 2015 at 11:49 am #200630Paulie_D
MemberThe table of contents that goes in the left-side panel is very long, and sometimes the content in the main body is just a paragraph or two. This means there is loads of white space as the divs are sized to match the tallest (the left-side one).
This sounds like an excellent chance to break up the table of contents into meaningful chucks and use menu/sub-menu.
Of course, it depends on what the TOC actually contains.
April 17, 2015 at 11:52 am #200633straygoat
ParticipantBoth good answers, but unfortunately, I can’t break up the TOC into a sub-menu as the client doesn’t like that – they like to be able to browse the entire content easily.
The overflow method is okay, except I don’t know the height of the body content – it changes depending on what the content is. There are hundreds of pages.
April 17, 2015 at 11:55 am #200635straygoat
ParticipantI’d better add that I don’t have control over the TOC itself, due to how the tool populates it. All I can control is the div that contains the toc.
April 17, 2015 at 3:23 pm #200653straygoat
ParticipantThanks Bearhead, that looks promising. I will give it a try.
April 18, 2015 at 1:43 am #200664straygoat
ParticipantOkay, I think I’m close, but something’s not quite right. The end result I get is the triple columns, but the left column is still really tall and shows its full contents, even though it has a scrollbar. The middle and right columns are shorter and different sizes based on their content.
It will be difficult to post the full code on CodePen because of the security issues I mentioned. So I’ll try and put the important bits here and maybe you can see what I’ve missed.
The layout of my page is set with this:
<div class="bodywrap"> <div class="tricontainer"> <div class="tocmenu"> The toc menu content is in here </div> <div class="bodycontainer"> The body content is in here </div> <div class="sidebar"> The right-hand column content is in here </div> </div> </div> <div class="footercontainer"> The footer content is in here </div>
And then the CSS for these styles is:
div.bodywrap { width:100%; } div.tocmenu { max-width: 20%; width: 20%; min-width: 20%; float: left; position: relative; margin-right: 2%; margin-left: -3%; padding-left:1%; display:table-cell; overflow-y:scroll; scrollbar-3dlight-color:whitesmoke; scrollbar-arrow-color:#27628c; scrollbar-darkshadow-color:#ffffff; scrollbar-shadow-color:whitesmoke; scrollbar-face-color:C2C1FF; scrollbar-track-color:whitesmoke; scrollbar-highlight-color:#ffffff; ::-webkit-scrollbar { width: 3px; height: 3px;} ::-webkit-scrollbar-button { background-color: C2C1FF; } ::-webkit-scrollbar-track { background-color: C2C1FF;} ::-webkit-scrollbar-track-piece { background-color: #ffffff;} ::-webkit-scrollbar-thumb { height: 50px; background-color: C2C1FF; border-radius: 3px;} ::-webkit-scrollbar-corner { background-color: whitesmoke;} ::-webkit-resizer { background-color: #whitesmoke;} } div.tricontainer { width:100%; max-width:100%; min-width:100%; display:table; margin:0 auto; table-layout:fixed; } /* desktop up to really wide screens */ div.bodycontainer { width: 55%; min-width: 55%; max-width: 55%; float: left; display:table-cell; } div.sidebar { width:10%; max-width:10%; float:right; display:table-cell; } /* desktop up to really wide screens */ div.footercontainer { height: 379px; background: none repeat scroll 0% 0% #000000; clear: both; border-top-width: 5px; border-top-color: #93b0c5; margin-left: -6%; margin-right: -6%; }
Have I missed something obvious that controls the height of the left column?
April 20, 2015 at 2:00 pm #200813gvinson
ParticipantI know you said not to use a script, but this is a one liner that will solve your problem. You also don’t need to use jQuery if you don’t want to.
http://codepen.io/vinsongrant/pen/XbrGzY
Another way would to set a max-height on the list item container (the UL in the example above) and add overflow scroll to that item.
April 20, 2015 at 11:26 pm #200836straygoat
ParticipantThanks, I will take a look at that solution. If it is only minimal scripting, It doesn’t matter so much.
April 20, 2015 at 11:27 pm #200837straygoat
ParticipantThanks Bearhead, I will give that a try too. I did wonder about the sub div. Why exactly is it required?
April 21, 2015 at 7:35 am #200875straygoat
ParticipantThanks. I don’t quite follow how the height of the table is determined. I get that position:absolute stops the parent cell of a sub-div expanding, but does that mean that the height of the table will come from the next cell (which in my case is the cell that contains the body content)?
Overflow X and Y, I’m good with.
April 21, 2015 at 8:04 am #200881gvinson
ParticipantWhen using a table layout, the columns in a single row will all be as tall as the tallest column. A div based layout with a table display acts almost exactly like a regular html table element.
This is an actual html table example. As you can see, the columns are all as tall as the middle cell with the most content. A div based layout will also act this way.
April 21, 2015 at 11:17 am #200896straygoat
ParticipantYes, but I don’t want that. I want the left-hand column to never be bigger than the middle column (which changes size, depending on the content that is loaded into it).
April 22, 2015 at 12:33 am #200919straygoat
ParticipantOk, I think I understand. I will give it a try today. Thanks for your help everyone.
April 22, 2015 at 5:14 am #200929straygoat
ParticipantRight, I’m close, but something’s not quite right…there’s a big gap at the top of the left column. Looking at the DOM, it looks like the tocmenu div is in the right place, but the toc_content sub div appears to be approx 50% of the way down the tocmenu div.
I thought that might be caused by the widths, but it doesn’t seem to be the case. Any ideas?
Here’s the html:
<div class="bodywrap"> <div class="tricontainer"> <div class="tocmenu"> <div class="toc_content"> Menu goes here </div> </div> <div class="bodycontainer"> Body content goes here </div> <div class="sidebar"> Sidebar content goes here </div> </div> footercontent goes here </div> </div>
And the CSS:
div.bodywrap { width:100%; } .tricontainer{ width:100%; background:white; display:table; margin:0 auto; table-layout: fixed; } .tocmenu{ position:relative; background:white; width: 20%; display:table-cell; overflow-y:scroll; } .toc_content{ position:absolute; background:white; float:left; } .bodycontainer{ background:white; display:table-cell; width:60%; } .sidebar{ background:white; display:table-cell; width:20%; }
April 22, 2015 at 7:44 am #200944straygoat
ParticipantI only get the strange layout in IE and FireFox. Chrome seems to handle it ok. Trouble is, the company has a policy of only using IE.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.