We Keep Coding

HTML - CSS - How to left-align images in a centered and resizable parent

I have a lot of thumbnails in my page: I want them to be centered, but the last line looks awful while resizing and I have something like one or two orphan images floating in the center of the page.
The last line should be left-aligned.
How to do it?
I tried to insert another div with "margin:0 auto 0 auto;" but it doesn't work.
https://jsfiddle.net/4hw4fkm9/
What I try to have:
<div style="text-align:center;">
<img />
<img />
<img />
<img />
etc..
</div>

You should use CSS for this, not the HTML attribute "align", which is pretty old school. You can either float the images left, in which case they will stack to the left, or you could set all the images to display: inline-block, then use text-align: center on their container element (the div in this case).
Here are some references:
http://www.w3schools.com/css/css_float.asp
http://www.w3schools.com/cssref/pr_class_display.asp

I'm not sure if this is what you're looking for - as you mention that you both 'want them centered' but want them left-aligned, too.
What you can do is create another div that will act as a container, set width: 100% on the main div, set the width slightly lower on the container div and set margin: 0 auto; on the container. Then make the images relatively positioned with left:0;.
See Updated Fiddle Here. Is this what you're after?
EDIT: Re-Updated Fiddle for my attached comment. You can use set pixel values on the main and container div to account for the set pixel width of the thumbnails + any spacing that occurs.

Using the selectors in the fiddle.
.center {
text-align:center;
background-color:red;
margin:0 auto;
padding:0 20px;
}
.center:after{
content:'';
display:table;
clear:both;
}
img {
width: 100px;
height: 100px;
float:left;
}
From there the .center element would need a width of some multiple of 100px to include a fixed number of imgs. I added padding to make it look closer to the picture you provided.

Overlaying one div over another, but not knowing the size of the div

I'm trying to lay one div over another. This is really simple if you know the dimensions of the div.
Solved here:
How to overlay one div over another div
So, here is my HTML:
<div class="container">
<div class="overlay"></div>
<div class="content"></div>
</div>
In my case, I don't know the exact dimensions of the "content" or "container" div. This is because I don't have control over any of the content in the div (we are making our app extensible for 3rd party developers).
See my example on jsFiddle
The overlay should cover the content entirely. Width 100% and Height 100%. However, this does not work because in my example I positioned the overlay absolutely.
One solution is to use JavaScript to get the size of the content div and then set the size of the overlay. I don't like this solution much since if image sizes are not specified, you need to wait until images are loaded and recalculate the size of the div.
Is there any way of solving this problem in CSS?

You could set the position to absolute and then set all 4 positioning values to 0px which will make the box expand. See a demo here: http://jsfiddle.net/6g6dy/
This way you dont have to worry about recalculating things if you want padding on the overlay or the container (like you would if you used actual height and width values), because its always going to be adjusted to the outer dimensions of the box.

It's not possible to do this because:
The overlay is not contained by anything to restrict it's size (since there is no height/width applied to the container).
The size of the content div can change as content loads (since it has no fixed width/height).
I solved this by using JavaScript*. Eg.
function resizeOverlay() {
$('.overlay').css({
width: $('.content').width()
height: $('.content').height()
});
}
$('.content').find('img').on('load', resizeOverlay);
*Code not tested.

Hey are you looking like this : http://tinkerbin.com/Vc4RkGgQ
CSS
.container {
position:relative;
background:blue;
color:white;
}
.content {
position:absolute;
top:0;
left:15px;
background:red;
color:yellow;
}

I do not know what you are exactly trying to do but this might work:
container must be relative: anything from static
overlay and content are absolute :move top/left in first non static parent; no flow.
Give same top/left to be on top and higher z-index for upper element.

See this demo: http://jsfiddle.net/rathoreahsan/kEsbx/
Are you trying to do as mentioned in above Demo?
CSS:
#container {
position: relative;
}
.overlay,
.content{
display:block;
position: absolute;
top: 0;
left: 0;
}
.overlay{
z-index: 10;
background: #ccc;
}

You can indeed do this without JavaScript. Your problem is that #container element has 100% width relative to the whole page. To fix this you can:
a) position it absolutely,
#container {
position: absolute;
}
b) make it float or
#container {
float: left;
}
c) make it display as table cell
#container {
display: table-cell;
}
One of the above is enough, you don't need to apply all. Also you should not position .content absolutely as this will prevent #container to have the same width/height.

If you are worried about images loading after the height is set you can go ahead and set the dimensions of the image in the containing div and use the padding-bottom hack. This way when the browsers paints over the page it knows how big the image will be before it loads.

Reverse HTML Layout

I will try to keep this as short and specific as I can.
This is what I need to display:
-----------------------------------------
#div1
-----------------------------------------
-----------------------------------------
#div2
-----------------------------------------
This is how I need the HTML structure to be:
<div id="div2">...</div>
<div id="div1">...</div>
The reason I need the second div to be higher in the HTML structure is because when the page is printed in Firefox, I have to use fixed position for an image that is contained in "div2". If "div2" isn't at the top of the structure, the image will be printed on the second page, and therefore cannot be moved to the first page using fixed position (as far as I know).
I cannot for the life of me think how I can do this with CSS2 (maybe CSS3?). I also looked into "Any Order Column" but I don't think that will work since I'm dealing with rows, not columns.
Any help would be appreciated :)
Edit: #div2 cannot be positioned absolutely because #div1 needs to be able to collapse, and therefore #div2 needs to follow.

For this you can use css3 display:box property for this. Write like this:
.outer{
-moz-box-direction: reverse;
-moz-box-orient: vertical;
display: -moz-box;
}
Check this http://jsfiddle.net/phSfD/2/

You can do it like this.
HTML:
​<div class="outer">
<div class="a"> [div a] </div>
<div class="b"> [div b] </div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
CSS:
.outer { position:relative; }
.a { position:absolute; top:100%; }
​Test it out: http://jsfiddle.net/phSfD/1/
The benefit of this approach is you don't need to know the sizes of either element for it to work.
This works because the height of the outer element is determined by the height of its contents. Since div A is absolutely positioned, it doesn't affect the height of its container, so the container's height is the same as div B's height. Setting A's top to 100% (of the container's height) means it will appear just below the container (and therefore just below div B).

One way to solve this is to set absolute positioning of the two divs. You'll need to have a parent with relative position and then set the absolute position of the two divs: div1 above the div2.
When you do so, remember to indicate in the <style> tag that these styles only apply to the on-screen rendering and provide a separate set of styles for printing, so that on print div would would appear below div2.

When you set position: fixed on an element, it is positioned relative to the browser window, irrespective of its container.
So, this
#div1 img{ position: fixed }
and this
#div2 img{ position: fixed }
will render the same result. You can write them in any order.

You can use display: table-*-group properties for vertical reordering of blocks of arbitrary height (dynamically resized in particular):
<style>
#example {display: table; width: 100%; }
/* Will display at the bottom of pseudo-table */
#block-1 {display: table-footer-group; }
/* Will display in the middle */
#block-2 {display: table-row-group; }
/* Will display at the top */
#block-3 {display: table-header-group; }
</style>
<div id="example">
<div id="block-1">First</div>
<div id="block-2">Second</div>
<div id="block-3">Third</div>
</div>
Works in all browsers including IE8+ (there is a small limitation in IE8).
For IE6/7 (if they do matter), elements can be swapped with JavaScript.
For details, see my article.

Size of div depending on size of another div

I got a div which contains 2 other divs. They are vertically aligned. Now, the lower div is changing its size via javascript. What I want now is that the upper div is changing its size depending on the other divs size. Is there a way to do this with css style only, without using js?
UPDATE: The outer div has a fixed size.
<div>
<div> childdiv 1</div>
<div> childdiv 2</div>
</div>
UPDATE: Ok I didnt make this clear enough, the lower box is changing its height in top direction. And the upper div should then decrease its height.

You could use display:table and display:table-row to change the height of the upper div accordingly, so that the total height matches the fixed height of the container:
#outer{
display:table;
height:200px;
width:200px;
}
#inner1{
background-color:red;
display:table-row;
}
#inner2{
background-color:green;
display:table-row;
height:30px;
}
You'll find an example here: http://jsfiddle.net/bRg6m/
Is this what you want?
Added: Note that this doesn't work in IE7 or older. You'll have to use a Javascript solution if you want to support those browsers.

I'm not sure I understand your question.
I made an example here where the upper div is changing its width depending on the lower divs size. Is that what you needed?
http://jsfiddle.net/8fwXR/
HTML
<div id="wrapper">
<div id="box1"></div>
<div id="box2"></div>
</div>
CSS
#wrapper {
float: left;
}
#box1 {
background: red;
height: 100px;
width: 100%;
}
#box2 {
background: green;
height: 100px;
width: 400px;
}

Possibly this is what I meant:
document.getElementById("upperDiv").style.width = document.getElementById("bottomDiv").style.width

Really depends on your setup. The easiest way by far would be to just apply the javascript code to both DIVs at the same time.
Setting the width of the first DIV to be 100% should cause it to resize the width to match the second DIV (as the resize will force the parent DIV to increase in width too), but you will have a problem when trying to get the height to match, as with pure CSS the first DIV will have no reference to recalculate its own height to match.
Example Here
Alternatively, instead of making the second DIV resize you could resize the parent DIV and have both children set with CSS as follows:
width:100%;
height:50%;

Can the content remain centered while the screen size changes?

First, here's is my rough example: http://demindu.com/sandbox/simple.html
What I'm trying to do:
Create a content div: let's say 400px tall and 700px wide, like the example. The content box has a margin of 50px in each direction. The content div should always be centered both vertically and horizontally, regardless of screen resolution. The black background should extend from the centered content area all the way to the right side of the screen, but not to the left.
The only way I can think of possibly doing this is something using window.innerWidth & window.innerHeight in JavaScript, but I don't know enough to know if this is even possible.
The amount of blank space above and below the middle section would need to be:
window.innerHeight - height of the div (in this example: 500px [400px box with two 50px margins]) / 2
The blank space to the left of the black bar would need to be:
window.innerWidth - width of the div (in this example: 800px [700px box with two 50px margins]) / 2
My question to you is: Is this possible in JavaScript? Is this possible somehow with pure CSS?

You can do this entirely in CSS with 4-point absolute positioning. You will need two elements:
The first item spans from the right of the screen to the center where the content is positioned. This element uses absolute positioning for the top, left, and right coordinates of the element (we can leave bottom unspecified as it's taken care of by the height.)
The second item is nested in the former. This item has a fixed width to ensure the content itself remains in the specified width you've chosen. We can also set the height and padding on this object and the parent will inherit it's height. Don't use margins to simulate padding - it can cause cross browser issues when you're just trying to do some positioning tricks as we are here.
So your HTML code would look something like this:
<div id="my_centered_design">
<div id="my_centered_design_content">
<p>This is just some example text.</p>
</div>
</div>
And you're CSS would look like this:
div#my_centered_design {
background: #000;
margin-left: -400px;
margin-top: -250px;
left: 50%;
position: absolute;
right: 0;
top: 50%;
}
div#my_centered_design_content {
background: #333;
height: 400px;
/* I think you actually want padding for
the effect you're trying to accomplish */
padding: 50px;
width: 700px;
}
Essentially this is the same trick as the Joe2Tutorial except we are applying additional positioning rules to adhere the centered element to the right side of the screen.

I think this pure css solution would suit you best: http://www.joe2torials.com/view_tutorial.php?view=37

A very quick google resulted in this piece of code.
this code does not align a div in the middle. what you actually for your own website is that you put the following div css
.main {
width: 140px;background-color: #252525; float: left;margin-top: 25px; }
inside a table that is aligned to be centered. so, basically you're using the table's centering feature to center your left floated div simply as a content. you're not doing anything through div or css for that matter. the piece of css code you offered doesn't not anything about centering a div in the middle.