How to Make a Div Expand Vertically to Wrap the Content Within It

How to make a div expand vertically to wrap the content within it?

The problem you're observing happens when you float an element, which takes it out of the normal flow of the elements (by normal flow I mean the way the elements would appear with no styling). When you float an element, the other elements still in the normal flow will simply ignore it and do not make room for it, which is why your block div does not extend the full height of your image.

There are a few different solutions:

1) Add the rule overflow: hidden; to the block class:

.block { overflow: hidden; padding:10px; margin-top:10px; height:auto; background-color:#f9f9f9; }

2) Add a element after your image that clears the floating:

<div class="block">
<div style="float: left; padding: 2px 2px 2px 2px;"><IMG SRC="images/login1.png" BORDER="0"/></div>
<div style="clear: both;"></div>
</div>

Both will work, but I prefer the first solution.

How do i make the text in this div expand vertically?

You could try adding the CSS rule
word-wrap: break-word;
Though, the results may look odd.

How to expand a DIV vertically without affecting other DIVs around?

Not sure if this is what you're looking for.

.thumb{
float:left;
margin:5px;
}

#gallery{
width:850px;
display: flex;
flex-wrap: wrap;
}

How to make wrapped div expand to full width

Use media query. Go to Inspect Element and check on exactly which screen size does the change occur.

Say for example, if it was at 500px, then do something like this:

@media screen and (max-width: 500px) {

#div_name {
width: 100%;
}

}

So, what that does is when anything below 500px or another way to think, when something goes below 500px, that #div_name becomes 100% width.

Try and see if this works for you.

how to make a div expand to wrap a dynamic content in css

You have a couple of little problems here :)

First: You have set your height to a fixed value "1341px". Because you have set it to this value your div will never get higher than 1341px. You can use min-height if you want the div to only scale when the content gets bigger than 1341px.

Second: Your #Table is positioned Absolute. Wich means that the parent will always ignore the size of the #Table element when rendering.

i suggest you have a quick look at http://www.w3schools.com/css/css_positioning.asp for some more information on this toppic.

Try the following css:

#wrapperDiv {
position: absolute;
width: 100%;
height:1341px;
left: 0px;
border: 5px solid #408080;
overflow:hidden;}

#Table {
position: relative;
float: left;
width: 940px;
height: 319px;
margin-left: 409px;
margin-top: 215px;}

Happy coding :)

Make parent div expand beyond window to wrap all children

You could set the value of the width on the container div to: width: fit-content; (with additional vendor prefixes, like in the example below)

Here's the working example:

div > div {  width: 200px;  flex-shrink: 0;  height: 200px;  background: red;}
body > div { display: flex; flex-flow: row nowrap; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content;}
<div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div></div>

Wrap text inside a div instead of expanding it

try overflow:

some attributes:

visible | hidden | scroll | auto | inherit

Div expand to size of certain content

So the answer to both of these questions, it seems, is that you cannot do this without javascript. The reason being that the CSS box model just does not work in this way.

In order to solve just the first problem you need to use absolute positioning like I tried but then use javascript to create a space for the element using a margin on the h1, something like this:

$(document).ready(function() {
function alignDescriptions() {
var pmargin = 10 * 2;
$('.abs').each(function() {
var pheight = $(this).height();
$(this).css('bottom', pmargin);
$(this).siblings('h1').css('margin-bottom', pheight + pmargin);
});
}
});

That solves the vertical centering issue when using absolute so problem 1 is fixed.

To solve the second problem, the following answer provides one solution: https://stackoverflow.com/a/33246364/7542390

I believe simply using this but also using the width of the span as a minimum would probably solve both problems as I would be literally forcing the width to the correct size so having a 75% width p element wouldn't be a problem.

It's a shame that this kind of functionality isn't in the CSS spec.

EDIT: As suspected, an adaption of the second option actually removes the need for absolute positioning of the p element. Here's the jQuery code that worked for my actual case:

$('h1').each(function() {
// references to elements
var hElem = $(this);
var pElem = hElem.siblings('p');
var sElem = hElem.siblings('span');
// store starting values
var sWidth = sElem.width();
var hHeight = hElem.height();
var hWidth = hElem.width();
// reduce width until less than span width
// or until height of h1 changes
for (var testWidth = hWidth - 1; testWidth > 0; testWidth--) {
if (testWidth <= sWidth) {
testWidth = sWidth - 1;
break;
}
hElem.width(testWidth);
if (hElem.height() !== hHeight) break;
}
// set h1 width
hElem.width(++testWidth);
// if h1 still overflows (long word) use that instead
if (hElem[0].scrollWidth > hElem.width()) {
testWidth = hElem[0].scrollWidth;
hElem.width(testWidth);
}
// set p element to 75% width
pElem.width(testWidth * 0.75);
});


Related Topics



Leave a reply



Submit