how to set two div’s height equal with css
I want to make to 2 div ‘s height equal, if one is bigger another should stretch to its height. I want to use only CSS . Following is my code(Fiddle): HTML:
lorem ipusm random text just for check lorem ipusm random text just for check lorem ipusm random text just for check It looks like they would have to be contained by a common container and being resized according to that container. For example, inside an invisible div, and have their dimensions set to a percent of the containing div.
3 Answers 3
You can use the flexbox model. Just add a container for the divs. And add display: flex to the parent, and flex: 1 for children.
I think you should either use table:
var maxHeight = 0; $('.common').each(function() < var height = $(this).height(); if(height >maxHeight) < maxHeight = height; >>) $('.common').each(function()< $(this).height(maxHeight); >) flexbox = cool, table = browser support. for your example I would use table. stackoverflow.com/questions/18419082/…
The CSS property that controls the height of the elements is called height.
the height property does not support negative values. If a percentage is indicated, draws on the height of the parent element. If the parent element does not have an explicitly defined height, the auto height value is assigned.
The inherit value indicates that the height of the element is inherited from its parent element. The auto value, which is used if not explicitly set a value for this property indicates that the browser should automatically calculate the height of the element, considering its content and available on the site.
CSS defines two other related properties of the elements height: min-height and max-height.
Linked
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
How do I make a div have the same width and height of its content?
Let’s say I have an img element inside a div , how do I make the div have the same width and height of its content using CSS?
5 Answers 5
Floating the div would make it shrinkwrap and so the div would only have room for the content inside.
You will probably need to use clear on the elements coming afterwards.
Another way would be to use inline-block .
+1 Misread the question, thought he’s trying to get a child to fill the parent. Gonna delete that comment, shorty after this one too 🙂 haha
does inline-block work in most browsers? I’ve never really used it becuase I’ve been unsure about it.
IE supports inline-block on natively inline elements, you need to declare display:inline; afterwards for IE only on native block levels.
I thought that inline-block had limited browser support (i.e. I thought it was pretty much limited to IE), but I just tested your example on Safari (webkit) and Firefox, and it works like a charm. . Been doing this for years — learn something new every day. Thanks Sammy!
@Lee you’re right. I just tested it in IE6, 7 and 8 and the width wasn’t constrained to the size of the image inside in all three. Oh well, never really felt a need to use this myself.
By default, the div will have the same height — unless you restrict it somehow, or add padding or margin. But the default width will fill the available space. If you want the width to collapse down to «shrink-wrap» the content, you’ll either have to float it, or make it absolute positioned.
The problem with this (depending on your needs) is that both of those effectively take it out of the normal layout. If you need it to still be part of the normal layout, you’ll have to do something like this (the borders are included so you can tell what’s going on):
#a < position:relative; border: 1px solid green; >#b Top asdf
typewriter fdsa Bottom The outer div #a works like a normal div. The important part here is that #a is position: relative . That sets up a positioning context, within which #b will float. This «double-wrapped» approach will let the div still work within the layout like a «normal» div, while allowing you to «sniff» the width/height from #b via Javascript, if you need it.
So. it depends on what your needs are — but this should set you in the right direction.
Same height for div’s
I want that 3 div’s are having the same height. Picture HTML
.more-bottom < padding: 4em 0; background: #DCEDF9; >.more-bottom-grids < margin: 4em 0 4em 0; height: 10px; >.more-bottom-grid-img img < width: 100%; >.more-bottom-grid-info < background: #FFF; padding: .5em; >.more-bottom-grid-text < padding: 1em; >.more-bottom-grid-text h5 < margin: 0; font-size: .875em; color: #383838; line-height: 1.8em; >.more-bottom-grid-text p
Stadhuis
Korte Minrebroederstraat 2, 3512 GG Utrecht
Stadskantoor
Stadsplateau 1, 3521 AZ Utrecht
The Wall
Hertogswetering 183, 3543 AS Utrecht
How do I get the same height for these 3 blocks? This is on my website, so if you want to you can see it live here. I have tried to change some things by the img with specific height, but it didn’t worked yet.
HTML/CSS: Making two floating divs the same height
I have a little peculiar problem that I currently solve using a table , see below. Basically, I want to have two divs take up 100% of the available width, but only take up as much vertical space as needed (which isn’t really that obvious from the picture). The two should at all times have the exact same height with a little line between them, as shown.
(source: pici.se) This is all very easy to do using table , which I’m currently doing. However, I’m not too keen on the solution, as semantically this is not actually a table.
14 Answers 14
You can get equal height columns in CSS by applying bottom padding of a large amount, bottom negative margin of the same amount and surrounding the columns with a div that has overflow hidden. Vertically centering the text is a little trickier but this should help you on the way.
#container < overflow: hidden; width: 100%; >#left-col < float: left; width: 50%; background-color: orange; padding-bottom: 500em; margin-bottom: -500em; >#right-col < float: left; width: 50%; margin-right: -1px; /* Thank you IE */ border-left: 1px solid black; background-color: red; padding-bottom: 500em; margin-bottom: -500em; > Test content
longer
Test content
I think it worth mentioning that the previous answer by streetpc has invalid html, the doctype is XHTML and there are single quotes around the attributes. Also worth noting is that you dont need an extra element with clear on in order to clear the internal floats of the container. If you use overflow hidden this clears the floats in all non-IE browsers and then just adding something to give hasLayout such as width or zoom:1 will cause IE to clear its internal floats.
I have tested this in all modern browsers FF3+ Opera9+ Chrome Safari 3+ and IE6/7/8. It may seem like an ugly trick but it works well and I use it in production a lot.