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
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%;
}
Here's the effect I'm trying to achieve.
[image removed - client template]
At the moment, I'm using position:absolute to push the content section up into the slideshow, however, I can't make the wrapper identify the height without setting it manually. The content section needs to be dynamic (client will be updating this). So, ideally, I'm looking for a way to avoid using position:absolute with top: -115px etc. This problem also affects the footer. If I put a footer at the bottom, it also won't recognize the height, so instead of placing it below, it assumes it's spot is right below the slideshow (underneath the content section).
Thanks in advance for any help. Let me know if there's anything else I need to post for clarity.
Bc
How about margin-top: -115px?
I'm trying to make a HTML "showcase". I am thinking of using elements like this:
<div id="index-showcase-tabs">
<div id="index-showcase-tabslide">
<div class="index-showcase-tab" id="showcase-tab-1">Item1</div>
<div class="index-showcase-tab" id="showcase-tab-2">Item2</div>
...
<div class="index-showcase-tab" id="showcase-tab-N">ItemN</div>
</div>
</div>
The showcase items are floated left, and I don't know their precise width, nor the number of them.
Problem is: if the combined width of the items is bigger than the container (index-showcase-tabs), I don't want them to break line (which they do by default). I want them in one line, and I want to hide the overflow and then let the user scroll them with javascript (not by scrollbar...).
How would I do that?
PS: There's not much css for the items yet. I only gave the slider a specific heigth:
#index-showcase-tabslide
{
height: 34px;
}
Edit: Here you can see my problem.
Edit2: explaining more with a fiddle: http://jsfiddle.net/TbSfj/19/
For this, you cannot use float: left. Instead use display: inline - this will have the same effect for what you want to accomplish, and it will not be constrained to the parent div in the DOM model.
check out this sexy control:
http://jsfiddle.net/SoonDead/U6QdQ/20/
this way made for my project, but I think it does what you want.
The tricks are:
Because you use a lot of characters that can "linebreak" and even forcefully disable linebreaks have different results in 1-2 browsers, I would recommend against it.
Instead make the overflowing width wide enough to hold all the elements easily, so if javascript is disabled it will not look ugly.
(I know that you are fine with jquery, so I use it within the example, also the outerWidth property in simple js has bugs in webkit (tends to be 0 in some cases).)
So you need to sum up the elements' outerWidth() and set the content holder's width, so you can use scrollLeft, and not overscroll.
There is no other trick, just a scrollTo function because calculating positions are not that trivial if you are new to jquery and you might want to use that.
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.