This question already has answers here:
CSS - Equal Height Columns?
(11 answers)
How can you set the height of an outer div to always be equal to a particular inner div?
(2 answers)
Equal height rows in CSS Grid Layout
(2 answers)
Closed 2 years ago.
Let's say I have a container div with 2 elements
<div class="container" >
<div class="section" ></div>
<div class="text" >Some text</div>
</div>
My question is, how can I write the CSS so that the height of the .text div, containing all the text is as big as the .section div, so for example if
.section{
height: 450px;
}
Then height for .text is also 450px. Or do I need javascript to do this
You can give them both the same percentage height and then set the height based on the parent
.section {
height: 50%;
background: red;
}
.text {
background: green;
height:50%;
}
.container{
height:450px}
<div class="container">
<div class="section"></div>
<div class="text">Some text</div>
</div>
You should put text div inside section div so it affect changes, like this:
<div class="section" >
<div class="text" >Some text</div>
</div>
.section {
height: 450px;
background: red;
}
Related
This question already has answers here:
How to match width of text to width of dynamically sized image/title?
(2 answers)
Closed 2 years ago.
Fiddle
<div id="grid">
<div id="toolbar">
<div>
Some writing.
</div>
<img src="some-link" alt="">
</div>
<div id="main">Main view</div>
</div>
#grid {
display:grid;
grid-template-columns: auto 1fr;
}
#toolbar {
display:flex;
flex-direction:column;
}
Is it possible to force the image to take only as much as width as the text does?
I've got a toolbar with icons that I'd like to have an image on the bottom. The icons decide the width of the toolbar (which resides inside an auto cell of a grid), and I'd like the image to fit exactly that width.
By adding width to toolbar you can achieve this.
#toolbar {
display:flex;
flex-direction:column;
background-color: rgb(225, 225, 220);
width: 99px;
}
img{
max-width: 100%;
max-height: 100%;
}
https://jsfiddle.net/3fydzgxp/2/
Other option you can try using jQuery or javascript by capturing width for text div and applied to img style.
<div id="grid">
<div id="toolbar">
<div id="text">
Some writing.
</div>
<img src="https://smallimg.pngkey.com/png/small/197-1978960_free-new-icon-download-google-chrome-icon-redesign.png" alt="" id="imagetag">
</div>
<div id="main">Main view</div>
</div>
console.log(document.getElementById("text").offsetWidth);
document.getElementById("imagetag").style.width=document.getElementById("text").offsetWidth;
This question already has answers here:
Setting Element Width Based on Height Via CSS
(10 answers)
Set width according to height [duplicate]
(2 answers)
Closed 2 years ago.
I'm struggling to apply an aspect ratio to a div that should grow to 100% height of it's parent.
The map div should grow to the height of the card (with is defined by the amount of text) and also maintain a squared 1:1 ratio.
I saw working solutions if the div is using 100% width (like here: https://tailwindcss.com/course/locking-images-to-a-fixed-aspect-ratio)
But it's not working when I want to have height:100% and therefore using padding-left/right:100%
This is currently my not working attempt:
<div class="row">
<div
style="position: relative; height: 100%; padding-left:100%"
>
<div
style="position: absolute; height: 100%; width: 100%;">
#map
></div>
</div>
<div class="col pt-2">
<h5>Title</h5>
<p>Subtitle</p>
<p>Subtitle</p>
<p>Subtitle</p>
<p>Subtitle</p>
</div>
</div>
If I understood well, you want to dynamically change the map box width and height based on the text size. Is so, follow this code:
<div class="wrapper">
<div class="map">
<p>Map</p>
</div>
<div class="content">
<h1>Title</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
</div>
CSS:
.wrapper {
display: flex;
border: 1px solid gray;
}
.map {
background: gray;
}
.content {
background: white;
flex: 1;
}
jQuery script:
$( window ).on("load resize", function() {
var width = $('.map').height();
$('.map').width(width);
});
This question already has answers here:
Expand a div to fill the remaining width
(21 answers)
Closed 5 years ago.
With Bootstrap or W3 it is easy but in this application I don't want to use that to make the columns. How do I handle the columns issue withe pure css?
I need to do something like this:
I repeat... Whithout using bootstrap, w3 or any other css framework, how do I make this.
This is my simple HTML code:
<div style="width: 50px; float: left">
<< Prev
</div>
<div style="float: left">
<h1>Some Info... this is the responsive div. Always the rest of the size extracting the 50px of the other divs</h1>
</div>
<div style="width: 50px; float: left">
Next >>
</div>
You can use flexbox:
.container {
display: flex;
height: 200px;
}
.side {
width: 50px;
height: 100%;
background: purple;
}
.middle {
flex-grow: 1;
background: blue;
}
<div class="container">
<div class="side"></div>
<div class="middle"></div>
<div class="side"></div>
</div>
This question already has answers here:
Using CSS Target to highlight parent div
(2 answers)
Is there a CSS parent selector?
(33 answers)
Closed 8 years ago.
Is there anyway we can target the container of an element? I seems can't find a way, here is an example:
The HTML:
<div class="wrapper">
<div class="content" id="TopSection">
<span>Box A</span>
</div>
</div>
<div class="wrapper">
<div class="content" id="BottomSection">
<span>Box B</span>
</div>
</div>
The wrapper and the content are both has styling class, for example:
.wrapper {
background-color: black;
}
.content {
padding: 10px 20px;
}
How to change the background color of the wrapper on the BottomSection only, without adding anther wrapper class, i.e wrapperB? so can we target the wrapper that contains that ID only?
Try this-
.wrapper {
background-color: black;
}
.wrapper:nth-child(2) {
background-color: orange;
}
.content {
padding: 10px 20px;
}
You can target parents with jQuery, to add a class that you could then target with CSS:
$('#BottomSection').closest('.wrapper').addClass('changeMe');
This question already has answers here:
Can CSS detect the number of children an element has?
(11 answers)
Closed 7 years ago.
I have an element that may contain 1, 2 or 3 subelements:
<div class="wrapper">
<div class="element" />
</div>
or...
<div class="wrapper">
<div class="element" />
<div class="element" />
</div>
or...
<div class="wrapper">
<div class="element" />
<div class="element" />
<div class="element" />
</div>
I want to apply styles to .element depending on how many siblings there are.
For example, something like...
.wrapper .element {
width: 50%;
}
.wrapper .element:only-child {
width: 75%;
}
...but I cannot figure out how to differentiate between the 2 elements and the 3 elements. Is this possible in pure css?
Thanks ( in advance ) for your help.
This is actually pretty easy to do, usually people use the data attribute [thanks #david-thomas] in html to accomplish this:
A DIV wrapper and children:
<div class="wrapper" data-wrapper-subs="3">
<div class="some-class">Child 1</div>
<div class="some-class">Child 2</div>
<div class="some-class">Child 3</div>
</div>
And its CSS:
div.wrapper[data-wrapper-subs="1"] div { width: 99%; }
div.wrapper[data-wrapper-subs="2"] div { width: 49%; }
div.wrapper[data-wrapper-subs="3"] div { width: 32%; }
div.wrapper[data-wrapper-subs="4"] div { width: 24%; }
div.wrapper[data-wrapper-subs="5"] div { width: 19%; }
div.wrapper div.some-class { /* Generic child styling */ }
The important thing is to set the data-wrapper-subs to the number of children.
If you don't know the number of children obviously this won't work, but as far as I know you can only style based on :first-child, :last-child, :only-child, :nth-child(odd), :nth-child(even) and :nth-child([number])