This question already has answers here:
Can media queries resize based on a div element instead of the screen?
(11 answers)
Closed 3 years ago.
I have a certain scenario like follows:
You have three inline-elements, two are the same essentially, but the one in the middle is not and its width will always be unknown.
You want either two things:
All three elements are inline on the same row
If the width is two
small, all three elements are stacked on top of each other
With display: inline-element, it will collapse as needed, meaning at a certain width two elements will be on top while one is on bottom. This isn't any of the desired conditions.
.div-a {
background-color: red;
}
.div-b {
background-color: blue;
}
div {
display: inline-block;
font-size: 4em;
}
<div class="div-a">
L
</div>
<div class="div-b">
Mid
</div>
<div class="div-a">
R
</div>
How can we make sure that either all blocks are stacked, or they are all inline? Remember the middle element will always be unknown width.
EDIT: Don't know why this was marked as duplicate, as I didn't even ask about media query resizing, that's just one of the solutions.
it depends on your viewport and elements width. as you put display inline element in div all div will be treated as an inline element. until you apply any new display property in any specific div. to make sure it comes to stacked, you can use display flax property.
Please read this article. Hope it will help you.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
use display flex to stay in one row and manage dynamically width middle element
<div class="a">
<div class="div-a">
L
</div>
<div class="div-b">
Midghghghghchcghgdc
</div>
<div class="div-a">
R
</div>
</div>
css
.a {
display:flex;
}
.div-a {
background-color: red;
}
.div-b {
background-color: blue;
}
div {
display: inline-block;
font-size: 2em;
}
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 3 years ago.
I have a <div> containing child <img> element:
<div class="wrapperdiv">
<img src="blob" class="myimg">
</div>
Now, I want the <div> to have the same height as <img>.
More elaborately, my goal is to have div with img inside to have exactly the same position as if there was only img without wrapper div!
I've tried setting height: auto to the <div>, but while it sets the height to roughly same as <img>, it is larger by 1 pixel, and I'd like them to absolutely equal.
#Justin Trevein, I have prepared one working demo on the basis of comment provided by #fcalderan. I hope this will be helpful.
This DEMO is related to show only Height, and not a width.
.wrapperdiv {
background-color: green;
}
.wrapperdiv img {
display: block;
}
<div class="wrapperdiv">
<img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" class="myimg"/>
</div>
Thanks, Jignesh Raval
set css :
.myimg { display: block ;}
and
.wrapperdiv { height: unset;}
This question already has answers here:
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Closed 6 years ago.
EDIT. The question is reworded as suggested by #Aziz in his comments. It was previously asking about achieving the same effect with inline-block, which seems impossible, see the answer to
CSS when inline-block elements line-break, parent wrapper does not fit new width. The new question asks how else this effect can be achieved, so it is no more duplicate.
I have a parent row container with two child columns. I want each of the children to wrap their text content and then shrink to fit their width after the wrapping.
The example below almost achieves this effect:
.parent {
display: inline-block;
}
.child {
max-width: 180px;
display: inline-block;
border: solid thin;
}
<div class="parent">
<div class="child">
I am child with loooong text.
</div>
<div class="child">
I am child with loooong text.
</div>
</div>
Here is a Demo
The only problem is that each child does not completely shrink to fit its content. There is clear white space gap on the right of the text inside each child.
To achieve your desired effect, you just need to make sure that .child is a block element. that way it will occupy the parent's width and wrap the rest under it.
.parent {
border:1px solid red;
display: inline-block;
}
.child {
border:1px dashed red;
}
<div class="parent">
I shrink to content slightly longer
<div class="child">
incl.Child
</div>
but not enough!
</div>
https://jsfiddle.net/azizn/021xqwo4/
Here is my Question I have an HTML like this
<div class='A'>
<div class='B'>Hello World</div>
This div Height is more than first one due to the content size
</div>
now I want to get the height of Parent div with class 'A' and that height has to be given to the div with class 'B'
only using CSS3. is it possible? Some-body please help me.
Thank you...
CSS is not a programming language so, no, you cannot do this as you state it.
As mentioned before CSS is not a programming language you cannot achieve that with it however you can use jQuery instead:
$(document).ready(function(){
$(".B").css("height", $(".A").height());
});
Or you can do this with CSS:
.A {
height: 300px;
}
.B {
height: inherit;
}
If you're explicitly setting the height of the parent, you can set the child's height to be 100% to achieve this effect. View on JSFiddle.
css
#parent {
background: #eee;
height: 200px;
}
div div {
background: #aaa;
height: 100%;
}
HTML
<div id="parent">
<div>lalala</div>
</div>
If you're not explicitly setting the height, you'll need to specify the question more. Divs are block level elements and want to take up an entire row to themselves. The code you posted will result in the child div and the text of the parent being on different rows. Because of that, it's hard to know what height you're looking for...maybe if the parent just had text? And then, what do we do with the div in relation to the text? Overlap it? Or push the div out the bottom of the parent?
If you want to set the same height to upper and to lower text
You can add to parrent
.A
{
display: table;
}
And you can add to child
.B
{
display: table-row;
}
PROBLEM: cannot stack floats with CSS only.
In the example http://jsfiddle.net/9YQXP/7/ I have 3 divs whose width is 35% of its container. I will not know in advance the height of each div but I'd like the third div to stack right beneath the first one.
HTML
<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>
CSS
div {
text-align: center;
float: left;
width: 35%;
border: 1px solid #000;
}
#a1, #a3 {
height:20px
}
#a2 {
height:30px
}
OTHER ANSWERS: a similar question (Float stacking css) has been answered with a link to http://masonry.desandro.com/. However, it has been answered with a javascript solution and I too would prefer CSS only (or a working example with masonry).
This can't be done with CSS alone. Per the specs for floats:
5) The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the
source document.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
CSS - Equal Height Columns?
I need to have my container with a kind of elastic height if possible, and if not I just want my menu in sidebar height, to get the same height as the video container, as it is described here:
http://clientes.ivopereira.net/nocktv/
Any ideas how to get this done? I've tried to mix the two columns (the sidebar and the video container) into one, and tried to specify a height of 100% so therefore the div left (the column left) could maximize itself as the maximum as it cans.
Any suggestions?
You can't actually achieve "equal height" columns. The closest workaround that I normally recommend to use is using the Faux Columns technique.
However, looking more closely at your example link, it looks like you want your sidebar to be aligned to the bottom, not the top. I threw together a quick example of how you might want to achieve this effect. You can combine it with the Faux Columns technique as well. I'm assuming you have some proficiency in HTML and CSS, but feel free to ask any questions if you need help.
HTML:
<div id="container">
<div class="sidebar">
</div><div class="main">
</div>
</div>
CSS:
#container {
white-space: nowrap;
text-align: center; }
#container > div {
white-space: normal;
text-align: left;
display: inline-block; }
.sidebar {
background: red;
width: 200px;
height: 100px; }
.main {
background: blue;
width: 300px;
height: 200px; }
Preview: http://jsfiddle.net/Wexcode/8SnGS/
Just use display: table and table-cell: http://jsfiddle.net/8BXGD/