I'm new to CSS and I am trying to scaled 2 pictures, which are in the same class, to the same perecentage: height: x% and width: y%, however they are not coming out the same size. If it matters, I did not set the size in my HTML file either. Here is what I got:
.BlogBoxes {
font-size: 20px;
text-align: justify;
border-style: solid;
border-width: 3px;
width: 70%;
height: 30%;
margin: 20px 1000px 20px 10px;
padding: 10px 10px 50px 30px;
background-color: #FFCEB7;
}
.BlogBoxes img {
float: right;
width: 25%;
height: 80%;
padding-left: 10px;
padding-top: 70px;
}
Here is a screenshot, if it helps
You need to apply the width you are after to a parent element of the image, and then set the image to have a max-width of 100%.
So in your case you want the image to take up 25% of '.BlogBoxes', so we'll create a new div inside that '.img-container', and then place the img inside of that.
.BlogBoxes div.img-container {
float: right;
width: 25%;
/*height: 80%; // forget height this is not necessary */
padding-left: 10px;
padding-top: 70px;
}
.BlogBoxes div.img-container img {
max-width: 100%;
height: auto;
display: block;
}
Related
I have a textarea inside a div, and I wish for the text area height to match the height of the div container.
Currently, the width fits perfectly, however the textbox (which begins empty) only fills about 20% of the div height.
And when an ajax call grabs some text and populates the textarea, the textarea height remains at about 20% of the div and provides a scroll bar.
How can I alter my CSS to ensure that the textarea height always matches the height of its div container?
#answerBox {
width: 100%;
height: 100%;
box-sizing: border-box;
margin: 5px auto;
padding: 5px;
font-size: 10px;
text-align: left;
position: relative;
}
#answerBoxDiv {
width: 90%;
min-height: 50%;
margin: 5px auto;
border: 4px solid #00bfb6;
padding: 5px;
font-size: 10px;
text-align: left;
position: relative;
}
<div id="answerBoxDiv">
<textarea id="answerBox"></textarea>
</div>
You need to explicitly set a height of the parent container (whether that is in px or rem etc) - that way the height: 100% of the textarea will fill to the container.
The expand on text content cannot be done with simple css - you need js to determine the heaight of the content and adjust the parent container accordingly.
The only way tyou can keep height: 100% on the parent container is its ancestor has a height set (eg 100vh) - that way the browser can determine the height of each DOM element and size the text area accrodingly.
UPDATE - I have added a js function to automatiucally increae the height of the parent container on the input. (the textarea autoincreases in height since it is 100% of the parentThis will need massaging - but when you type into the textarea the height will auto expand.
function setHeight(element) {
const container = document.getElementById("answerBoxDiv");
const height = element.scrollHeight;
if(height > 100) {
container.style.height = (element.scrollHeight)+"px";
}
}
#answerBoxDiv {
width: 90%;
height: 100px; **// this is needed - but can be in px / rem / vh or other but NOT % unless its parent has its height set.**
margin: 5px auto;
border: 4px solid #00bfb6;
padding: 5px;
font-size: 10px;
text-align: left;
position: relative;
}
#answerBox {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 5px;
font-size: 10px;
text-align: left;
position: relative;
resize: vertical;
overflow: hidden
}
<div id="answerBoxDiv">
<textarea id="answerBox" oninput="setHeight(this)"></textarea>
</div>
You can use the CSS height: 100%; property on the textarea element to make it fill the entire height of its parent container, the #answerBoxDiv. Additionally, you can remove the min-height property from the #answerBoxDiv to make sure the container's height is always equal to the height of its content.
Here's the updated CSS:
#answerBox {
width: 100%;
height: 100%;
box-sizing: border-box;
margin: 0;/*keep it zero*/
padding: 5px;
font-size: 10px;
text-align: left;
position: relative;
}
#answerBoxDiv {
width: 90%;
margin: 5px auto;
border: 4px solid #00bfb6;
padding: 0px;/*keep it zero*/
font-size: 10px;
text-align: left;
position: relative;
}
And the updated HTML:
<div id="answerBoxDiv">
<textarea id="answerBox"></textarea>
</div>
Percentage height does not work with a min-height parent, you would either need to give your parent a height or you could use flex:
html,
body {
height: 100%;
margin: 0;
}
#answerBox {
flex-grow:1;
width: 100%;
box-sizing: border-box;
margin: 5px auto;
padding: 5px;
font-size: 10px;
text-align: left;
position: relative;
}
#answerBoxDiv {
width: 90%;
min-height: 50%;
margin: 5px auto;
border: 4px solid #00bfb6;
padding: 5px;
font-size: 10px;
text-align: left;
position: relative;
display: flex;
flex-direction: column;
}
<div id="answerBoxDiv">
<textarea id="answerBox"></textarea>
</div>
You can try this
#answerBox {
height: 100%;
resize: none;
}
try keeping the min-height of the textarea as 100% or nearby or try using
object-fit: contain(or cover) on your text area
Give specific height for #answerBoxDiv parent div. So you will get appropriate height for this div.
<div class="parent-div" style="height: 100%;">
<div id="answerBoxDiv">
<textarea id="answerBox"></textarea>
</div>
</div>
#answerBox {
width: 100%;
height: 100%;
box-sizing: border-box;
margin: 0;
padding: 5px;
font-size: 10px;
text-align: left;
resize: none;
border: none;
}
#answerBoxDiv {
width: 90%;
min-height: 50%;
margin: 5px auto;
border: 4px solid #00bfb6;
padding: 0;
position: relative;
}
I am trying to make a div fill the possible place after its margins taking effect.
For example if the screen width is 200 and the class is declared as below:
.mini_video {
width: 100%;
margin-left: 20px;
margin-right: 20px;
}
Can the mini_video have 160px width and be in the middle?
I am also using Bootstrap if it can help me in any way.
I'd be using padding for this use case. You could use an outside container and add padding to it for the video. Object-fit on the video allows it to scale progressively.
.mini_video-container {
width: 100%;
padding: 0 20px;
max-width: 1000px;
background-color: orange;
}
video {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: fill;
}
https://codepen.io/jeffteachestheweb/pen/abJVNjg
You can add max-width: 100%; instead of width: 100%;
.mini_video {
max-width: 100%;
margin-left: 20px;
margin-right: 20px;
}
Take a look at that example
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.mini_video {
max-width: 100%;
margin-left: 20px;
margin-right: 20px;
border: 1px solid #000;
text-align: center;
}
<div class="mini_video">Hello World</div>
I'm having problems centering an image between two float-aligned pictures.
I can't add margin-left to the image in the middle. I would like it to stay centered on resizing.
My code:
#skjirt {
display: inline;
margin-left: auto;
margin-right: auto;
float: flex;
height: 400px;
width: 400px;
border: 3px solid #662C49;
margin-top: 20px;
}
#skjirt1 {
display: inline;
float: left;
margin-left: 20px;
height: 400px;
width: 400px;
border: 3px solid #662C49;
margin-top: 20px;
}
#skjirt2 {
display: inline;
float: right;
height: 400px;
width: 400px;
border: 3px solid #662C49;
margin-top: 20px;
margin-right: 20px;
}
#imageWrap {
width: 100%;
height: auto;
margin-top: 100px;
}
If you want to make the image blocks display in the middle then instead of aligning them using float, just center them by applying the text-align:center to the #imageWrap container. Also change your display:inline to display:inline-block so that the img or any other element inside the boxes conform and adjust to the parent width and height.
Below is a sample code using your classes and I modified it with the suggested solution.
P.S. The suggested solution also makes the boxes to be responsive. :)
https://codepen.io/Nasir_T/pen/wqjKoa
I have some html content with following structure:
<div class="message-container">
<p class="message-value">someVal</p>
<div class="message-attribute">someUsername</div>
<div class="message-attribute">11-09-2017 12:30</div>
</div>
So, I want to scale my message-container up when it gets long values in message.value and scale it down as far as possible to min-width in the other way.
I also wan't to specify max-width for this props.
I've done this:
.message-container {
resize: both;
margin: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
color: #ffffff;
border-radius: 20px;
min-width: 100px;
max-width: 400px;
width: auto;
height: auto;
background-color: #80CBC4;
}
.message-value {
resize: both;
float: left;
max-width: 380px;
word-wrap: break-word;
height: auto;
}
.message-attribute {
padding-left: 50px;
width: 150px;
display: block;
color: #607D8B;
}
and message-username and message-datetime has fixed width.
Finally, I'm alsways getting max-width in my message-container even when it has free space to cut it down
https://jsfiddle.net/Lwrpegqe/
As you can see in jsfiddle width is too long with following content it could be shorter
Main purpose to resize block automatically
See the solution.
.message-container {
resize: both;
margin: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
color: #ffffff;
border-radius: 20px;
min-width: 100px;
max-width: 400px;
width: auto;
height: auto;
background-color: #80CBC4;
}
.message-value {
resize: both;
float: left;
max-width: 380px;
word-wrap: break-word;
height: auto;
display: inline;
}
.message-attribute {
padding-left: 50px;
width: 150px;
display: inline;
color: #607D8B;
}
https://jsfiddle.net/Lwrpegqe/2/
Add display: inline-block; to your .message-container
Inline elements only take up the space of the content. A div is always a block element unless specified.
Give width and height in percentage (%).
Hope it will work for you.
.your-class {
width:100%;
height:100%;
}
just use w-100 in bootstrap 4 to fit to 100% width of container element
I have a main div with the class of .features, inside this div I have two boxes each one with a height set to 160px and different widths. There's a myterious padding between the end of the two boxes and the main div as seen in the screenshot below:
The padding is about 5px - I would like to remove this padding if possible. I tried adding margin: 0; and padding: 0; to the main div as well as to the two inner boxes but it didn't work.
Here is the html for this section of the page:
<div class="features">
<div class="list-items"></div>
<div class="screenshot-box"></div>
</div>
The css:
.features {
width: 980px;
margin: auto;
margin-top: 25px;
background-color: lightblue;
}
.list-items {
width: 280px;
height: 160px;
display: inline-block;
background-color: red;
}
.screenshot-box {
width: 583px;
height: 160px;
float: right;
padding-bottom: 0;
display: inline-block;
background-color: red;
}
This actually has nothing to do with padding or margin. If we look at the computed style example, we'll see that the height of the element itself is 164px:
This is happening because your inner elements are set to display as inline-block. This means they're affected by font-size, and ultimately the font-size is causing the height of the parent element to be greater than the height of the inner elements.
There are two fixes:
Specify a font-size of 0 on your .features element, and then reset this within the inner elements (by giving them a font-size of 16, or whichever your default size is).
.features {
width: 980px;
margin: auto;
margin-top: 25px;
background-color: lightblue;
font-size: 0;
}
.list-items {
width: 280px;
height: 160px;
display: inline-block;
background-color: red;
font-size: 16px;
}
.screenshot-box {
width: 583px;
height: 160px;
float: right;
padding-bottom: 0;
display: inline-block;
background-color: red;
font-size: 16px;
}
<div class="features">
<div class="list-items"></div>
<div class="screenshot-box"></div>
</div>
Give your .features element a height of 160px itself to match its children. With this the browser doesn't have to calculate what the height should be itself.
.features {
width: 980px;
margin: auto;
margin-top: 25px;
background-color: lightblue;
height: 160px;
}
.list-items {
width: 280px;
height: 160px;
display: inline-block;
background-color: red;
}
.screenshot-box {
width: 583px;
height: 160px;
float: right;
padding-bottom: 0;
display: inline-block;
background-color: red;
}
<div class="features">
<div class="list-items"></div>
<div class="screenshot-box"></div>
</div>
Just make font-size as 0 for .features, and it will take full width. Here is your fiddle.
.features {
width: 980px;
margin: auto;
margin-top: 25px;
background-color: lightblue;
font-size: 0;
/*Just make font size as 0*/
}
.list-items {
width: 280px;
height: 160px;
display: inline-block;
background-color: red;
}
.screenshot-box {
width: 583px;
height: 160px;
float: right;
padding-bottom: 0;
display: inline-block;
background-color: red;
}
<div class="features">
<div class="list-items"></div>
<div class="screenshot-box"></div>
</div>
You could also just ditch the display: inline-block on both child elements and set float: left on .list-items and display: table on .features (code example). Added benefit that without hardcoded parent div height, the parent div will expand to fit child content.
#james donnelly has already given you an accurate and concise explanation to the cause.