I have been banging my head against this for a while, and I'm stumped (and probably missing something obvious). I have a page with an absolute positioned div, and inside the absolute positioned div, there are two content divs that are floated left. The height of the left content div is 1200px (based on the content inside of it). I would like the right div to be the same height as the div to its left, but I cannot get this to occur. The height of the right div is the same as the height of its parent (the absolute positioned div) which is 530px. If I go up the chain, the body, and html are both 530px as well (they are both said to height: 100%). I placed a div with clear both at the end of the absolute positioned div containing the two floated divs, and nothing.
This has been driving me crazy. I'll include a little HTML just to illustrate what's going on:
<html>
<head></head>
<body> <---- height 100%
<div id="container">
<div id="header">
</div>
<div id="content"> <--- Absolute div, height 100%
<div id="left-column"><---- float left
</div>
<div id="right-column><---- float left
</div>
<div class="clear"></div> <--- cleared div
</div>
</div>
</body>
</html>
I think your real question is
I would like the right div to be the same height as the div to its left
right?
If so, you can find the solution here: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
Related
I have a right-floated, fluid-width div that sits nicely next to a another fluid-width, NON-floated column.
Everything works fine until I put another fluid-width div into that right-floated column, at which point it expands to 100% and drops the non-floated column below it. The only thing I can do to fix this is give the div causing the issue a fixed pixel width, but I don't want to do this as it needs to expand to its parent float but not beyond that. Here's an example of the problem:
<div style="overflow:hidden;width:800px;">
<div style="min-width:600px;min-height:200px;float:right;background:#FAA;">
<div id="floatContent" style="max-width:88%;">Here's some long string of text that makes the width of the parent float expand out to 100% of *its* parent, rather than shrinking the content to its original width (100% minus the width of the non-floated element</div>
</div>
<div style="min-width:200px;min-height:200px;background:#CCC;">Some non-floated content</div>
</div>
Any ideas? Thanks very much.
JSFiddle link
I have a problem I can't seem to fix.
I have a big background banner which is set to position: absolute problem is, I want my footer to constantly be underneath it - no matter what height the banner has.
An example:
Footer looks fine: http://danne-bro.com.web122.curanetserver.dk/histor.aspx
Footer NOT-fine: http://danne-bro.com.web122.curanetserver.dk/who.aspx
I have tried many many things as you can see in the sourcecode. A scraped version of what I'm trying to accomplish would be something like this:
<div id="fit">
<div class="wrapper">
<div id="banner">BANNER IN HERE - Position Absolute so its always underneath</div>
</div>
<div class="wrapper">
All content goes here - which is on top of the banner
</div>
</div>
<div id="footer">
Footer in here - should float right under the banner.
</div>
But exactly how I make the footer stay under the banner (no matter it's height) is a problem for me. I hope I explained myself well enough.
You cannot float an absolute positioned element, because when you use position: absolute; your element gets out of the document flow, you need to use top, left, right, bottom to position it, floats wont work on absolute, more or less you can do is use an absolute positioned div inside a position: relative; container, or instead try using ryan fait's sticky footer
I have a container with several floated divs within it. I want the div to stretch to the full height of it's content.
I have tried adding overflow:visible to the container to make it expand and also added a clear but neither seem to work.
Live site link available here
You need to put something not floated in the div and clear that.
<div class="magical-div>
<div class="float1"> content </div>
<div class="float2"> content </div>
<div style="display:block;clear:both;"> </div>
</div>
HI, can someone please help me with this. I have:
<html>
<body>
<div style="width=100%">
<div style="float:left; background-color:Red; height:100px">Red</div>
<div style="background-color:Green;">Green</div>
<div style="background-color:Yellow;">Yellow</div>
</div>
</body>
</html>
Which gives me exactly what I want, a Red div on the left with a Green div beside it taking up the rest of the width with a Yellow div beside the Red but below the Green div.
However the parent div actually has to also float left ie.
<html>
<body>
<div style="width=100%; float:left">
<div style="float:left; background-color:Red; height:100px">Red</div>
<div style="background-color:Green;">Green</div>
<div style="background-color:Yellow;">Yellow</div>
</div>
</body>
</html>
This breaks it. Is there a way to get it working again with the parent div float left?
if you float the parent div, in order to keep them all in the parent container, you must also float them all. Those inside without float will fall out.
Edit: Note though that once you float them, width:100% means nothing anymore since the element don't know what to align 100% width with. Might have to give it some fixed width, or use JQuery to get width from document.
http://jsfiddle.net/robx/cpFUV/
It breaks it because a div is normally set to have a width of 100% it's parent container. Setting float:left makes the width set to the content's width. Set a width on your parent container and it should fix it.
You wrote width=100% instead of width:100% - fixed example:
<html>
<body>
<div style="float:left;width:100%;">
<div style="float:left; background-color:Red; height:100px;">Red</div>
<div style="background-color:Green;">Green</div>
<div style="background-color:Yellow;">Yellow</div>
</div>
</body>
</html>
The reason it worked originally, is that there is an implicit width of 100% on block elements, but you made your div an inline element (of sorts) by adding the float (such that the width of the div reverted back to the content's width, just as your Red div works).
Your width=100% was always ignored, so by putting the width:100% as it should be, you are specifying a width for the element and all is well.
Example: http://jsfiddle.net/hwb4w/
I have a few floating div elements that are floating left. They all have a height of 100%. One of the divs exceeds the height of the view port and the other DIVs do not resize to 100% of the parent DIV which has a position of relative set (which is how it should work in my oppinion).
Except the display table, table-row, table-cell solution, is there any other way of making all divs 100% of the viewport and if one needs to be higher, make the others stretch to 100% of the parent div that got stretched by the increased div.
How? :)
Thank you.
Correct me if I'm wrong but it seems that you want equal height floated columns. The explanation to this can be quite involved so I'll point you to a few examples.
Try
http://thelucid.com/2010/12/03/the-solution-to-fluid-inconsistencies-and-equal-height-columns/
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
I don't follow your question completely. Have a look at this code:
<html>
<body>
<div style="height:50px;position:relative">
<div style="background-color:red; float:right; height:100%">moo</div>
<div style="background-color:green; float:right; height:100%">boo<br/>coo<br/>doo<br/>goo<br/>boo<br/>coo<br/>doo<br/>goo</div>
<div style="background-color:blue; float:right; height:100%">foo</div>
</div>
</body>
</html>
As you can see, the center DIV is has height of more than 50px, so the the outer DIV (with the relative position") is stretched, along with the other inner-DIVs.
Doesn't this work for you?