Set div to the width of content with max width

Question

I have a div that contains a float left image and then text. It does the following.

.outer-div {
  max-width: 95%;
  background-color: yellow;
  display: inline-block;
}
.image {
  float: left;
}

<div class="outer-div">
  <img class="image" src="http://www.w3schools.com/images/colorpicker.png">
  <div class="test">Here is some text that I want the outer div to size to without line-breaking.</div>
</div>

Note, how it creates the outer div size based on the text alone and then it inserts the floating image, causing the text to wrap. I want the outer div width to be the width of the floated image + the width of the text, and then only line-break when it reaches the max-width of 95%.

EDIT: I also don't want ALL of the text to go below the image once the first line reaches the edge of the page. However, when there is a lot of text, I do want it to wrap under the image.

score 2 · Answer 1 · answered Mar 24 '16 at 03:48

2

You can use flexbox to achieve that, see the example below:

jsFiddle

.outer-div {
  display: inline-flex;
  align-items: flex-start;
  max-width: 95%;
  background-color: yellow;
}

<div class="outer-div">
  <img class="image" src="http://www.w3schools.com/images/colorpicker.png">
  <div class="test">Here is some text that I want the outer div to size to without line-breaking.</div>
</div>

answered Mar 24 '16 at 03:48

Stickers

75,527
23
147
186

That works for the first problem where it breaks. Now I just need it to wrap under the image when it has a lot of text, instead of leaving a large gap under the image. This is what your solution currently does: https://jsfiddle.net/5qhce5f6/1/ Any ideas? – Danegraphics Mar 24 '16 at 20:57
@Danegraphics You're basically upsetting people, who helped you to solve your initial question. Please post a new one for the different question. Unaccept it won't help you. – Stickers Mar 24 '16 at 21:29
I apologize. What do you mean 'the different question'? – Danegraphics Mar 24 '16 at 21:35
@Danegraphics You said clearly above "I also don't want the text to go below the image once the length reaches the edge of the page.", now you changed your mind looks like, that is a different question. – Stickers Mar 24 '16 at 21:37
Oh! What I meant was I didn't want ALL of the text to go below the image once the first line reaches the edge of the page. I do want it to wrap under the image though. I sincerely apologize for the confusion, I'll clarify that in my question. – Danegraphics Mar 24 '16 at 21:39

score 1 · Answer 2 · answered Mar 24 '16 at 03:28

1

Using "inline-block" on the test DIV should set it to align next to the other block. Add the following to your CSS section and you should be good.

.test {
display: inline-block;
}

Then you can add the following if you wanted it to be centered at the top rather than the bottom:

vertical-align: top;

Hopefully this helps you out! Best of luck!

answered Mar 24 '16 at 03:28

lovermanthing

61
1
1
7

This does the same as Jimmy's answer. When the text reaches the edge of the page, instead of wrapping, it jumps to below the image. I want it to wrap. https://jsfiddle.net/23v2odxu/1/ – Danegraphics Mar 24 '16 at 03:32
Aaahh.. I see what you're saying. Use Pangloss' answer. That's whatcha need. – lovermanthing Mar 24 '16 at 04:50

score 0 · Answer 3 · answered Mar 24 '16 at 21:07

A friend of mine was messing around and found the answer. The answer is to float the image inside the test div with the text. No changes need to be made to the CSS.

Example below:

.outer-div {
  max-width: 95%;
  background-color: yellow;
  display: inline-block;
}
.image {
  float: left;
}

<div class="outer-div">
  <div class="test"><img class="image" src="http://www.w3schools.com/images/colorpicker.png">Here is some text that I want the outer div to size to without line-breaking.</div>
</div>

Here is an example with a lot of text to verify that it wraps under the image.

.outer-div {
  max-width: 95%;
  background-color: yellow;
  display: inline-block;
}
.image {
  float: left;
}

<div class="outer-div">
  <div class="test"><img class="image" src="http://www.w3schools.com/images/colorpicker.png">Here is some text that I want the outer div to size to without line-breaking. And here is a ton more text to add to the post to show that it properly wraps around the image even with a ton of text.Here is some text that I want the outer div to size to without line-breaking. And here is a ton more text to add to the post to show that it properly wraps around the image even with a ton of text.Here is some text that I want the outer div to size to without line-breaking. And here is a ton more text to add to the post to show that it properly wraps around the image even with a ton of text.Here is some text that I want the outer div to size to without line-breaking. And here is a ton more text to add to the post to show that it properly wraps around the image even with a ton of text.</div>
</div>

Thanks to everyone who provided answers. Your answers will definitely help me with things in the future, so upvotes to you all. :)

score 0 · Answer 4 · edited Dec 24 '18 at 02:42

0

Try adding this to your code

width: fit-content;

edited Dec 24 '18 at 02:42

Ali

2,702
3
32
54

answered Dec 24 '18 at 00:57

Gabriel

87
1
6

2

would you like to explain your answer a bit, please? It is recommended to explain the code when answering the question. – Ali Dec 24 '18 at 01:02

Set div to the width of content with max width

4 Answers4