As of now I have div A inside of div B, and A's height is set to 100% because I want it to cover everything from the start of it to the bottom of its parent div.
However, having its height set to 100% doesn't perform the way I was hoping (that it would simply span all the way from its starting point to the bottom of its parent), instead it sets its height to exactly match its parent div. Since div A starts a few hundred pixels down inside div B, this causes div A to overflow an extra few hundred pixels below div B.
Example below:
The real trick is that div B needs to be able to expand vertically depending on its content, while div A continues to fill the area from its vertical start to the bottom of its parent.
Is there some other method to consider? I understand that I could use the calc unit, however, calc doesn't work on safari up until safari 6, and that would rule out a lot of mobile devices.
I might be misunderstanding what you're trying to achieve here but wouldn't a
overflow:hidden;
on the Div B work out?
Related
So you have a set of inline divs. Their width is hard coded but the content inside can be changed meaning the height of the divs are different.
Is there any way to enure that all divs remain the same height, without having the danger of content spilling out its parent div?
I've tried inheriting min-height but it seems that this is not dynamic. So if the parent div has a min-height set to 320px and the sibling divs are inheriting this value, if any sibling were to become higher than 320 because of content, it and the parent div will change, but the other siblings will stay at 320.
Is there any way around this without the use of anything other than css?
Simply make use of CSS' table display.
Take the following example markup:
<div>
<figure>Example one</figure>
<figure>This is example twooooo</figure>
<figure>3</figure>
</div>
If you want all three figure elements to remain a constant height whilst ensuring they never escape outside the boundaries of the div container, simply:
div {
display:table;
}
div > figure {
display:table-cell;
}
All three figure elements will now remain the same height - the height of the element with the most content or the min-height of the containing divider, whichever is greater.
Here's a JSFiddle example showing this in action. Notice how I've given the div a grey background colour and that the figure elements never escape outside the boundary.
For browser support, see: http://caniuse.com/#feat=css-table
I encountered a problem and didn't find a solution for this. I'm pretty confused because I thought this was a very simple requirement.
There are the following elements:
a surrounding div#wrapper
div#A, floating left and fixed width
div#B, floating left (right of #A) and dynamic width
Inside of div#B there are plenty of images, floating left and fixed width (and height).
Depending on the screen resolution there should be 1, 2, 3, n columns of images on the right part of the screen (next to div#A). Instead of this, container #B is aligned below container #A and uses the full window width.
My alternative attempt was giving #B a float:right and a margin-left (which was greater than the width of #A), but that also didn't work.
I would like to avoid absolute positioning because the height of the surrounding wrapper should increase with its content.
To visualize what I'm talking about, I made the following diagram:
http://abload.de/img/rezeptbilder1k8lsr.png
Many thanks in advance!
this is happening because..you are having dynamic width for your div#B...ans as there are plenty of images and they are aligned next to each other...so eventually div#B grows to 100% width...when it has 100% width then it arrives under the div#A.because 100% + div#A's width cant fit together in a 100% wide screen..you understand???
1st solution :: you may use width:calc(100% - div#a's width).it will give div#b a width equals to remaining free space besides div#a
or you may use overflow:hidden in your div#B...now at first this div will grow eventually to take the width of remaining free space with a single row of images and once it has 100% width it will create another row of images..but for this your wrapper must have fixed with with **overflow:auto;** also..overflow:auto; in wrapper will introduce scroll bar when combined with of div A and B is greater than 100%
EDIT :: CHECK BROWSER SUPPORTS FOR CALC() HERE
note::if you provide us your try our suggestion will be more appropriate
I can't really provide a solution because you haven't provided any code. (please do so)
That said... Based on your description and your image, your floats on div#A and div#B are breaking. The most common reason for this is that your width is adding up to be more than 100% of the width of your div#wrapper (the containing or parent element of the floated elements)
Your floats should always end up equally 100% (less than 100% works but then you have some extra space somewhere etc).
For example... If you have #wrapper which is 100px wide, then you can have two div's inside which are 50px and 50px wide, or 30px and 70px etc. as adding those values = 100px which is 100%.
So... Why is yours breaking? I suspect it is because you are trrying to mix a dynamic width element, with a static width element. Float was never designed do something like this. There are various ways to achieve it, but which way depends on your code which I don't have.
Other possible reasons why is is breaking is because of too much margin space, too much padding, or even a border on your divs. The width of an element, by default includes it's padding, margin, and border widths. If you have a 100px wide div, with 10px of padding on the left and right and a 2 px border the whole way around (2px on each side). Then you have a div with a total width of 124px.
I have the problem that a div is not scaling over the full page when the page is not fully seen, i.e. scroll bars appear at the bottom.
Scales fine:
Does not scale fine when seen part is too small:
How can this be fixed? Here's the fiddle: http://jsfiddle.net/gdztn/29/
Clarification: The inner div must always be 800 px wide while the outter div should scale over the whole width of the page. As you can see in the second image, the outter div does not reach the right end of the page when scrollbars appear.
Thanks!
the problem is that the #head width is 100% and the inner div has a fixed width. if you scale the page down, it's still 100% but smaller than the inner div. it's like having a smaller container and an exceedingly bigger content which overflows.
to address this problem, you should set min-width of the #head to keep it from shrinking smaller than the inner div, like min-width: 850px
http://jsfiddle.net/gdztn/43/
EDIT: also remove position:absolute from #head. if actually needed to be absolute, then add width:100%
To summarize, I'm trying to get a "resizable page" both in the height and in the width of the window. I've two fixed blocs too. One on the top of the page and an other on the left (like the Flow app for example).
As you can see there, I'm trying to make the yellow part of the screen resizable (css only) but I get some trouble with the height part. The scrolling zone is always counting the height of the top bloc (the red one).
Is there a way to make it javascript free?
The div with id="container" has a height of 100%. This means 100% of the containing id='wrapper' div. One possible solution is to make the heights:
red part: 10% of the total height
blue+yellow (i.e. the "wrapper" div): 90% height
This would mean the "container" wrapper should nicely fill up those 90%.
Edit: only drawback would be that the red part is no longer a fixed hight pixel-wise.
I have 2 divs...each are float left, and each have a "width".
When I resize my browser, the right div goes down to the bottom of the left div. Why? I'd like it so that during resize, it stays there.
There are a lot of solutions to this. A solution that preserves your existing float layout:
Enclose those two div's in a parent div where the width is set wide enough to hold both those divs.
They are "wrapping" because you marked them as floated elements and when their parent container becomes too small to put them on the same "line", the second one pops below, just like text, etc.
You are likely making the browser width too small for both floated divs to be side by side.
One way to prevent this is to wrap them in a larger semantic div that has a fixed or min-width. Or, simply give the body itself a min-width. Min-width is not supported in IE 6, just set the width for IE6 and it will treat it as min-width.
Give Width as "50%"