We Keep Coding

CSS elements seem to overlay when zooming in

I am trying to create a HTML site with CSS styling and run into the following issues:
Depending on monitors size, my HTML element's positioning changes. So if It's a bigger screen, then lets say everything fits correctly. But if you open it in a smaller screen, not everything is displayed!
If I zoom in the browsers view, the elements begin to overlay each other - yet I want to stay where they are (even if that means they wont be displayed on screen due to a high zoom IN).
(I cannot post images yet, so I'm adding a link to the picture to explain abit more):
I am also posting a fiddle where you can see my CSS for the MENU and the HTML part that is connected with it:
I have to write some code, but my code is too long and wouldn't look nice.
My Fiddle
It would be really nice of you, if you can help me out here. If it's a problem more complicated to explain on how to fix it, I'd kindly ask, if you can change my fiddle to a working version (if it's not too much to ask).
I have checked already similar Questions, but there were no efficient answers that helped me to solve my problem.

So, the reason that you are getting this behavior comes down to the fact that you have set your two buttons to each be fixed with the position set to %. This means the position of each is calculated as a percent relative to the 'viewport' (the browser window). If the window is only 500px wide, then your 40% left position button sits at 200px and the 50% left position button sits at 250px, thereby causing them to overlap.
Generally, I would not use fixed positioning here, but it's really not possible to provide a better alternative without seeing more of your code. (Perhaps you'd like to get feedback in general by posting all of your code on CR).
You can solve the problem by wrapping both elements in a div and give that div your fixed position values for the first element and allow the second button to be positioned relative to the first.
Here's an example of that approach and your updated fiddle:
Change your HTML:
<div class="btns">
<a href='index.html' class='button_lay'>NONE</a>
<a href='dft.html' class='button_dft'>NONE2</a>
</div>
Add a rule for the .btns class to your css and remove the fixed positioning from each of the buttons:
.btns {
position: fixed;
top: 80%;
left: 40%;
min-width: 300px;
}

Expand one div to cover another div

I'm using jQuery to expand a div while hovering it so it covers the entire width of the page. It contains a large table and I'm required to build for a low resolution but in reality everyone has a higher so this is an accepted workaround. My problem is that the div "jumps" down below the other divs instead of covering them as I would like it to. Anyone know how this can be achieved?
I've created a jsfiddle of it so you get the main idea: http://jsfiddle.net/MRNxt/1/
Hover the grey box and make it expand to the right covering the #asd2 in the sidebar instead of below it.

Check this fiddle: http://jsfiddle.net/MRNxt/4/
The solution involves adding absolute positioning to the log div when expanding and taking it out when collapsing. Also included is a small fix to avoid flickering while animating.

Add this css:
#asd2{
position:absolute;
z-index:-1;
}
#log{
background:white;
}
Example: http://jsfiddle.net/MRNxt/2/

Is there a reason that using something like lightbox/thickbox isn't suitable?
Alternatively, you will need to play around with absolute positioning and z-index. I'd advise figuring out your ideal layout before working on the animation. Put it together in CSSEdit/Firebug/whatever so that your boxes are exactly where you want them to be and then it will be simple to add to the animation script.
Or just use an off-the-shelf lightbox.

This won't be the perfect answer:
http://jsfiddle.net/MRNxt/7/
but here I used a subContainer to allow you to have a 100% width and some border.

Marquee on mouseover and overflow

I've searched high and low for a tutorial but I can't find one.
It is really a simple task that I see in lots of websites.
Pretty much like I have a menu, with a set width, and if my link is extra long, I want the overflow to be hidden, and when the user mouseovers the link, it will marquee the rest of the text.
It really shouldnt be this hard cuz I see it in lots of websites.
I really want to avoid using the marquee tag and go for javascript instead but my javascript is quite horrible and jquery is absolutely impossible to follow.
Any suggestions?

Try this:
http://jsfiddle.net/bryanjamesross/vsQFE/4/
The trick is that you will need individual container elements with overflow:hidden and set widths for each link, otherwise the whole container will scroll, instead of each link. In my example, I contained each <a> inside <li> tags that had set widths and overflow:hidden.
Then it's just a matter of hooking up the jQuery and animating correctly.
edited: fixed an animation bug, and made a the code a bit easier to follow

Just add this to your element
onmouseover="this.style.overflow=''" onmouseout="this.style.overflow='hidden'
Did it help?

wicket: how to make div height dependent on another div

I'm a GWT refugee, trying to figure out how to do various Ajax-ish things in Wicket.
I have two divs. I'd like to make the first div's max-height dependent on the height of the second div, with a "more/less" link so that the user can expand the first div.
Example:
The content of both divs is variable, and since div2 has wrapped text in a proportional font, I can't really predict its height until rendered in the browser.
In GWT I accomplished this by adding content to the div1 a line at a time, and if it exceeded the height of div2 (which already had its content rendered), I simply removed the line. Since GWT runs on the client, this is fairly straightforward.
What's the best way to do this in Wicket? I'm expecting to need a little Javascript, but if there is a component that already does this (or makes it easier) I'd be very happy to use it.

With help of pure Wicket I do not think, that there's a way to do this. But maybe the Wicket + JQuery approach will help you achieve your idea...

There seems to be a rather simple JavaScript-solution (except that it doesn't solve the showing-half-a-line-problem but I think that can be solved by toying around with this:
document.getElementById("div1").style.height = document.getElementById("div2").offsetHeight;

Can't this be solved almost completely by CSS? Like adding both DIVs to a third DIV with an overflow:hidden attribute, cutting of the second DIVs contents and expanding the height of the wrapping DIV by JavaScript?
Maybe you'll have to change DIV1 to inline processing so it wouldn't 'push' the lower border of the container or something like this...
Just as a pointer, didn't try it, can't try it right now and not sure if it works but I think, it should. Anyway you or me, someone would have to play around with this to find out...
Hope this helps a little bit.

You could render both fully open (to improve accessibility to non-js users), then restrict the height of Div 1 to the height of Div 2.
So (with jQuery)...
CSS
#div1 { overflow: hidden; }
Javascript
$(document).ready(function() {
var div2_height = $('#div2').height();
$('#div1').height(div2_height);
});
To account for chopping on a line, test the line-height and set the height as a multiple.

Autoresize Element (div) to Fit Horizontal Content

I tried googling, but didn't come up with much. I'm building a horizontal carousel which displays images in a LI, floated. The issue I want to solve is, everytime I add thumbnails to the carousel (I'm lazy loading), I need to recalculate the width of the carousel (so that all the floated thumbnails line up nicely side by side).
For one, I rather not have to do these kinds of calculations in JS, and for two, I found that it's hard to find a cross browser way to ensure that the width will be properly calculated (I end up having to add or remove pixels from the total width depending on the browser).
So my question is, is there any way without JS, to be able to add content to a div, and have the width adjust as needed, the same way a div's height would?
And if not, have you found a more efficient way to handle this scenario than recalculating the width every time?
I'm not new to web dev, and for as long as I've been in this field, to my knowledge this has never been possible. But with the advent of new technologies cropping up, I thought maybe there was an obscure way of achieving this now.
Thanks in advance!
[EDIT] (for clarification, but simplified): If my carousel is 500px wide with overflow hidden. There's a slideable section containing thumbnails, each is 100px wide, floated, they fit 5 across in the carousel. When a user clicks Next, it lazy loads the next set of 5 thumbnails, and appends it to the slider area after the first set of 5. But since this div was 500px wide to accommodate 5 thumbnails, adding another 5, I need to recalculate the width to get the new thumbnails to show up side by side. Ideally I'd like to find a way to have the div autoresize its width to fit horizontal content, the same way it naturally does for vertical content.

I've found that using a containing carousel div with white-space: nowrap and overflow: hidden has worked. I then have display: inline-block for each item in the div.

Using this class for each individual item:
.eachItem {
display: inline-block;
}
Will work (I've done something similar to that).
The problem is that in IE7 it won't work! and you'll have to use JavaScript anyway :(
EDIT: I meant inline-block... and as you may know, IE7 doesn't "like" it.