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
Related
I'm trying to achieve a layout where there is a div with a max height, and inside that, there are two divs. One div (the footer), has a fixed height (55px). The other is a scrollable div where the height will increase/decrease according to it's content.
<div class="parent">
<div class="wrapper">
<div class="panel">
Scrollable Div
</div>
<div class="fixed">
Fixed footer
</div>
</div>
</div>
The scrollable div height should always fit it's content. But when the max height is exceeded (.wrapper has a max-height of 300px), it should only take up the remaining space minus the footer height without affecting the footer's position.
But what I achieved of this layout is not according to my requirement.
In my example, when content gets added into the scrollable div, the footer gets pushed out of the wrapper. What should happen is the footer to remain at the bottom of the wrapper (without getting cut off), and the scrollable div to span its height upwards.
Please note I'm trying NOT to use position: fixed or absolute.
This is for a mobile app so fixed positions causes a lot of bugs.
Here is the JS Fiddle of what I have so far,
fiddle
set the max-height:300px to the .panel div instead
JS Fiddle here
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
I have a problem. I have (simplified) this code:
<div class="page">
<div class="leftcolumn">content</div>
<div class="midcolumn">some text
<div class="midcolumn content">more text</div></div>
<div class="rightcolumn">a nice widget, or so</div>
</div>
left, mid and right column are just floated and have apdative (=%) widths, and that works fine. Unfortunately, the height of the three columns are right, they are just the height of the content that's in them. Unfortunately, the div page gets a height of 1px, even while columns in it are way bigger. How do I get the page div to get the same height of the columns. For example, if the largest of the three columns has a height of 1000px, I want the div page to get a height of 1000px. Can anyone tell me how I should do that?
Add overflow:auto to your page div.
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?
<div style="float:left; width:50%;">
div 1
<div style="position:absolute; width:105%">nested element</div>
</div>
<div style="float:left; width:50%;">
div 2
</div
If an element exceeds the width of its floated parent element, the next element is pushed down unless I apply overflow:hidden on both floated elements, which defeats the purpose because I DO NOT want to hide the overflowing content. Is there any fix for it?
You have to make sure the content inside is not wider than the divs to stop the elements being pushed down in this scenario.
You could perhaps put margin-right: -5% on the positioned div to make it's width narrower in the document flow, but it should still display at 105% wide once rendered.
Set it to 100%, not 105% - otherwise, it is simply doing what you told it to do.