For demo purposes imagine the following structure:
<div class="wrapper">
<div class="box"></div>
</div>
the div with class="wrapper" has a fixed width of let's say 200px;
the inner div with class="box" has a 50% width of its parent.
I want to create a effect with translateX for the inner div to slide and leave when it reaches the border of the parent div.
I have this plunker which is not working. Plunker
How can I prevent it from going beyond its parent width?
Add overflow: hidden to the parent element (.wrapper).
Related
I am working on an HTML and CSS code and trying to prevent a child div text to expand when the parent expands. I want the child div to remain its own width.
I tried to add a fixed width for the child div but it is not responsive. I tried to use scaleX(), but it is not working.
HTML befor expand
<div class="parent col-2">
<div class="child"><p>some long text</p></div>
</div>
HTML after expand
<div class="parent col-3">
<div class="child"><p>some long text</p></div>
</div>
<style>
.parent {
transition: flex 0.5s ease-in-out;
}
</style>
I expect the child div to remains the same width even when the parent is being expanded.
UPDATE
code
When clicking the button, it expands the parent div and the text inside the child div is being expanded to (obviously). I want to keep the child div text width - no to expand - and only the parent div to expands.
Another way that I try is to prevent the child to be affected by the parent transition.
max-width, min-width, width -> together are useful in the child element
display: block or display: inline-block -> if your element has a default display: inline
box-sizing: border-box -> if your element does not fit just like you want it, you may want to try this one
Don't forget to read documentation about these props, hope this helped you
.child {
max-width: 640px;
width: 100%;
min-width: 300px;
}
<div class="parent col-3">
<div class="child"><p>some long text</p></div>
</div>
I have a problem about bottom alignment of a div and I don't find any solutions.
All div are contained in a main div, one is left floated and all other must be place on the right of it;
Just one of them it must be bottom aligned, but trying with position absolute and bottom tag it's placed over the floated one.
CSS:
#container {width:730px;position: relative;min-height:120px;}
#image_box {width:220px; float:left; padding-right:10px;background:#222;color:#FFF;}
#box_dx1 {width:500px;background:#666;}
#box_dx2 {width:500px;padding-top:10px;background:#999;}
#box_dx3 {width:500px;padding-top:10px;background:#CCC;}
HTML:
<div id="container">
<div id="image_box">Box Sx Image <br>Row<br>Row<br>Row<br>Row<br>Row<br>Row</div>
<div id="box_dx1">Box Dx Title</div>
<div id="box_dx2">Box Dx Description</div>
<div id="box_dx3">Box Dx Param</div>
</div>
Moreover div's heights are variable, image_box is optional(cannot exist) and text of box_dx2 could wrap under the image_box.
Any ideas?
Thanks!
If the height of box_dx1, box_dx3 and image-box is always going to be same, you could just set a min-height for box_dx2. That way, if you add more content to box_dx2 it will eventually become taller than the image and text will wrap around it. In your example it would be something like:
#box_dx2 {
width: 500px;
padding-top:10px;
background:#999;
min-height: 70px;
}
jsFiddle
However, if the height of those boxes isn't fixed, maybe the easist thing is to calculate the min-height using some jQuery.
I want to have a header with 100% width,
in some cases there is a horizontal scrollbar and that
causes the div to cover the visible area and not the whole
parent element.
.cont {
width: 100%;
}
http://jsfiddle.net/BhRdV/1/
There are certain cases, where even if you don't set width to DIV, it will still scale 100%.
Also, please be clear with ur question.
<div style="width:1200px;">
<div style="width:100%;">Tadda</div>
<div>Tadda 2</div>
</div>
i have a sidebar having many nested divs to place my rounded corrners.but when i tried to set the content's div height equal to 90% its not expanding.what is the issue.my html,body have 100% height.my div nest is some what like this.
<body>
<div class="main"> //it contains header n content div,its height is 90%
<div class="header"></div> //its height is 10% of main div
<div class="content"> //its height is 90% of main div
<div class="vertical_navigation"> //its height is 99% of content div
<div><div><div><div> //thses divs are for rounded corner image concept
<div> </div> //this div contains the data.now its height is 80% but its not expanding?h
//i cant use min-height,its not working too.how to give height referenced to //vertical navi div??
</div></div></div></div>
</div>
</div>
</div>
<footer></footer>
</body>
have you considered applying rounded corners with just css and not worrying about the ieretards not having them?
When having so much nested div, it's good you consider the measurement in width and height of the DIV if the container div is lesser that the ones inside it, it won't stretch,because that way, the browser can't detect how far the div is meant to stretch. to resolve this use make proper use of CSS.
I need a child div to be as high as its parent, but I do not know the parent's height. It can change.
Setting "height: 100%" does not work, as the div will take the height of the entire page.
This is the layout of the divs:
<div id="deelnemersballoon">
<div class="balloonarrow"></div>
<div class="balloonborder">
<div class="ballooncontent">
<div id="aantaldeelnemers">1</div>
<div id="deelnemertekst">deelnemer werd toegevoegd.</div>
<div class="clear">
<button>Add something</button>
</div>
</div>
</div>
</div>
.balloonarrow should be as high as #deelnemersballoon
set parent div height in pixels (for ex height:100px ) and set child as 100% (height:100%) . Child only occupies parent div width fully
I never had much luck with height: 100%; even when playing by the rules. What does .balloonarrow do? If you're just trying to snap a graphic to the bottom of the div, you can try position: absolute; and bottom: 0px;, as long as #deelnemersballoon is set to position: relative;.
If you're just looking to make a solid/patterned visual contained by .balloonarrow, you're better off making a stretch image: create an image 3px or 4px tall, make it the background of #deelnemersballoon, and set it to repeat-y. Quick and dirty way to make a 100% height sidebar.
Hope this helps, can't tell much more without seeing your css.
A child div will not take up 100% of its parent if it has something in the markup before it:
Html:
<div id='parent'>Parent (Mark up before child)<div id='child'>Child</div></div>
css:
#parent {background:blue; height:500px; color:white}
#child {background:red; height:100%}
You can find a working example here. (Removing the text from the #parent div will make the child fill it 100%)
http://jsfiddle.net/wcprA/2/
The same thing applies if you have markup after the 100% child aswell, as seen here
http://jsfiddle.net/wcprA/5/
Try adding position:relative to the parent div. Then the 100% on the child div should reference the parent div. In general 100% height is going to look for the nearest parent element that has a position set on it - and if it doesn't find any it will eventually find the body tag and use that.