I have the following code in this fiddle , I want the height of the profile_window_content to be more than the height of the image in jcrop-tracker.Height of div is set to auto , then why it is not greater than image height. Please help.
Floated content is supposed to fall out of the bottom of containers.
Set overflow to hidden if you want to cause containers to wrap floated elements anyway.
Related
I'm hoping I can use flexbox to solve a div stacking problem.
I have one container div. Its height is 100vh.
Inside that div, I have two divs.
One, contains an image. Its height is dependent on the size of image, which grows proportional to browser width up to a max-width.
A second div is on top of the first div. I want its height to be equal to the remaining height of the div.
Can flexbox compute this for me automatically? Hoping so.
The answer is yes. Try appying flex: 1 to the second div. That tells it to stretch to fill the remaining space in the container.
Here's an illustration of the effect: DEMO
I have a div, .instagram_grid which has margin-left and margin-right set to auto, is relatively positioned, and has a width which for browse sizes 900px >makes the div be centered nicely in the page.
when I have the simple structure in the context of the rest of the CSS for a single page, the no longer becomes centered at browser width >1684px. In the Fiddle that follows I only have two lines that modify the div as a whole (and one just sets the background to pink). There are no media queries present, which suggests that it is the effect of some unseen preceding div/element causing the behavior.
https://jsfiddle.net/ebbnormal/m561tpnL/6/
The behaviour is what is expected with that markup.
The element is centered, but then you use relative positioning to show it 500px to the right of where it actually would be.
The .calc-text div above the .instagram_grid div causes its parent to overflow by setting margin-left:auto while simultaneously setting left: to a negative value, which isn't valid CSS.
I encountered a problem about float style. Like the html code below:
...
<body>
<div style="float:left;width:25%;height:100px;background-color:red;"></div>
<div style="float:left;width:74%;height:100px;border:1px solid black;">
<div style="width:1000px;height:50px;background-color:yellow;"></div>
<div style="clear:both;"></div>
</div>
</body>
...
The effect is that the content in the 2th float div overflow.
Yellow div is in the float div, but its width exceeds its parent's.
I want to know how to set the css style to make the 2th float div can suite its child element's width/height automatically?
I know clear style can clear the float of divs listed by order, but how to handle it when it contains a larger child?
I don't want to use js to modify parent div's width.
You can achieve this by using min-height and min-width. This way the parent will always fit the children's height and width when they are bigger.
Check it out here.
By removing width and height property (or setting min-heigh and min-width property as Stephan mentioned you will made parent div to stretch over child.
http://jsfiddle.net/5ohtx2nc/1/
This however cause that if they are wider than screen second floated div will move to next row
http://jsfiddle.net/5ohtx2nc/
If you insist on having two divs one next to another you will need to do some tricks like in How to position two divs side by side where the second width is 100%?
http://jsfiddle.net/5ohtx2nc/3/
At the moment I have a large <div> that I'd like to add a bottom margin to, to push it up from the bottom of the page. However this currently has no effect because its parent, the <body> tag, is smaller than it, as you can see here:
The body tag is highlighted in blue and brown, but you can see my div (the white border) extending below it.
However if I apply the trick of setting the <body> and <html> tags to height: auto and min-height:100% to make sure they fill the entire page, all of my inner content loses its size, because they all use percentage heights and no longer have a parent with a fixed height.
How can you use percentage heights if the parent tag has a height of auto?
I'm afraid you can't do this. A percentage height on an element only works if the parent element has a specific height. See also: CSS – why doesn’t percentage height work?
http://dev.epicwebdesign.ca/korokriver/
It's been a long night. I'm having issues the grey metallic div on this page. I want the height to be 100% of the content. When I set it, it is set as 100% of the window height and falls all over the bottom of the page.
I have set 100% height on html, body, and every div leading to this one (site, copy, content, metals)
I should clarify, I explained that badly.
I want the grey child div to be the height of the site, and the height of the parent div. Not the height of it's content.
It's also happening with the other pages, though a different div.
http://dev.epicwebdesign.ca/korokriver/?page=geologicalconsultants
You could add overflow:hidden on #content. That should do it.
If you just want the div to wrap to its contents:
Remove height:100%; this is currently setting it to be 100% of the window.
By default divs wrap to their content unless floating child elements are not cleared properly, so there should be no need to set a height.
You could use jQuery to set the height of the child to the height of the parent like so.
$('#child').height($('#parent').height());
http://jsfiddle.net/ZXc3P/