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
Related
I am designing table less website using div elements and i have many floated left and right div elements inside parent div element.
Now, I am using another div element to fix parent div height automatically:
<div style="clear:both"></div>
But, I came to know following works in same way:
<div style="overflow:hidden">
<div style="float:left">...</div>
<div style="float:right">...</div>
</div>
And , i tried, it works and which reduces the Number of DOM Elements as well.
But I don't whether it is cross-browser or not.
Which method is effective and cross-browser?
overflow:hidden makes the element establish a new block formatting context. This fixes the float containment of any children floating within it. This CSS fix is more practical then including an additional element in the HTML styled with clear:both and works on all modern browsers, including IE7+.
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.
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
The following code:
<div>
<img src="" style="float: left;">
<p>Lorem Ipsum...</p>
</div>
Renders a div container with text, and a floated image on the left. Great. The text included therein also expands the div as much as it can while maintaining the text in a single line (unless otherwise writ). However, with a floated image, the width of the div container does not expand as much as it can, and prematurely line-breaks the text based on the width of the image.
That is, if the floated image is 200 pixels wide, "200 pixels" of text on the right end of the div will all be bumped to the next line. It's as though the DIV container doesn't see the extra text, and sets the dynamic div width too short!
... which, I do realize, is by design, simply because the image is "floated", and is not a block/inline element. (At least, I think I worded that correctly...?)
So, how can I achieve what I want without resorting to (ick...) tables?
Floated elements are removed from the flow of the page and will not cause the enclosing elements to expand.
Take a look here. That tutorial talks about enclosing floated elements by using the overflow property.
Float the wrapping div to the left as well and it'll wrap the content correctly:
<div style="float: left;">
<img src="" style="float: left;">
<p>Lorem Ipsum...</p>
</div>
This is not a perfect solution as floating the wrapping div has obvious side-effects, but it's a sure-fire way of ensuring that a div wraps floated content correctly.
If floating the div gives you any problems you can wrap it in another div which should resolve the issue.
Fails cause float:left requires explicity width
There is a number of things that can be going on here. When I put your code inside of the body tags of a HTML page with no other code it works fine. This could be because of your page type definition. Mine is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
It also could be because you have a containing that is forcing this div to become shorter. The only way to be sure you solved the issue is to force your area to be of a specific width by setting it's width style. Changing the Div tag your code is in to have a style of float:left most likely does not solve your problem. I checked it just to be sure myself and it didn't produce the results you desired.
Aside from floating the containing div, you can also add a "width: 100%; overflow: hidden;" style to the containing div. This will force it to expand to contain the floated div. See here for more discussion.
You should also make sure that the element displays as block:
img#my_element {display:block;}