We Keep Coding

How to align list element dynamically to its neighbor's height using jquery

I have a grid which will get expand on click. I need them to align and adjust the height accordingly.
When I click my nth child of li its not aligned properly. Can anyone help me with this. Thanks in advance.
I need like this
CSS
ul {
padding:0;
margin:
}
ul li{
list-style-type:none;
width:100px;
height:100px;
background:#ddd;
margin:1px;
float:left;
}
li.large{
width:200px;
height:200px;
}
Here is the demo
Thanks in Advance.

I checked out your JSFiddle and toyed with your CSS class values. I think the issue is related to positioning caused by your padding and margin values. Changing the value for the li.large margin to 2 px seems to achieve your desired result:
li.large{
width:200px;
height:200px;
margin:2px !important;
}
Try those values and see if you get whate you were looking for.

Trying to right-align a pop-up element in Javascript

I am trying to align pop-up elements in a header element in a table. Eventually the pop-up elements will provide functionality like sorting and filtering for my table.
Per default the pop ups align themselves to the left, but I would like to align them to the right :
My CSS code looks like something like this :
.Table .Popup {
position:absolute;
z-index:9999;
}
I would like to use the relative position instead of absolute (ie.relative to the header item), but I am not sure how. If I use absolute, doesn't that interfere with any other parent containers that have position set to absolute?
JSFiddle : http://jsfiddle.net/XJXuR/9/
Does anyone know how this can be done? JQuery or Javascript is fine. Thx.

Just add this CSS code:
tr.TableHeaderLabels td {
position: relative;
}
.Table .Popup {
right: 0;
}
I tried it on your jsFiddle and it works as expected :)
EDIT: Forked the original jsFiddle with my code: http://jsfiddle.net/p3khu/1/

Is this what you're looking for? http://jsfiddle.net/Vf2Td/
.Table .TableHeader td{
border:1px solid red;
margin:0;
padding:0;
position: relative;
}
.Table .Popup {
position:absolute;
z-index:9999;
right: 0px;
}
Give the parent div the position relative. Then the popup which is a child needs a right: 0px; so that it hugs the right of the parent container.

Assuming that you are have relative position on the cells containing two, three, four, etc... you can just add right: 0; to your css above and that should right align them.

Div to fill remaing vertical space

I have a complex HTML application, so unfortunately cannot really provide a code sample. We are trying to get the div (highlighted in red) to fill the remaining vertical space (see image).
The application consists of a header (in black), a sidebar on the left which can be dismissed or resized (note: the horizontal components resize correctly). To the right of the sidebar is another div (mainDiv). mainDiv contains a div at the top for the controls, and a div underneath it for the table of data (highlighted in red).
This table can potentially contain lots of data, so it needs its own scrollbar if the data doesn't fit on the screen.
We just want the table to fill all of the available horizontal and vertical space. We just can't seem to make it work.
We have created a jsfiddle example to demonstrate our layout as best we can. This can be seen here. We just want this div (in jsfiddle the div is called "tablewrap") to take up all of the remaining space.
Code (from jsfiddle) is as follows:
html
<div class="header">Header</div>
<div class="sidebar">This is the sidebar</div>
<div class="tablewrapper">
<div class="tableheader-controls-etc"></div>
<div class="tablewrap">table</div>
</div>
css
.header { height: 50px; background:black; color:white; }
.sidebar { height:100%; position:fixed; width 200px; background:gray; color:white; }
.tablewrapper{ float:right; width:75%; border:1px solid; margin-top:30px; margin-right:30px;}
.tableheader-controls-etc { height:150px; background:blue; color:white; }
.tablewrap { height: 200px; border: 2px solid red; width:100%; overflow:auto;}
If anyone can provide a solution that would be great. We would prefer CSS but can cope with Javascript.
Thanks,
Phil

The trick is to set position: absolute, then adjust the top, bottom, left and right properties as needed. See fiddle and explanation.
.tablewrap {
position: absolute;
top: 240px;
bottom: 0;
left: 150px;
right: 40px;
height: auto;
width: auto;
...
}

You can try this:
.tablewrap { height: 200px; border: 2px solid red; width:100%; overflow:auto; min-height:300px}
(Set the min-height as you want)

Well, it's time to say what you probably don't want to hear hehe: you can't do this with CSS.
You have to use javascript in order to find out two things:
Viewport height
Controls div height
Once you know those two heights, you can set your table height to:
finalHeight = viewport - (controls+header+footer)
If header and footer have also dynamic heights, use javascript to calculate them.
You will also need to recalculate this height on window resize. And of course your layout won't work if javascript is disabled.

IE8 display:none; to display:block; causes div to overlap footer?

I have a form with errors that appear above it that look like
<div class="form-error" id="optin_error" style="display: none; ">You must opt-in to participate.</div>
And a form inside a <form> with a bunch of inputs inside of divs... nothing really out of the ordinary.
But I have javascript validation on my field with turns the form-error from display:none; to display:block; which resizes the container field fine. The problem lies in the fact there is a footer (also inside a div) that does not move down. If I open up IE8 developer and look at the main container (that wraps everything) it also does not extend. If I for example uncheck the main container width style and then recheck it, it fixes everything.
Is there a way to force IE8 to "resize" their divs when an element inside a div turns from display:none; to display:block;
PS. There is no funny css, no floats, no absolute positioning, nothing that would cause this...
Form Error Block CSS
.form-error {
color: #EB1F25;
}
Footer Block CSS
.footer-wrapper {
border-top: 1px solid #000000;
margin: 30px 0 10px 0;
}
.footer-wrapper .links {
width: 960px;
}
After some investigating it seems the inline-block attribute on the container is causing the issue.

Ended up being an issue with display:inline-block; element not resizing. Changing to float worked.

try givin the width to the wrapper. remember the footer should be inside your main wrapper, Also give a height other divs... min-height or something similar.
.footer-wrapper {
border-top: 1px solid #000000;
margin: 30px 0 10px 0;
width: 960px;
}
.footer-wrapper .links {
width : 100px;
}

It's hard to tell what exactly is making the problems. But you can test out some of this tips I suggest you to try:
If your .form-error is showing up before (above) the actual <form ...></form>, then try to insert a <br clear="all"/> tag between those two blocks. If not, add clear:all to <form ...> and width:100% to .form-error.
If not, add position:relative and overflow:hidden first to the .form-error, if not helps, add it to <form...> too.
As already said, will be much easier if we could see your entire code, try to use jsbin with your entire css and html source code, because IE is very strict in html rendering.

CSS & JavaScript - Anyway to emulate this JS behaviour with CSS?

I have some div such as :
<div onmouseover="this.style.background='#CCCCCC'" onmouseout="this.style.background='#FFFFFF'">
So when i go on and out with the mouse, they change colour. Any way to do

Yes:
div{
background-color:#CCC;
}
div:hover{
background-color:#FFF;
}
However, beware that this might fail in some browsers (IE6-) because :hover was at the start only meant to work with links.

Are you using the <div> as a link? Keep in mind that you can just use an actual anchor, <a>, and make it block level so it can maintain the width of height of your choosing.
a {
display: block;
width: 200px;
background-color: #ccc;
}
a:hover {
background-color: #fff;
}