This question already has answers here:
How can I make a div not larger than its contents?
(43 answers)
Closed 11 months ago.
I have a div inside which I have content. I gave width = auto and then gave max-width but the container is taking up a constant fixed no matter what the size of the content is:
.adjustablebox {
background: white;
height: 50px;
width: auto;
overflow: hidden;
padding: 8px;
max-width: 350px;
border-radius: 5px;
position: relative;
top: 0;
left: 30%;
}
.body {
background: black;
}
<div class="body">
<div class="adjustablebox">
<span>Hello world</span>
</div>
</div>
div is an block element. its default behaviour is covering full width so its doing that but as you have given property of max-width so its just expanding to that limit. in order to do your stuff you have to change its behaviour to
display: inline-block;
the .adjustablebox div is block level, it takes the entire available width of the container.
If you want it to be auto width you can do
.adjustablebox {
display: inline-block;
}
or use flex box.
instead of using auto, use 100% and remove max-width.
Also you can remove both tag
.body {
background: black;
}
.adjustablebox {
background: white;
height: 50px;
width: 100%;
overflow: hidden;
padding: 8px;
border-radius: 5px;
position: relative;
top: 0;
left: 30%;
}
<div class="body">
<div class="adjustablebox">
<span>Hello world</span>
</div>
</div>
hope this will solve your problem.
Related
This question already has answers here:
Setting Element Width Based on Height Via CSS
(10 answers)
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 9 months ago.
I'd like to make an element have the same width and height so it is a perfect square. However the width is not a set value but rather defined by the viewport plus some whitespace. The whitespace is defined by some grid fr units plus some margins and paddings outside the dsired element and it's parent. So I have not found an easy way to calculate something like --size: 100vw - **whitespace**. I'd like to achieve this by using only CSS if possible.
Here's a working example:
* {
box-sizing: border-box;
}
.example {
display: flex;
flex-wrap: wrap;
}
.example > div {
background-color: teal;
border: 4px solid blue;
border-top: 0;
border-bottom: 0;
}
.taller {
flex-basis: 40%;
height: 500px;
}
.shorter {
flex-basis: 60%;
height: 250px;
}
.perfectCircle {
border: 4px solid red;
--size: 100%;
width: var(--size);
height: var(--size);
border-radius: 50%;
position: relative;
}
.perfectCircle > p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
p {
flex-basis: 100%;
}
<div class="example">
<p>The width of the teal containers should define the size of the perfect <del>square</del> circle inside</p>
<div class="taller">
<div class="perfectCircle">
<p>
This should ALWAYS be a perfect <del>square</del> circle and leave whitespace on top or bottom if needed.
</p>
</div>
</div>
<div class="shorter">
<div class="perfectCircle">
<p>
This should ALWAYS be a perfect <del>square</del> circle and overflow the container if needed.
</p>
</div>
</div>
</div>
There is a CSS property just for that: aspect-ratio
The aspect-ratio CSS property sets a preferred aspect ratio for the
box, which will be used in the calculation of auto sizes and some
other layout functions.
Not compatible with Internet Explorer
article {
width: 40%;
margin: 1em 30%;
padding: 0;
background: lime;
}
section {
width: 80%;
margin: 10%;
background: brown;
}
div {
width: 100%;
background: black;
aspect-ratio: 1 / 1;
}
<article>
<section>
<div></div>
</section>
</article>
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 1 year ago.
I have the following code:
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
padding: 10px;
}
body {
position: relative;
}
#outer {
position: absolute;
top: 0;
left: 0;
border: 2px solid green;
padding: 5px;
max-width: 100%;
max-height: 100%;
}
#inner {
border: 2px solid red;
font-size: 5em;
overflow: auto;
height: 100%;
}
<html>
<body>
<div id="outer">
<div id="inner">
This is a loooooooonnnng<br>text.<br> Spanning
<br>multiple<br>lines.
</div>
</div>
</body>
</html>
Resize the browser window and you can see that the inner div is expanding more than the outer div in height. But, if I specify a height, say height: 1000px; on the outer div, the inner div gets resized to fit outer div's height. Why is it behaving like that? Isn't max-height supposed to work without specifying a height?
The max-height property sets the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height.
When you use max-height: 100% on the parent container, the percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly, and this element is not absolutely positioned, the percentage value is treated as none.
In terms of max-height, if the content is larger than the maximum height, it will overflow.
To allow the child container to always fit inside the parent container, you can just use CSS Flexbox or add overflow: auto to #outer so then it does fit 100% of the content within it's content-box. Without using either overflow or Flexbox, the child container's content is larger than the maximum height and therefore overflows out the bottom of #outer when the viewport height is small.
Removing the height: 100% declaration from #inner while making the parent container a Flexbox with display: flex seems to do the trick without having to add overflow: auto to #outer.
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
padding: 10px;
}
body {
position: relative;
}
#outer {
position: absolute;
top: 0;
left: 0;
border: 2px solid green;
padding: 5px;
max-width: 100%;
max-height: 100%;
display: flex;
}
#inner {
border: 2px solid red;
font-size: 5em;
overflow: auto;
}
<html>
<body>
<div id="outer">
<div id="inner">
This is a loooooooonnnng<br>text.<br> Spanning
<br>multiple<br>lines.
</div>
</div>
</body>
</html>
Simply remove the max-height declaration from the #outer div.
To fix your issue, supply a height property to your #outer div.
#outer {
/* ... */
height: 100%;
}
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 4 years ago.
I have a parent div and two child divs. The second child div is variable height, but is absolutely positioned at the bottom of the parent div.
I want the first div to have a dynamic height based on the second div. I thought margin-bottom: 10px would specify the height of the first div to go up until 10px of the second div, but apparently this is not true.
Is there any workaround to get what I want?
HTML:
<div class="parent">
<div class="first">
Hello
</div>
<div class="second" >
</div>
</div>
CSS:
.parent {
height: 500px;
min-width: 500px;
position: relative;
background-color: red;
}
.first {
background-color: green;
margin-bottom: 10px;
}
.second {
height: 100px;
background-color: grey;
bottom: 0px;
box-sizing: border-box;
position: absolute;
width: 100%;
}
JSFiddle:
https://jsfiddle.net/4tjqsron/2/
The margin-bottom is only telling the browser "don't let anything come within 10px of the bottom of me," as you found out.
I think this may be an excellent opportunity to use the calc() css function!
Try this:
.first {
background-color: green;
height: calc(100% - 110px);
}
This should leave a 10px space between your first and second child element.
Basically it is telling the browser that the first element is to take up 100% of its parent minus 110px.
Please see this for more info on the calc() function.
https://www.w3schools.com/cssref/func_calc.asp
I hope this helps!
EDIT: It just occurred to me that this only works if your height is set elsewhere. You may need to adjust your use of the 100% argument depending on your current parent height settings. Even if this is the case, the calc() function should still prove useful.
I am not get your point very clearly, here is my solution that div.second will always align on the bottom of div.parent vertically:
.parent {
height: 500px;
min-width: 500px;
position: relative;
background-color: red;
}
.first {
background-color: green;
margin-bottom: 10px;
}
.second {
/* height: 100px;
background-color: grey;
bottom: 0px;
box-sizing: border-box;
position: absolute;
width: 100%; */
max-height: 100%;
position: absolute;
top: auto;
bottom: 0;
}
<div class="parent">
<div class="first">
Hello
</div>
<div class="second" >No matter how many content in this div, it will always lie on the bottom of the parent div</div>
</div>
I do not understand whats wrong with my code. I mean, section element has the height, display value of my DIV element is definitly block and i really dont know how it works and how to combine these two elements differently positioned. Please give me your solutions and advices to learn something new today.
div {
position: relative;
margin: 0 30%;
}
div section {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 100px;
background-color: yellow;
}
hr {
height: 2px;
background-color: blue;
}
<div>
<section></section>
</div>
<hr>
You want your hr on the bottom of the first div, right ?
However, this is not working because the parent div have an default height: auto property.
This mean that the parent div will have the height of his children.
When you set a position: absolute on a child, you are breaking this system.
The parent will no longer take care of his child.
So, if you want to make it works, you have two solutions:
- set a custom height (height: 100px) on the parent div (not good)
- remove the absolute position on the child section (default :position: relative)
div {
position: relative;
margin: 0 30%;
}
div section {
height: 100px;
background-color: yellow;
}
hr {
height: 2px;
background-color: blue;
}
<div>
<section></section>
</div>
<hr>
Your element has height set to AUTO. If you want to change your div height you need to write this in css.
div {
position: relative;
margin: 0 30%;
height: 200px;
background-color: red;
}
I think This is because your div has no height itself that's why it is not visible and it is increasing according to its child element which is section and is in absoulute position. I am not sure what you are up to but If you want to show the section inside the div along with the div's height the you must include the css for your div .
I provided an assumption solution for you hope it helps you
div {
position: relative;
margin: 0 30%;
background-color: green;
height: 150px;
}
section {
position: absolute;
top: 50px;
right: 0;
left: 0;
height: 50px;
background-color: yellow;
}
div hr {
height: 10px;
background-color: red;
}
<html>
<head>
</head>
<body>
<div>
<p>your div</p>
<hr>
<section>your section</section>
</div>
</body>
</html>
In the code sample I did:
reset all margins/paddings to 0
set body height to 100%
set flex container height to 96%
set flex container margin-top to 2%
Now this gives me a scroll on the body even if the flex containers height + margin-top only sums up to 98%, so my question is, can't I use margin-top is this way and where does the extra space come from forcing the body to scroll?
Setting the body to overflow:hidden removes the scroll, but that feels more like a band-aid and not considered as a solution (unless this is a "behavior-by design" which needs that in this case).
Edit
Ways like remove the margin-top on the flex container and then set a padding-top: 2%; on the body or use position: relative; top: 2%; on the container or with absolute: position; I can make it work as expected though, but the case here is why margin-top: 2% doesn't do it.
* {
box-sizing: border-box;
padding: 0;
margin: 0
}
html, body {
background-color: gray;
height: 100%;
}
.outer {
display: flex;
flex-flow: column;
margin: 0 auto;
height: 96%;
width: 50%;
margin-top: 2%;
}
.top {
background-color: lightgray;
}
.middle {
background-color: darkgray;
}
.the-rest {
flex: 1 0 auto;
background-color: lightgray;
}
<div class="outer">
<div class="top">
top
</div>
<div class="middle">
middle
</div>
<div class="the-rest">
content
</div>
</div>
This is because percentage margins are based on the width of the containing block / element...in this case, the body.
W3C Spec
MDN
A <percentage> relative to the width of the containing block. Negative values are allowed.
I usually use vh and vw on html and body. In this demo I applied vh only since it looked like a vertically oriented demo. I also make the body and html position: relative. With vw and vh there's a real measured length that other elements (children of ::root) can actually set their relative measurements of 100%. I use position: relative because it makes the html, body sit rigidly inside the view port and the viewport units keep the body, html on the edge at 100vh and 100vw.
UPDATE
I think this behavior is due to collapsing-margins So if there's an illogical margin-top behavior, keep that in mind. There are several very specific circumstances that result in this odd behavior and there are a few solutions as well. The solution for these circumstances are as follows:
body, html { height: 100vh; } /* no relative or absolute positioning */
.outer { min-height: 100%; margin-top: -2%; } /* It's explained that the positive numbered margin-top is not effective and yet the negative value works but not like a normal negative value!? o_0
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
position: relative;
background-color: gray;
height: 100vh;
}
.outer {
display: flex;
flex-flow: column;
margin: 0 auto;
min-height: 100%;
width: 50%;
margin-top: - 2%;
border-top: 0;
}
.top- {
background-color: lightgray;
}
.middle {
background-color: darkgray;
}
.the-rest {
flex: 1 0 auto;
background-color: lightgray;
}
.marker {
position: absolute;
outline: 1px solid red;
}
<span class="marker" style="top: 0; left: 0;">top:0|left:0</span>
<span class="marker" style="top: 0; right: 0;">top:0|right:0</span>
<div class="outer">
<div class="top">
top
</div>
<div class="middle">
middle
</div>
<div class="the-rest">
content
</div>
</div>
<span class="marker" style="bottom: 0; left: 0;">bottom:0|left:0</span>
<span class="marker" style="bottom: 0; right: 0;">bottom:0|right:0</span>