I've a fixed width 3 columns css layout working good when vertical scrollbar is hidden, but it will break as soon as vertical scrollbar shows up.
I've 2 questions,
Can I deal with the scrollbar as an css element defining z-index to make it in top of right div?
Since I think the answer to my first question is "No, you can't do that", I ask What can I do to avoid this?
example here:
http://www.mataborrao.eu/teste.html
1 - No
2 - One simple option is to always display the scrollbar. Check out this answer: Making the main scrollbar always visible
You're correct on answering your first question; As far as I know, you can't attach styles to the scrollbar. Your second question is somewhat broad, as many browsers out there will deal with scrollbars differently.
For example, depending on your OS/browser, the content on your page will shift to make room for the bar, while other browsers (for instance FF on Windows, I believe), will keep the content where it would be if there wasn't a scrollbar present (this prevents shifting if more content appends/flows vertically).
Alternatively, you could try to force the bar to always be there... this would work in most cases:
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
Hope this kinda helps?!
Would this solution work for you? One of the columns is fluid but perhaps it will help: http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
The solution is there for a layout that looks like this:
It's trivial to exit the pixel values but take note of the "nested div structure". To convert this to a fixed layout you can look at http://matthewjamestaylor.com/blog/how-to-convert-a-liquid-layout-to-fixed-width - I'm not sure that it will work though - you may run into the same problem. I suggested the liquid layout because it will dynamically resize for you when the scrollbar is there...
Related
I have these samples:
`https://codepen.io/deleite/pen/ExyxaJr`
What I am trying to achieve is the same as here:
`https://codepen.io/deleite/pen/QWEWwXO`
But the second one is using gap prop the first one needs a wrapper to have the gutter.
Any ideas how I can keep the one with the margin gutter trick but making the main scrollable when the side bar is next to it?
I figured it out so if anyone need similar solution this codepen works in IE as well.
The only downside here is that I am using media query instead of the holy albatross but that is not need for my use case right now.
[sidebar with scrollable main IE 11 compatible][1]
[1]: https://codepen.io/deleite/pen/NWrWMWP
I'm currently working on a CSS three column layout (http://jsfiddle.net/methuselah/rCtGd/) and I wanted to ask several questions:
1) For some strange reason there seems to be a 10px gap between the header, content-1, content 2-1, content-2-2. This cannot be seen in jsfiddle but if you load up the code in any browser it is noticeable. How do I get rid of it?
2) I would like to figure out a way of clearly defining a fluid column height. Is this possible? Ideally I would like all the divs header, content-1, content 2-1, content-2-2, footer to stretch in order to accommodate the page.
Thanks in advance.
Answers for your valid questions! :P
10px gap is not found on the jsFiddle because, they use CSS Reset. The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
For getting a good idea about CSS Fluid Layouts, please refer the links below:
The Perfect Fluid Width Layout
2 And 3 Column Fluid CSS Layouts
Do you have any clarifications still? Let me know in the comments! :)
I am designing a website for a client, and I am trying to get two side-by-side DIVs to adjust to 100% of their container. I've got the side-by-side done, but I can't get the right DIV to be the same height as the left one.
You can view the problem here: http://www.campusmomlaundry.com/
The "challenges" and "benefits" DIVs should be side-by-side and the same height, without manually specifying the height. How can I do this?
Your problem is that the outer div is sizing automatically by the inner content, which is sizing automatically by its content.
You have couple of options:
Use the background solution mentioned in the #R0MANARMY answer to create the visual ilusion of two equally tall columns.
Set the height of the two inner divs to be the same exact number (using px or em)
Set the height of the outer div to an exact number.
Play with the display attribute and try couple of different values like table-cell and so on. Keep in mind that this one is not going to work in some older browsers. (Not only IE, but some old Firefox and Chrome releases as well)
Use simple table with one row and two columns.
I realize that the last one is the most controversial of all. Yet it is a possible solution for your problem and there's no reason why you shouldn't at least evaluate.
([groan] please, please, nobody mention the words "semantic HTML"! there's no such thing in our universe.)
There's an article on A List Apart on solving a similar problem, you could probably use that as a reference: Faux Columns.
If it was me. I would solve this problem via javascript. Using jquery you could do...
$(document).ready(function()
{
if($('#leftColumn').height() > $('#rightColumn').height())
{
$('#rightColumn').height($('#leftColumn').height());
}
else
{
$('#leftColumn').height($('#rightColumn').height());
}
});
That should do it. If your like the people I work with, and you don't like using Javascript for CSS problems. Then you are probably flat out of luck. Alot of the time, it is much faster just to use JQuery, then to use the "right way" using css. You could probably spend all day trying to get it to work with different combinations of styles.
Perhaps number of bullet points in the left DIV?
Have you tried: height: auto; or height: 100%;?
I got an element fixed in the center of the screen, having specific dimensions (let's say 500x500). The element has content, which is larger then the height of the element and thus causes scroll bar to appear, which is fine. In FF/WebKit everything works nice. However in IE 7/8 ... content of the fixed element doesn't scroll, or scrolls with HUGE delay. If I change position:fixed to position:absolute, it starts to scroll fine, but with position:fixed... it's just a pain!..
Is it some known issue? Anyone heard/encountered something like that? Any ideas how to deal with such?...
Only thing any useful I could find on this subject was this, How to create Position:fixed in IE5.5+.
Position:fixed was implemented in IE7. Maybe it still has some issues with it, but there might be something else in your markup or CSS that would cause such behaviour.
It'd be beneficial if we could see some code to help us with your problem.
It turned out that there was additional problem to this - shadow filter beneath that element with position:fixed and scrolling content within it. We couldn't find any solution to this other then either disabling shadow filter in IEs or disabling position:fixed.
:(
.fixDocument
{
position: absolute;
top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop);
}
Check this page: http://www.gunlaug.no/contents/wd_additions_15.html
Got a nearly finished coded comp here:
http://clients.pixelbleed.net/biodesign/
I realize it's not completely valid, what with my nesting of li's and ul's within A tags. Unfortunately that's the way it has to be.
My issue is with the very bottom of the footer. It has a space showing the body's background color beneath it. Tried a number of things and this space after the black link bar on the very bottom is a resistant little bugger.
Ideally the black box on the bottom should rest against the very base of the view-port, at least when the content is sufficiently long--which it is in this case.
If someone would like to take a quick peak at my source and give me some ideas I'd be very grateful. The CSS can be found here: http://clients.pixelbleed.net/biodesign/css/core.css
And, yes, I've tried removing the height:100%. Makes no difference it seems. I do believe the issue to be with the footer, as when I remove these Div's the content rests as it should. Just don't see anything in my CSS to cause the margin/spacing issue though.
Thanks so much.
if you just remove the class "group" from asufooter-wrapper, the margin disappears.
Not the best solution, but one way to fix it is apply:
#asufooter-wrapper {
overflow:hidden;
}
The problem seems to be caused by some wrapping. However, I tried editing your white-space and widths to no avail.