what I am trying to accomplish is the following:
<div>
<div class="img"><img src=""></div>
<div class="img"><img src=""></div>
<div class="img"><img src=""></div>
</div>
the divs containing the images will be used in a slideshow so they need to be positioned one on top of the other, with the first one showing and the others hidden.
When I set position:absolute to the divs though, the external div's height shrinks and destroys the whole layout. Any tips on how to to fix that?
EDIT: HTML structure is not negotiable.
Ended up setting the div's height with JQuery according to it's content. Just needed to add one line of code in the loop. Case closed.
I think your approach is wrong, the way to do this is not to have the divs stacked on top of each other with absolute positioning. Set the css on the last two divs to display:none. When you want to move to the next image, set the image as display:block. (example shown uses JQuery)
$("div#image2").show();
and then hide the other two
$("div#image2").siblings().hide();
You'll need to add an id attribute so you can uniquely select your images.
Related
Here is my HTML structure:
<li>
<div class='wrapper'>
<div class='controller'> ... </div>
<div class='preview'> ... </div>
</div>
</li>
The content in the 'controller' and 'preview' divs can vary, and thus so can the height of the content. There isn't necessary a correlation between the heights of the 'controller' and 'preview' divs. In a given wrapper one might be 10px high while the other one is 100px high. I want the smaller one to expand to match the height of the smaller one. Using a css rule of "height: 100%;" doesn't work because there's no explicit height set to the wrapper, and again i can't set a height to the wrapper, because the content inside of it can vary.
I am looking for a solution in css not javascript. My company has a strict policy of writing for browsers that don't have javascript enabled.
Using 100% height for a div will only take up as much as the content of the div needs. You will have
to explicitly set the height.
You can do this by using some javascript:
var height = document.getElementById('parentDiv').style.height;
document.getElementById('childDiv').style.height = height +'px';
It could be set with a script or when you don't want to use JS you could use the faux columns technique:
http://www.alistapart.com/articles/fauxcolumns/
Assuming the two divs are next to eachother (using a float or whatever), this is a very common problem in HTML that still doesn't have a native solution.
One method to solve this is the faux columns, but this has it's limitations: usually a very wide border is used to fake the background color of the smaller div, so you can only use a solid color.
If you really need the height to be the same (for reasons of using the same borders on both divs, background images, or even positioned elements inside the divs that both need to be in the bottom of the div) you'll have to use a javascript solution.
I am having cross-browser trouble with a DIV layout on the following page:
www.richmindonline.com/index2.html
I have created a border around both the divs to make it easy to identify.
It appears that IE9 is nesting the inner DIV correctly within the outer DIV, whereas Firefox is separating the divs differently. I am using a "cheat" tag in order to align the divs to center, but I test without those tags and the browsers still render them differently.
The divs in question are located under my comment line:
I know you guys are smart, and I'm looking for your help! Thanks, Rob
You need to clear floated divs by adding something like: <br clear="all"/> or <div style="clear:both; height:0;"></div> and add a width to the parent div, this should fix it.
More info: A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.
e.g.
<div class="parent">
<div style="float:left"></div>
<div style="float:left"></div>
<div style="float:left"></div>
<br clear="all"/>
</div>
For more information: http://quirksmode.org/css/clearing.html
I've got 2 divs side by side. One has a fixed with of 150px (sidebar) and one adjusts to the remaining with of the parent div.
<div style="margin:0 20%">
<div style="float:left;width:150px">
Sidebar contents
</div>
<div style="vertical-align:top">
Main contents
</div>
</div>
When the contents of the "main" div exceed the remaining width, it's expanded and pushed down under the sidebar. How can I stop this without defining a set width for this div (since it's meant to adjust to the parent width)?
margin-left:150px for the second div? or use padding-left:150px for aligning content
http://jsfiddle.net/5TYm2/ here is a working example of something I believe you're looking for.
This is a pretty common way to go about separating content within a wrapping div.
Hope this helps.
I have a similar problem as CSS Auto Margin pushing down other elements: A right floating sidebar gets pushed down below the main non-floating content div. The answer proposed works: just reverse the order of the markup and write out the float div before the non-float div.
For example, this:
<div class="container">
<div id="non-floating-content">
fooburg content
</div>
<div id="float-right">
test right
</div>
</div>
needs to be awkwardly re-ordered as:
<div class="container">
<div id="float-right">
test right
</div>
<div id="non-floating-content">
fooburg content
</div>
</div>
So then, why does this also work without reordering: Elastic layout with max-width and min-width using grid based design?
Check out the live demo. The ordering of the markup is still sensible: the float div is written out after the non-float div. Yet the float doesn't get pushed down on the page.
I ask because I would prefer not to have to hack the theme PHP (to reorder divs) in order to properly style it.
Other posts that also say the solution is to "re-order your divs":
2 column div layout: right column with fixed width, left fluid
Semi Fluid Layout CSS/Html
The reason this works is because your containing element has no height. When you have nothing but floated elements inside a containing element, it will collapse to 0 height. If you were, for example, to add overflow: hidden; to #fluidColumnContainer, it would act as a clear-fix, expanding the container to contain the floated elements. Then you would see the right-floated element drop down again.
the reason the one you linked works is because the other columns are also floated
I've got a two column layout like this:
<div>
<div id='left'></div>
<div id='right'></div>
</div>
When the contents of the left div are that of a flash object with dimensions that exceed the left column's width, the right column no longer floats to the right properly in ie6. It falls underneath the left div. All other browsers (of course) are fine.
the css property
overflow:hidden
will solve this problem. It will just not show any image, text, ect that goes outside the div.
Do you need something like overflow: hidden?