I have a container element that is automatically resizing according to its children, while maintaining its assigned padding and margin values.
If i adjust the dimensions of a child element then the parent resizes.
I wish to exclude a specific child element from this resizing process.
The following snippet illustrates the problem:
<div id="div1">
<button id="button1">Dummy</button>
<span>My parent div has increased in height</span>
</div>
With the following CSS:
#div1 {
background-color: red;
padding: 15px;
}
#button1 {
vertical-align: super;
height: 30px;
}
Here is also a plunker.
I wish the height of #div1 to be unaffected by the position of #button1.
Related
I have a container containing multiple elements with a min-width and some padding to the right and left, the problem is in need them centered and in a column with each one in a separate row, the content of each one of them differs, causing the elements to have different width, like this
+--------- container ---------+
|child1 is too long|
|child2|
|child3 is long|
|child4|
+-----------------------------+
how can I make them all have the width of the largest element while maintaining a max-width in the same time, i.e. if the content gets too long, it breaks down to the next line while maintaining the width.
Attached below a screenshot, the above is the current situation, the one below is the desired result
You can wrap the items with a display:inline-block element,
and wrap that element in a text-align:center element so it would be centered:
.centered{ text-align:center; }
.wrapper{
display: inline-block;
font: 24px Arial;
text-align: left;
}
.wrapper > div{
border: 2px dashed pink;
margin-bottom: 4px;
}
<div class='centered'>
<div class='wrapper'>
<div contenteditable>try typing here</div>
<div contenteditable>aaaaa</div>
<div contenteditable>aaaaa aaaaa</div>
<div contenteditable>aa</div>
<div contenteditable>aaaaaaaaa</div>
</div>
</div>
The inner children are block level elements (<div>) which means they will take the whole width of their parent element, where the parent is an inline-block. This will result the parent is as wide as the widest child.
When I use float, childs pop out of parents.
I just put overflow:hidden on the parent and the child pops back into its parent.
However, I can't do the same with an absolute div and a relative div.
.parent {
position: relative;
overflow: hidden;
}
.child {
position: absolute;
}
<div class="parent">
<div class="child">First</div>
<div class="child">Second</div>
</div>
The goal is to float 2 images one over another to create a slideshow, but still make the page respect the slideshow as an item.
Expected: "First" hovers above "Second" inside parent
Behavior: "First" and "second" are hidden, parent is 0px in height.
Upon removing overflow:hidden;, they appear outside the parent.
Since you have only absolute div inside a relevant parent div there is effectively no content in the parent div. You can set a preferred height to the parent div but also need to set html and body height to 100%.
Note: You would likely set your parent div to the size of your images to be displayed
I have colored the parent black and the children red for visual point of view.
Is this what you are trying to achieve? Sorry if I have miss understood your question.
html, body {
height:100%;
width:100%;
}
.parent {
position: relative;
height:50%;
width:50%;
background-color:Black;
}
.child {
position: absolute;
background-color:red;
width:20%;
height:20%;
}
<div class="parent">
<div class="child">First</div>
<div class="child">Second</div>
</div>
I have a child element that is an image. It's floated next to another div inside a parent. I want the image's width to be a percentage of the parent's parent. However, its parent does not have a set width to work off (because the text in the other child div can vary). Is there a way to still use % to set the image's width relative to the grandparent?
<div class="grandparent">
<div class="parent">
<!-- I want this to be 30% the width of grandparent -->
<img class="myImage" src="someimage.jpg" />
<div class="text">Some text here</div>
</div>
</div>
Parent would simply use overflow: hidden; and grandparent has a width of width: 100%; and the two children are both float: left;.
EDIT: The parent div must shrink to the child divs so it doesn't run over sibling divs. That's why it has no width but uses overflow: hidden.
If you set the parent div to 100% it should take the width of the grandparent. That will allow you to properly use 30% on your image.
.grandparent {
width: 400px;
}
.parent {
width: 100%;
}
.myImage {
width: 30%;
}
Fiddle
Why does wrapper div not have a height? If I set the height (height:200px) the green background appears but how to set with auto height?
Here is my code (JSFiddle):
HTML:
<div class="wrapper">
<div class="effect"></div>
<div class="content">
...content
</div>
</div>
CSS:
.content {
position: absolute;
background-color:red;
}
.wrapper, .effect {
background: green;
}
.wrapper {
position: relative;
width: 630px;
}
.effect {
width:100%;
position: absolute;
}
It is not working (i.e. parent element not having any height) because all the immediate descendant of the .wrapper element is absolutely positioned — this will have the effect of taking them out of the flow of the document, therefore causing the parent's dimension to collapse to nothing.
You will also notice that the effect is the same when you float all
descendants of the parent wrapper, because float also has the
effect of taking normal elements out of the document flow.
There are only two ways to prevent this from happening, both of which involving declaring a certain height for the parent .wrapper element:
Either you explicitly state a height for the parent (see example fiddle)
Or use a relative height (say, in percentages or viewport units) that is not dependent on its own content.
You should reconsider your design strategy, and what you're trying to achieve. There is probably other ways to achieve what you intend to do, will you mind showing us?
Take a look at this fiddle. http://jsfiddle.net/mstwp/
The html is:
<div id="parent" style="width: 150px; display: inline-block; white-space: nowrap">
<div id="one" class="kids">
<span>Hi</span>
</div>
<div id="two" class="kids">
<span>Bob like to play on his violin</span>
</div>
</div>
with CSS:
#parent {
background-color: #aaaaaa
}
#one {
background-color: #ff0000
}
#two {
background-color: #00ff00
}
.kids {
display: inline-block;
padding: 2px;
white-space: normal;
}
How can I make div #two wrap earlier so that I can keep both child divs inside the parent div?
Just remove the width attached to the parent. It forces the parent div to increase its height to accomodate the content in the div #two. SO keep the parent div as such:
<div id="parent" style="display: inline-block; white-space: nowrap">
And this should do the trick for you.
Alternately, you could add a min-height to the parent div so that it automatically accomodates its width based on the content inside its child. So your parent div could look like this:
<div id="parent" style="min-width: 150px; display: inline-block; white-space: nowrap">
Hope this helps!!!
EDIT: Your child divs already wraps inside the parent div. This is 'revealed' when you add a small width to one of the child div named two.
See that here : http://jsfiddle.net/K2xn5/
If you want you div two to wrap within the parent div, then there's no point in attaching a fixed width to the parent. Instead, you will need to provide a fixed width to the div named two. This would then occupy the space AS DEFINED by the content. Your parent div would then just keep expanding based on the size of its children, in this case, div one and two.
Check out these fiddles :
Fixed width to child, no width to the parent: http://jsfiddle.net/K2xn5/1/
Child div wrapping itself based on the size of its content: http://jsfiddle.net/K2xn5/2/ and http://jsfiddle.net/K2xn5/3/
Hope this helps!!!
Looks to me like both child divs are being wrapped correctly? They're both inside the gray 150px parent box.
BTW this short tutorial helped me a lot with my CSS learning.
http://www.barelyfitz.com/screencast/html-training/css/positioning/