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/
Related
I have been trying so many different solutions to solve this problem without reaching any solution that actually works so I cant post any css (since its not working properly, so I dont even know if its the correct "way" to build further on anyway).
Case: One div with width 100% (its parent varies in size) with two children inside. The div should never exceed hight of one text line/ text row.
<div class="parent">
<div class="child">Text from left</div>
<div class="child">Text from right</div>
</div>
Goal: Make the children divs auto adjust to fit as much text as possible (on that one row) and if the childrens width together exceed its parent div width then hide the overflowing text in second child with ellipsis.
Is this possible with pure CSS? With script I sort it but not with only CSS.
Thanks (sorry for bad english).
So I have 2 divs
currently
div#1 is {float:left; width:48%} and contains some gallery doodad
div#2 is {float:right; width:48%} and contains a stack of buttons
after that, within the same container a bunch of other divs and plaintext follows.
So what I would like to do is have div#1 keep doing its automatic height thing but I want div#2 height to equal div#1 so I could vertically stretch out the buttons inside.
I have no access to the structure (buried somewhere deep in the php framework) and all I got is CSS. Is this possible within my current constraints?
Apply
display: flex;
to the surrounding container, then
float: none;
to div#1and div#2.
Note: This is only a viable solution if there is a parent container that does only contain these two div.
Learn more about flex.
Without seeing it's hard to say for sure, but I would think that if div#1 and div#2 both had height:100%, then when div#1 "grows" from content, so will the parent div, and because both child divs (1 & 2) are 100% height of the parent, both should grow equally.
For browsers that support CSS3.
Set a parent DIV:
<div id="parent">
<div id="child_1"></div>
<div id="child_2></div>
</div>
Then in CSS set #parent_DIV to display as table (display:table). Each child DIV set to display:table-cell.
In this case the higher div will set the rule.
Add borders to each (including parent) for trial and test it out.
I have pulled this from the head but generally that will work, including newer IE browsers.
Here it's in more details:
http://www.brenkoweb.com/tutorials/css/css-visual-formatting-model/display-property.php
And soon hopefully more examples will folow.
I have an html page. This page has the following structure:
<body>
<div id="div1">....</div>
<div id="div2">
<table>...</table>
</div>
<div id="div3">....</div>
</body>
The div are one beneath the other,they have a border, and their's width are the same.
User can grow the columns of the table, which is inside the div2. In this situation the width of the div1 resized (border grows).
However the other divs' width remain the same.
How i can make them follow the width of the div2?
div 1 and 3' width is not dependant of div 2 as they are their own boxes, you have to link the boxes somehow (all three are part of body, but body may be bigger than your table at all times so linking their width to body may not work on certain browsers/versions)
Without javascript: create a bigger div that contains div1, 2 and 3, set the width of the other divs to that of the bigger div using CSS, whenever the table grows/shrinks div 2 will grow/shrink and push the boundaries of its parent div. Because div 1 and 3 copy their width from the bigger one, they will grow/shrink as well.
With javascript: Just set the width of the other divs whenever you modify the table's, tables can't be resized usually so you must be using some javascript there
In all cases, research CSS because that's what you will be changing.
I have this:
http://jsfiddle.net/UHrLH/1/
I set the height on the box element to auto, but min-height is 200px;
Now if i try to make more content in the first box, the height expands but it creates a big white space under it. I do not want that, i want to have the box under eachother like you can see above, where the height on all boxes is 200px
See the issue here:
http://jsfiddle.net/UHrLH/2/
http://jsfiddle.net/chricholson/UHrLH/10/
This will give you boxes inline but unfortunately the pairs will not extend to match the height of it's partner. To do this you will need to use tables or a javscript overwrite to capture the height. Also, bear in mind display: inline-block will not work on divs in IE7 and below, it would work on a span though: http://www.quirksmode.org/css/display.html#t03
http://jsfiddle.net/UHrLH/11/
I have added an additional div if that is ok for you...
<div class="box_Container">
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.