consider the following code:
<div id="p1" style="position: absolute">
<div id="p2" style="position: absolute">
<div id="c" style="max-width: 120px">
This text should wrap when exceed 120px
</div>
</div>
</div>
Don't ask me why both #p1 and #p2 need an absolute position, they are part of a legacy component I can't change.
I expect #c to grow with the text until it reaches the max-width of 120px. However, how you can see in the example, the text breaks at every word.
This behavior appears only if I have 2 nested parent divs with position absolute. I tried to play with properties such as white-space and word-wrap with no success.
I'm really interested in finding out why such behavior occur. Does anybody has an answer?
Absolute positioned elements need width and height settings, otherwise they don't expand. Try to add some settings, for example this:
#p1, #p2 {
width: 400px;
height: 300px;
}
<div id="p1" style="position: absolute">
<div id="p2" style="position: absolute">
<div id="c" style="max-width: 120px">
This text should wrap when exceed 120px
</div>
</div>
</div>
Related
I have to show 2 adjacent boxes, both have a dynamic content (rendered using angular). The Container must have the height of Box1. Box2s heigth may vary due to the dynamicity and it should not be higher as Box1. If higher a scroll should be shown.
I started with the following code using tables:
<table id="Container">
<tr>
<td valign="top" id="Box1">
<dynamic rendered html code/>
<td>
<td> <td>
<td valign="top" style="position: relative; id="Box2">
<div style="position: absolute; top:0; bottom:0; overflow-x: hidden">
<dynamic rendered html code/>
</div>
<td>
</tr>
</table>
Unfortunately it does not work in IE, since (as I'v read on the web) position is not defined for tables (not HTML standard);
So I decided to switch to divs:
<div id="Container">
<div style="display: inline-block; vertical-align:top" id="Box1">
<dynamic rendered html code/>
<div>
<div style="display: inline-block;"> <div>
<div style="display: inline-block; vertical-align:top" id="Box2">
<dynamic rendered html code/>
<div>
</div>
Box1 should always wrap its content. Box2 should not be heigher than Box1, IF then scroll overflow.
Is it possible in CSS? No JQuery and no Javascript.
I believe you want #Box2's height equal to #Box1's height.
There is no way to align there height within the same parent. Therefore, I suggest you to wrap #Box2 with #Box1 like below.
<div id="Box1">
<div id="Box2">
</div>
</div>
And that you can set max-height: 100%; to #Box2 so that the maximum height of #Box2 will not be larger than #Box1.
Adding overflow-x: auto; to #Box2 can show scrollbar automatically when text overflow.
https://codepen.io/blackcityhenry/pen/LMVoZd
so I checked other posts, but no answers helped me. So I have an image inside a div. I put a specific height/width size of the div to show the ratio of the div, and the image inside is higher, so it always goes outside of the div.
I want to make the image smaller so that it is vertically as high as the div, and the width would adjust accordingly. Can anyone help??
<div class="intro-pic" style="height: 343px; ; width: 614px; overflow: hidden
;">
<div>
<img src="http://i.imgur.com/IMDdLW9.png" title="user engagement" style="width: 100%;" />
</div>
</div>
Try this:
<div class="intro-pic" style="height: 343px; ; width: 614px; overflow: hidden
;">
<img src="http://i.imgur.com/IMDdLW9.png" title="user engagement" style="height: 100%;">
</div>
the extra div is also preventing the img to use its parent's css properties. It is unnecessary.
http://jsfiddle.net/2q94nfq6/1/
<div class="intro-pic" style="height: 343px; ; width: 614px; overflow: hidden
;">
<img src="http://i.imgur.com/IMDdLW9.png" title="user engagement" style="height: 100%;width: 100%;" />
</div>
If you are defining your div in pixels then you should use max-width property of css under style. The max-width property is used to set the maximum width of a given element.
I'm trying to overlay two elements on top of each other:
<div style="position: relative;">
<input style="position: absolute; top: 0px; left: 0px">
<div style="position: absolute; top: 3px; left: 3px;">
XXXX-XX-XXX
</div>
</div>
So far so good... the two elements overlay fine, and this will work regardless of where on the page the DIV goes in the flow. But then I go to add the next element to the page:
<div>
PART 2 GOES HERE ABCDEFG
</div>
Uh oh, we have a problem! The next element gets placed under the previous one. How do I get subsequent content back into the normal static flow? The rest of the content can't have to know about this special element, i.e. if the element with the overlay is inserted anywhere in the document it should behave the same as if it was a single element of the same size.
Here's the Fiddle demonstrating the problem.
As #Santi points out, the content of absolutely positioned elements does not actually contribute to setting the height of the element. But, instead of setting a specific value for height (which may not be correct for all viewports), you can just change the input style to be position:relative so that it's height will be set. Then, you can position the overlay on top of it.
<div>
Content that goes first.
</div>
<div style="position: relative;">
<input style="position: relative;">
<div style="position: absolute; top: 1px; left: 3px;">
XXXX-XX-XXX
</div>
</div>
<div>
PART 2 GOES HERE ABCDEFG
</div>
Now, it should be said that you should avoid using inline styles as they create spaghetti code, don't promote code reuse and are difficult to override later, if you need to and, it seems that what you are actually trying to do can be done with basic HTML and no CSS at all:
<div>
Content that goes first.
</div>
<div>
<input placeholder="xxxx-xxx-xxx">
</div>
<div>
PART 2 GOES HERE ABCDEFG
</div>
Elements that are positioned using position: absolute; won't take up any actual height. Your position: relative; div will now also have a height of 0, because none of its children occupy any height.
By simply adding a height to this div, your elements should behave as you expect:
<div>
Content that goes first.
</div>
<div style="position: relative; height: 25px;">
<input style="position: absolute; top: 0px; left: 0px">
<div style="position: absolute; top: 3px; left: 3px;">
XXXX-XX-XXX
</div>
</div>
<div>
PART 2 GOES HERE ABCDEFG
</div>
EDIT: If you don't want a forced-height, you might be better off with this solution by Scott Marcus.
I have the following HTML content. I have multiple elements (e.g., div with id = one, two, three) inside a div container which is scrollable.
In each element, I need to use CSS position 'absolute' which position related to its parent div (i.e., class='Anchor').
The problem I am having is, when I scroll the outer container, none of the divs with an absolute position moved. My understanding of position 'absolute' is it is positioned relative to its parent DIV element. How can I make those 'absolute' position move as I scroll the outer container?
<div style="overflow-y: scroll">
<div>
<div class="Anchor" id="one">
<div style="position: absolute"> something </div>
<div style="position: absolute"> something else </div>
</div>
</div>
<div>
<div class="Anchor" id="two">
<div style="position: absolute"> something </div>
<div style="position: absolute"> something else </div>
</div>
</div>
<div>
<div class="Anchor" id="three">
<div style="position: absolute"> something </div>
<div style="position: absolute"> something else </div>
</div>
</div>
</div>
You must set position: relative; on the parent div to get the child elements to move in relation to it.
The reality is, you can have the parent div set to any user-defined position, as long as the default static position isn't being used.
Try position: sticky on the div that you want to make float. Also beware the browser support is not that great for sticky.
Please check the code at http://jsfiddle.net/jfzZQ/
We are displaying two floating images dynamically next to each other. We are setting up the width of the images to 200px and not setting the height parameter.
As the images are of different proportions, the height of one image is longer than the other.
<style>
.img200 {width:200px;}
.credit {position: absolute; bottom: 8px; left: 8px;
width: 100%; color: #fff;font-size: 11px;}
</style>
<div style="width:405px;">
<div style="position: relative; float:left;">
<img class="img200" src="http://images.theage.com.au/2012/12/19/3902461/art-353- svMESSI-300x0.jpg" /> <span class="credit">site 1</span>
</div>
<div style="position: relative; float:right;">
<img class="img200" src="http://i.dailymail.co.uk/i/pix/2012/12/04/article-2242647-11D1474C000005DC-964_634x664.jpg" /> <span class="credit">site 2</span>
</div>
</div>
<div style="clear:both;">new line here</div>
<br />
<br />
<div style="width:405px;">
<div style="position: relative; float:left;">
<img class="img200" src="http://nimg.sulekha.com/sports/original700/lionel-messi-2009-12-21-15-41-46.jpg" /> <span class="credit">site 1</span>
</div>
<div style="position: relative; float:right;">
<img class="img200" src="http://media.npr.org/assets/img/2013/06/12/messi122way_custom-74f98cf7a4148d6405ad71c75457f7a4f516a9c9-s6-c30.jpg" /> <span class="credit">site 2</span>
</div>
</div>
<div style="clear:both;">new line here</div>
Is it possible to hide bottom part of one of the images, so that they both show as same height. In case 1, we would like to hide bottom part of the left image and in case 2 we would like to hide bottom part of right image.
Please guide. Thanks.
1)
Create 2 divs of equal height and set the images as their background
2)
Change of tactic .. background works but your images are too big. Lets overflow instead by adding this to the divs:
height: 200px; overflow: hidden;
http://jsfiddle.net/jfzZQ/1/
Notice i'm not fixing the height/width of the image. Only the width of the image is set as to keep the height/width proportions automatic. I'm just setting the height of the div and cutting it off with overflow.
3)
The solution from Mohammad seems fine to me
Did some css refactoring ..so don't know if you like it. If you prefer solution 3, be sure to give the creds to Mohammad & not me
http://jsfiddle.net/jfzZQ/5/
You need to set both pictures' width to auto, and their height to a specific value.
img {
width:auto;
height: /* make height same for both*/
}
That way, it will keep the proportions of both images and it will also make them smaller or bigger depending on the height. Make sure you don't add too much height, though, or the images will go to the next line.