Develop Reference

Preventing divs from clearing inside an animated container

I have a horizontal jQuery animated slider which works great, except as its width begins to decrease, no matter how I set up the <divs> inside they go to newline. I want them to stay on the same line to create this smooth illustion.
Here's what I mean: jsfiddle
How do I prevent them from clearing?

use max-width instead of width:
#container { max-width:500px; height:500px;border:2px dotted maroon; }
.red, .blue, .green { display:inline-block;max-width: 250px; height:50px; margin:0 auto;}
here is the jsfiddle link
UPDATE:
to avoid clear try jsfiddle

Fixed header and footer within table and div?

I have a table that is within a scrollable div window. The header is enclosed in a thead tag and the footer is in a separate tbody at the bottom. I need them to be fixed to the screen while maintaining their alignment/orientation.
I've tried
position:absolute
and that skews everything.
See the following fiddle:
http://jsfiddle.net/jkgt3wdm/
I am open to all suggestions.
EDIT: also needs to be able to scroll to the left and right.

After making sure that your footer is in a <tfoot>, you can fix it and the header at the top and bottom of the page with:
position:fixed;
and then position the header at:
top:0;
and the footer at:
bottom:0;
Like this:
thead, tfoot {position:fixed;background-color:#000; color:#fff;}
thead {top:0; }
tfoot {bottom:0;}
You will still have to configure the widths of your <tbody> cells, but this should give you the sticky header and footer.
Is this what you are looking for: http://jsfiddle.net/jkgt3wdm/6/

To be honest, the easiest way to deal with that would be to use somethings that's already built. Messing with table is not always easy and if someone already found a foolproof way to do it, why not use it :)
I recommend using this: https://github.com/jmosbech/StickyTableHeaders

Check this out as a fast solution:
.header{
width:100%;
height:20px;
background-color:blue;
}
.footer{
width:100%;
height:20px;
background-color:green;
}
.content{
overflow-y:auto;
}
http://jsfiddle.net/jkgt3wdm/7/

Fluid resizable image with infinite horizontal scroll (REV. 2)

I have coded a site with a simple horizontal "nowrap" css with img floated side by side. I have also hide the scrollbar away. The side scroll can be done by normal vertical mousewheel scrolling (see my project url
Because the images is all in big resolution of 1400x850px, i wanted to create a site that that will scale the images according to the browser size. Currently all the images are in max-width:100%, my aim is to scale them below that percentage when the browser is smaller.
I tried using max-width:100% with both width and height in auto. It not working.
I try using jquery fluid images script, they are not working as well due to "nowrap"
Below are the main code i am using:
#content {
width:5600px;
overflow-x: auto;
white-space: nowrap;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#portfolio img {
float:left;
display:inline;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
This is the link of my project: http://credencepartners.com/demo02/
This is the result i trying to produce (for example please see the comments): http://credencepartners.com/demo02/interface/scene01.jpg
Do i need to implement javascript on this or CSS is possible for this scenario?
UPDATES / 10th Aug 2012
Thanks to Corey for the heads up, i have updated my demo02 link. The problem now is just adding the texts below the images. I tried using a div class to combine the text and images together, the result causes the images to be be non-fluid again. Now i need help making a fluid and re-sizable div tag.
GOALS
Knowing that building a typical horizontal side scrolling website is quite straight forward. The main problem i have is only the fluid resizable images at the top. I am pretty new that fluid/responsive layout and hope the gurus here can enlighten me :)

Use this CSS:
body, html {
width:100%;
min-height:100%;
height:auto !important;
}
#content {
width:100%;
height:100%;
position:relative;
}
#portfolio {
width:100%;
height:100%;
position:relative;
}
#portfolio ul{
width:100%;
height:100%;
display:block;
white-space:nowrap;
overflow:auto;
list-style:none;
padding:0;
margin:0;
text-align:center; /*in case not enough images to create a scroll*/
}
#portfolio img{
width:auto;
height:100%;
display:inline-block;
position:relative;
}
And lay out your html like this:
<div id="content">
<div id="portfolio">
<ul>
<img src="src.jpg" />
<img src="src.jpg" />
<img src="src.jpg" />
</ul>
</div>
</div>

I tried a little and found out:
You need to remove the height and width-Tag from the images
You set the height of the "portfolio"-div to the window-height using jQuery/JavaScript
That must be all, hope I understood what you meant

set the body height width css expressions

I want to change the body height dynamically using css expression.. my code is
HTML
<body >
<div class="tall_top" >
</div>
</body>
CSS
body {
width: 100px;
height: expression(document.documentElement.clientHeight);
background: red;
}
.tall_top {
background:#f1f1f1;
width:50%;
height:50%
}
But It is not working in google chrome..... The inner div is not displaying. The height of body displaying in inspect element is 0px;
JS Fiddle
http://jsfiddle.net/3x6fh/

div.tall_top does not show up because your body,html does not have a height.
Set the height to 100%
html,body {
margin:0;
width:100%;
height:100%;
background:blue;
}
Demo: http://jsfiddle.net/codef0rmer/3x6fh/2/

css expressions is not worth learning any more. use JavaScript or css media queries. and also it will create the browser compatibility issue since it is only supported only ever IE6/7 (maybe) 5.
High Performance Web Sites: Rule – Avoid CSS Expressions

Your expression essentially evaluates to the height of the window, which is usually the height of the <html> element.
Adding this CSS should work:
html, body {
height: 100%;
}

How to centre and scale up/down image within a resizing DIV

I have a DIV that is changing size depending on the browser window. I have an image inside of it which in effect will essentially fill up the entire browser window, and I need it to resize without stretching out of proportion when the window gets too wide or too long.
Additionally I need to have the image centred so you see the 'sweet spot' of the image when it becomes too big for the browser window.
I've been searching for ages and trying many different things but I can't work it out for the life of me. Perhaps it could be solved with Javascript or jQuery?
This is the CSS I have so far of the DIV id and the IMAGE class:
#VisitUsSlides {
height:100%;
width:100%;
position:absolute;
top:0px;
left: 0px;
}
.resizingImage {
width:100%;
min-width:100px;
min-height:100%;
position:fixed;
top:0;
left:0;
}
It's scaling up and down but starts to 'squash' horizontally when the window gets to thin, and it isn't centering.

Give it a try
<html>
<head>
<style type="text/css">
div
{
width:100%;
height:100%;
background-image:url('sample.jpg');
background-repeat:no-repeat;
background-attachment:fixed;//**Edit: Add this and check**
background-size:cover; //Edit2: Add this and check
background-position:center;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Hope this solves your problem.

assuming the div have an id named
imageholder
#imageholder{width:500px;height:500px;position:relative;}
#imageholder>img{width:90%;height:90%;position:absolute;z-index:10;top:5%;left:5%;}
hope that helps
also while re-sizing the div. set the image max-height and max-width to its original dimension.

img {
margin : 0 auto;
display:block;
}
give it a try.
position your div as you want.

Try this JavaScript:
http://jsfiddle.net/Teak/6yxcG/
I'm not sure it's what your looking for but it could be expanded/edited, to be better. I'm not completely certain about what it is your after.
Edit: Try this full page version: http://www.teaksoftware.com/html/

There's a CSS3 property but i'm not sure about the support it has.
.resizingImage {
height: 100%;
width: 100%;
object-fit: contain; /*OR*/
object-fit: fill; /*there's also an object-position property*/
}
This prevents the image from being stretched.
Given that it's only ONE line of CSS you can try it out.