We Keep Coding

Using CSS, how I can keep a block of white space from collapsing , even if there is no DIV element present?

I have the following elements: Title, Description, and Image. There should be 20px space above the Title, like this:
As you can see from the picture, there is a block of space above the title. I want the space to remain there, even if the Title and Description are not present. For example like this:
Right now my problem is that, if there is no title and description, then the space is collapsing and the image is moving up and basically occupying that space.
How can I keep the space, even if there is no Title and Description present or not? I thought of applying min-height to the "titleName" , but that has not worked.
<div class="myComponent">
<div class="myContainer">
<div id="head_Title" class="mainTitle">
<h2 class="titleName"> This is a Title</h2>
</div>
<div id="description" class="mainDescription"></div>
</div>
</div>

If I am able to understand the question correctly, your problem would easily be solved by adding
margin-top: 20px;
to myComponent class

As I understand from your question, when we remove the div, the entire div is removed from DOM element and also the space gets removed.
We can use the Visibility CSS property. When we use visibility:hidden property, the text content from div is hidden from the HTML DOM but not removed from the div tag.
You can also dynamically add a class that contains hidden property. The total space will be equivalent to the combined space of title and description.
I created a demo for reference with & without title and description, have a look here https://jsfiddle.net/alepsh/todenjsr


How to create search box that extend itself when displaying filter?

I want to create a search box that extends itself downward when user input something
Here is an example
Right now I set up the html such that it displays all the possible values at the bottom of the search box
Search: <input ng-model="query">
<ul class="my_possible_values">
<li ng-repeat="possible_value in my_possible_values | filter:query">
{{possible_value}}
</li>
</ul>
However the listed element pushes down other div element below the search box instead of overlaying it.

You should put a position: absolute style on your .my_possible_values class -- that is how I've made/styled my search box dropdowns in the past. This will take the dropdown content out of the normal flow of the DOM, thus preventing it from pushing down the other divs on the page.
You can read more about CSS positions on this page :)
http://www.w3schools.com/cssref/pr_class_position.asp
Additionally, you'll probably want to add overflow-y: scroll and a max-height style to your .my_possible_values menu as well so that it does not overflow the bottom of the page if you have a lot of dropdown options.
I'd say those are the most important CSS rules for creating a good dropdown list. Good luck!

How to automatically identify the appropriate space between divs

I was looking into ebay.com and the way that items are displayed (scroll down on the page and see div content the items boxes have different height)
<div id="content" class="content">
I am thinking of doing something similar but the problem that I am having is that somehow I need to cater for the spaces between each item because the divs will be generated automatically.
Can I do this with css (maybe grouping some items together and keep a margin / distance from each other automatically)?
Example fiddle here:

You can do it with CSS up to a certain level of quality, by floating elements;
after that, you must use JavaScript.
But you should really check out Masonry, because I guess it's exactly what you need.

You can use :first-child (or :last-child) to change the margin on the first or last element so you get neat spacing.

Using Javascript or CSS, how can I add additional space at the end of a block of text, but only if it does not start on a new line?

Let's say I have some text, with a (more)... link at the end of each paragraph. It ends up looking something like this:
This is just a test paragraph. Click on the more link for more info. (more...)
Now I'd like to add some space between the link and the paragraph text, so I wrap the link in a <span> tag and push it to the right with a margin-left: 10px:
This is just a test paragraph. Click on the more link for more info. (more...)
The problem here is, if the text wraps right on the more so that it shows up on a second line by itself, it will look indented:
This is just a test paragraph. Click on the more link for more info. Push it down!
(more...)
When the desired output should be:
This is just a test paragraph. Click on the more link for more info. Push it down!
(more...)
Is it possible to achieve this effect using either Javascript or CSS?
Side note: It is possible to achieve this effect by removing the <span> tag and using &nbspcharacters to push the more linke to the right with proper text wrapping, but this is a solution I'd like to avoid unless there is no other choice. Or I could use Javascript to insert the &nbsp's before the span, but that's not exactly a nice solution either.

You could set a width on the paragraph and then float the span to the right.
That way the (more...) remains on the the right always.
Not exactly what you are after but I think it looks decent.
Example: http://jsfiddle.net/WFuBd/1/

If you wrap the content before the link in a span and apply a margin-right to that, you'll get the desired effect. (Unfortunately, this, too, is not really a nice solution)

Why not use 2 div's. Div one floats left, div two floats right... Make sure overflow=hidden on div one, and (more...) is on div two.
[div 1 lots of text i.e.: 300px] [div 2(more...) i.e.: 40px]
It will look perfect every time. You'll have to play around with it to look right, but it'll work. You could then just do a little jQuery when you click more...to show the rest and hide 'more'.

With a bunch of divs floated left, lined up in columns with different heights, they don't create a nice grid without setting a height

I am trying to create a grid like system with div's with content floated left. The problem is that the height of each div is not static since the content is different in each one. Since the height is different.. things get outta whack if one is taller then another in one row.
Is there some sort of css way or js (prefer javascript) way to get around this. I really want to avoid setting large heights on the divs to get them to line up.
You can see the example here: http://www.foreclosurejournalinc.com/index.php?option=com_hotproperty&view=type&id=1

First off - it is not correct to use a table in this situation: The table structure defines a relationship between data in the same row, and data in the same column. Since the second column is the same type of data as the first, there's no table relationship here.
You shouldn't use a table because you're defining your layout in markup, so you can only ever have two columns. For example, if the client decides they want three columns, or you want to show a single-column list for a mobile view or print stylesheet, you need to change the markup (or even have several sets of markup for different purposes).
Flexible markup
OK - let's look at your markup. At the moment, you have almost got a table structure, because you're wrapping each row in a DIV. Again, this means you can't ever have a single column or 3 or 4 columns side-by-side.
A more flexible solution is to markup your data as a list. Because it's sorted, an ordered list is the right choice:
<ol id="list_properties">
<li class="property">
<h3 class="propertyTitle">08-CA-001731</h3>
<dl class="details">
<dt>Plantiff</dt>
<dd>Bob's Mortgages</dd>
<dt>Defendant</dt>
<dd>Harry Skinflint</dd>
</dl>
</li>
<li class="property">
<h3 class="propertyTitle">08-CA-001731</h3>
<dl class="details">
<dt>Plantiff</dt>
<dd>Bob's Mortgages</dd>
<dt>Defendant</dt>
<dd>Harry Skinflint</dd>
</dl>
</li>
</ol>
You'll have one <li class="property"> per item in your 'grid'. I've suggested some nicer markup for the details, too - help yourself to that if you like.
Now to finish it off: Sadly, this can't be done in a cross browser fashion without a bit of final tweaking with Javascript. That said, the JS is unobtrusive, so it really only acts as a bit of polish at the end.
Base styling
Your base styles will look like:
#list_properties {
list-style:none;
margin:0;
padding:0;
width:960px;
float:left;
}
#list_properties li.property{
width:430px;
float:left;
margin:0 50px 50px 0;
min-height:16em; /* For FF, Safari, Opera, IE8 */
_height:16em; /* For IE6 */
*height:16em; /* For IE7 */
}
That recreates the columns - at this stage, if all of the boxes had a height less than 16em, this would be all you need.
Javascript polish
To make sure everything is rock solid, I'd use the equal heights plugin for jQuery: http://www.cssnewbie.com/equalheights-jquery-plugin/ Basically, you pass it your container (#list_properties) and it scans each of the children (li.property), and sets the height of each one to the height of the tallest item.
So, for instance, one item has extra information and needs 18ems of height, all of the other items are set to 18em too.
The linked site has documentation for getting it going, but once you've got jquery and the plugin ready, you need only do:
$(function(){
$('#list_properties').equalHeights();
});
Once you get it set up this way, you can modify the number of items in the column just by changing the width of the li.property.
A last thought...
I'm just thinking, what is the advantage of displaying this list in columns, anyway? After all, the user can sort the list - wouldn't a single-column list be easier to scan? I'm assuming the user will be looking for a particular item, rather than just browsing through semi-randomly.

Floating <div> elements are tricky to work with, especially if you're aiming at multiple browsers.
If it's important that they line up in a grid format, I'd use a <table> instead; <div>s are meant for dynamic content that may or may not line up with everything else, and it seems like a misuse to expect them to line up perfectly, especially if their sizes are unspecified.
Also, since the float CSS property modifies how block-level elements interact with other floating and non-floating elements, I'd float the <table> element and give it a set width.

Check CSS display: table; for layout:
http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

I think if you add a cleared element after every two entries that would help.
<div style="clear:both"></div>
That is, you have hp_prop twice then insert the cleared div.
The
<br class="clearboth">
is not having any effect in the position that you have them.

You might want to look into some of the grid-oriented CSS layout "frameworks" out there. The general idea is to have a bunch of classes that are applied to blocks of content so that you're not dropping little numbers all over the place. There are various different approaches; a google search for "CSS grid framework" should get you started.
Here's another idea: do you know how many tables are in a row? Well, can you not wrap each row of <div> boxes in another "row" <div>, with that one set to overflow: hidden so that it stretches out around the floated boxes inside it? The outer <div> elements would not need to float at all (though they could, if need be). That would have the effect of making each row as big as the biggest cell in it.

There are two options:
Mark the end of each "row" with a <div>or <hr> which "clears" both sides by using the css "clear" attribute. You can learn more about hit here: http://www.w3schools.com/Css/pr_class_clear.asp
Do what Pointy said and use a CSS framework. I would specifically recommend 960 Grid (http://960.gs) and/or BluePrint CSS (http://code.google.com/p/blueprintcss/). Both are simple, small, and easy to use. They basically use the above technique to achieve the result as well as offering you a bunch of other nice features (easy to create symmetrical and nicely proportioned layouts).