We Keep Coding

Place dynamic DIVs in columns without vertical gaps between them?

Got a series of quotes of varying length to fit in DIVs of fixed width but content determined height. I could individually position each DIV so it looked tidy and there were no vertical gaps. For example - http://www.zergnet.com/. I wondered if there was a CSS solution to problem, as I noted Zergnet uses inline styling and absolute positioning of every news teaser (which makes me think javascript is involved somewhere).
.testimonialBubble {
position: relative;
width:48%;
margin: 8px 0;
padding:0 2% 0 0;
float: left;
}
The idea being no matter what volume of content is thrown (within reason) into the divs in the 2 col layout they'll fit together and fill spaces. At the moment if the 2nd element is longer than the 1st, when 3rd element kicks round under the 1st element there's a gap between the two caused by the 2nd elements height. Is there a CSS only solution or is it only achievable via javascript?
Many thanks for reading.

CSS positioning full width and height of multiple elements

Good evening gentlemen (and of course ladies),
I'm currently experiencing some problems with CSS and the dynamic positioning of some elements in one big container. And I hoped that anyone of you could probably know the solution for my problem.
Maybe I just start with the explanation, which I will split in three parts to make it easier to understand. In the end of this post, there are two links, one for the steps to visualize them and one for the example jsfiddle for step two.
Step one:
There is one div.container which has the height 255px and a dynamic width of 33.3%. This container contains two divs: div.left and div.right. The div.left has exactly 150px width, which should bring the div.right to fill up the whole remaining space.
I already tried to solve it this way, which works, but not for the next steps.
.left {
float: left;
width: 150px;
}
.right {
overflow: hidden;
}
Step two: Now, there should be three different elements in the div.right, a h3, span and p element. The h3 and span should just behave like a regular element, and use the space they want to use (like for displaying text). But the p element should take the whole remaining height of the div.right. I achieved this single step by using the code in the jsfiddle link in the end of this post. And it looks really cool, but it's not compatible with the next step. As you maybe already guessed it.
Step three:
As the p.description element contains a description, I want to put as much information into this small element as possible. Therefor, I hoped to use overflow:hidden in combination with text-overflow:ellipsis, but this didn't work. Due to some strange reason, the p.description element was placed right of the h3 and span elements after I added the overflow:hidden style.
And additionally, there is an extra div in the footer of the div.right, which is div.btns. This div contains about 3 plain links and is placed absolutely in the right bottom of div.right, and I only want to have the p.description element to wrap the text around it.
Right now, I doubt, that all of these steps are solvable by only using css. At least, I wanted to have the positioning of the elements with css and the truncating of the text could be done in Javascript.
Is there anybody out there, who has an idea, how I could solve my problem?
Many thanks in advance!
Attachments:
All three steps in one picture: http://cl.ly/image/2t2a3o3o2l0s/steps.png
JsFiddle for step two: http://jsfiddle.net/S8g4E/1188/

Check this Jsfiddle: http://jsfiddle.net/Mohamed_nabil/7btp2/
In css: the max-height of the ellipsis in lines(52 & 61) are now 200px,
this can be changed with jQuery if you want to, on window resize or load.
max-height: 200px; /*This value could be changed with jquery*/

How to insert an html element before another without shifting the originals position

I would like to be able to insert an element that a user can navigate (left) to without disturbing what the user currently sees. that is, the new element will be inserted offscreen, to the left, but the currently "focused" element (and the other visible ones) shouldn't be seen to move.
Currently I am doing this using insertbefore, measuring the clientWidth of the new element and subtracting that from the margin of the container element. However, clientWidth is expensive to get, and this method is proving problematic when I add transitions. Is there a cleverer way to do this? I would have thought it's a fairly common problem - insert an element before another without shifting everything else.

You could use some CSS to achieve this. Insert a wrapping div with no height, but overflow: visible, insert the elements you want inside this div:
.wrapper {
height: 0;
overflow: visible;
}
.wrapper div {
margin-left: 100%;
}

display half of element in css

So I would like to be able to only display half of an element. Now I could do something like the following:
function half($elem,which){
//here I would get the scrolling position
//of the element $elem along with the outer
//width and outer height. Then, depending on
//what 'which' is (left,right,top,bottom), the
//function would append an element with the same
//background color as the body background in
//order to cover the correct part of the element
};
But that is just adding extra items to the DOM that would be unnecessary if, in some simple css or javascript, I can set it to simply display (or cut out) only part of an element. Is that possible? If so, how?
UPDATE:
After all of you are trying to guess, here is a fiddle that constantly appends content to a container. To answer my question, you would need to have a function that changes the css of the specific div being appended so that it only appends the specified half of the content

I mean its hard to guess based on the small amount of information you provide, but something like this should work:
.ElementContainer {
width:500px; /* example, random number */
overflow:hidden; /* important part */
}
.Element {
width:200%; /* relative to parent, so double the width of parent */
}
And then just something like this:
<div class="ElementContainer">
<img src="whatever.jpg" alt="" class="Element" />
</div>
That should only show the first half, from the left. If you want to do like ... the middle half or something, you'll need to use positioning:
.ElementContainer {
position:relative; /* must declare position of parent */
width:500px;
height:200px; /* since child is removed from DOM, it will be 0 height unless declared explicitly */
overflow:hidden;
}
.Element {
width:200%;
position:absolute;
top:0; /* always declare both X & Y */
left:-25%; /* can be any negative % you want, this is just an example */
}
This will do this kind of centered appearance ... you can run with it from here, should give you an idea of options.

It's very easy to cut off after a specific pixel height in CSS, assuming you want to cut vertically, substitute width if you want to cut horizontally:
.restricted {overflow: hidden; height: 45px; }
See this jsfiddle: http://jsfiddle.net/jrvf7/
Cutting off after precisely half of an element, if you don't know the height of the element beforehand, will require some javascript. See other submitted answers for that. I'd suggest you go my CSS route if possible, however.

It's kind of vague exactly what you want to be cut in half, but I'd start with
background-size:cover;

Float div to the left while keeping it's "left" css property

so as the title says i need to float my div with absolute position to the left while keeping left: 100px or whatever it's set to, for example let's say i have these rules:
.myDiv{
position:absolute;
left:100px;
top:100px;
width:50px;
height:50px;
}
Now how can i float it to the left side which would be left:0px without using this left command, i need something similar to float:left also javascript is totaly acceptable.
And if any one is wondering why i need this quite strange thing is because i want to keep this object offset so later i could bring it back to it's original position.

You cannot do this. Absolutely positioned objects can only be moved by changing one or more of left, top, bottom, right (or relocating them inside the DOM tree).
If you want to be able to move the element to a previous position, save the value of left somewhere so that you can restore it when the time comes. It's easy to do and will be by itself enough to accomplish almost anything you will want it to.