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
Related
Hi I don't know how to solve this...
I want the element marked with a red rectangle in the images to move depending on the size of the screen ALIGNED to the containers below ALL THE TIME. I'm making a responsive website with the different media screen instances but I want to be sure that this element keeps in the same alignment all the time. How do I do that? No JS please.
http://www.awesomescreenshot.com/image/58399/669844960fdd9761084f64bae5d29112
since you haven't provided any code for what you have so far its difficult to help you. However, I think I understand what you need and you need to specify some width constraints to accomplish this:
you will need a container inside the header that will have the same width as the content below. Here is a working fiddle
css {
width: X%;
}
I'm trying to make my sidebar div the same size as content div, I could set container div to white and would work "As I wanted" but I need to keep this small empty background at the middle of content and siderbar to look like they are separated...
I already tried something like this:
CSS: Set Div height to 100% - Pixels
I spent more than an hour trying to figure it out but nothing work in here...
The only way I could do it was Javascript but that's not friendly.
Here's an example of my question:
http://jsfiddle.net/cn7cd/1/
Thanks for reading.
have a look at this http://css-tricks.com/fluid-width-equal-height-columns/
it has a good recap of different methods to achieve what you are after
I dont know if you are ok to use a bit of JQuery, but if that the case, here is a possible solution
var cHeight = $('#content').css('height');
$("#sidebar").css('height',cHeight);
console.log($("#sidebar").css("height"));
Demo
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...
So I have a case of client-itus here. The client is whining and my boss is demanding that I add a logo underneath the Archives tab over the banner ad seen, which would break through the structure I've set up. We're two days from launch and I have a choice of either taking precious time away from other work to restructure the layout, or find a way to position that logo without having to futz with the divs. I understand HTML and basic CSS, so I thought I'd see if I could find a better solution before going about this the hard way. Thank you for all your help! The current page can be seen at ctdailydose.com/new
(Just for clarity, what I want to do is add big circular logo on the right that says "Scolari Engineering" without having to rewrite the CSS and change the header's entire structure.)
Just add your image (logo) at the end of the end of the achor in your menu-banner div and position:absolute right:0px top:0px for it in your css. Adjust the position as needed.
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%;?