Wrapping some, but not all, text around an image - html

I'm trying to get a layout similar to this one below:
The problem is that I can't seem to get the headline to not wrap but the paragraph to wrap. Here's what I've tried so far:
Floating. I've floated the image right, but that wraps everything. Tried floating the text left, that didn't seem to fix the issue. Tried white-space nowrap, this was very close, only I couldn't set a width at all to the headline so it just fell off the page.
Fixed paragraph width. Setting a fixed width to the paragraph doesn't work because I need it to wrap below the image. I also can't do to paragraphs, as I need this to be responsive and not have a gap between the two paragraphs as the text expands horiztonally to fill more space.
Contenteditable = true. I used a combination of an empty container set to the size of the image and to float and contenteditable = "true" on the paragraph. This by far got me to the closest outcome, although I ended up in trouble because I have a series of about 4 blocks of these on a page, each with a different amount of content. This meant that placing the float container directly over the image is nearly impossible. To keep the wrap, as well, I can't set the container to position: absolute. Also, the container has to be directly next to the paragraph to work, which makes positioning that much more challenging.
I think I either need a solution to get that container div to always be in the exact same place as the image, or a solution to wrap the paragraph but not the header. I'm open to any and all solutions at this point. Here's a sample of what the DOM looks like for each one of these sets:
<div class="box"> <!-- container for the chunk -->
<img src="" />
<div class="box-txt"> <!-- container for the text so that I can position it on top of the image -- I've tried removing this and run into more positioning challenges -->
<h2>This is the headline that shouldn't wrap.</h2>
<div class="imgblock"></div> <!-- this element empty and set to float -->
<p contenteditable="true">This is the paragraph that I need to wrap.</p>
</div>
</div>

You simply have to position the floated element directly before the text block, after the header (as you already did in your code example). Then a float: right; will work the way you describe it:
.box {
width: 600px;
}
.imgblock {
width: 300px;
height: 300px;
background: #ddd;
float: right;
}
<div class="box">
<!-- container for the chunk -->
<img src="" />
<div class="box-txt">
<!-- container for the text so that I can position it on top of the image -- I've tried removing this and run into more positioning challenges -->
<h2>This is the headline that shouldn't wrap.</h2>
<div class="imgblock"></div>
<!-- this element empty and set to float -->
<p contenteditable="true">This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need
to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph
that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap.</p>
</div>
</div>

Related

How should I set up multiple floating boxes with pictures inside and text around?

I want to create a floating box on the right and put a picture inside it.
And I want to paragraph to be on the left of it and - when it's long enough - below the picture too. And additionally to this I want to put another floating box with a picture inside on the left side a bit more downside. And let the text inside the paragraph also go around it.
So first I managed to do now I created the first part with a floating box on the rigt and text around. But how can I put another picture below in a floating box on the left now and address it separately in CSS?
HTML:
<body>
<div class="picture">
<h1>this is the first heading</h1>
<p><img src="Images/car.jpg" alt="car">sample
<img src="Images/car2.jpg" alt="car2">
</p>
</div>
</body>
CSS:
div.picture img {
float: right;
width: 300px;
height: 200px;
}
I think your issue is that the <p> tag is a block-level element, so your floating <div> is sitting below it. If you style your paragraph to be inline-block, for example, you should get what you're looking for.
But you should be able to just put your img directly in your paragraph, and float it to the right, and then the paragraph should flow around the image as necessary.

inline paragraph element with line break does not remain inline

So my issue is as follows.
I have a div that contains both an image and a div (which contains text). The text contains a title and additional content, separated by a line break. See below or my attached codepen for an example.
<div class="outer">
<img src="something.com/pic.png">
<div class="inner">
Title<br>Additional text.
</div>
</div>
Here is my code pen
When I apply display styling of inline to the inner div, the title is inline with the bottom of the image and the text following the linebreak is below the image. Furthermore, if I wrap the text in paragraph tags, all of the text is below the image.
I would like the title to appear at the top and to the right of the image, and all content of the inner div to remain at that alignment, even if the text extends past the height of the image. Furthermore, in the future I will be adding a div with an additional image and more text inside the inner div beneath the text that is already present, and I wish for that content to maintain the same alignment.
Here is my end goal:
And my desired html structure:
<div>
<img>
<!--Start right indent (from top right of image) -->
<div>
<p>Title<br>text</p>
<div>
<img>
<div>
<p>Title<br>text</p>
</div>
</div>
</div>
<!--End right indent -->
</div>
It appears I have found the solution.
.post img{
display:inline-block;
vertical-align: top;
}
.post_content{
display:inline-block;
width: 90%;
}
My codepen: Code pen

Fluid width for container of inline, non-wrapping elements

I'm having a little CSS trouble.
I have some div elements structured like the following example. There are a dynamic number of class="block" divs, each with a fixed width:
<div class="outer-container">
<div class="inner-container">
<div class="block">text</div>
<div class="block">text</div>
<div class="block">text</div>
<!-- More "block" divs here -->
</div>
</div>
My goal is to find a CSS-based solution that will.
Display the class="block" divs inline, without them wrapping to new lines.
Support a variable number of class="inner-container" divs like the one above, each displayed as its own line.
Have the outer container fluidly "shrink-wrap" to match the width of its contents.
Any suggestions?
Not 100% sure if this is what you're looking for, but it might be a start:
http://jsfiddle.net/r4dEX/3/
By setting each block element to display: inline-block and white-space: nowrap, it should allow the elements to sit alongside each other, but not wrap to a new line if the content is longer than the available space (instead the block will move to a new line).
Each inner-container will display on its own line (display: block is default behaviour for a div).
Setting the outer container to display: inline-block will cause it to 'shrink wrap' to fit its content.
Here is an example where the blocks are inline, the inner-containers have a fixed width, and the outer-container is shrinking to fit.

Keeping text inline

I have an image that is floated to the left and then some text to the right of the image. However the text is just long enough that one line of a paragraph goes below the image. How to I keep this text inline with the paragraph and keep it from wrapping around the picture?
If you don't want to worry about knowing and setting any widths, you can do this by establishing a new block formatting context for the text container.
i.e. For the markup:
<img src="image.jpg">
<p>Some text
all you need do is give the <p> element an overflow other than "visible". For example:
p { overflow:auto; }
Use a little bit of margin-right on the <img> to separate the text from the image.
If your image is floated to the left, the trick is to have a margin-left of at least the width of the image for whatever element your text is contained in.
For example, if your HTML is something like:
<img src="image.jpg">
<p>Some text
And the width of your image is 160px, you have to give your paragraph a margin-left of at least 160px (it does look nicer if you give it margin-left that's slightly bigger than 160px).
That's all you need to do after you have floated the image, just set the margin-left on the paragraph following it. You don't even need to specify a width for the paragraph.
Demo http://dabblet.com/gist/2791183
You need to the float the image element and the text element separately. I think you also need to specify width for both elements.
<img src"url()" style="float:left; width:100px;">
<div id="text" style="float:left; width:500px;">Words</div>
If you do not place your text in another block element, then it will always wrap around that other floated element. The way floats work is it takes an element out of the "document flow", here's some more specific information on how floats work. The only way to get your text to not wrap is to also place it inside of a block element (like a div tag) and float that element with the floated image to the left.
Example:
<div style="overflow: auto;">
<img src="hello.jpg" style="float: left; width: 200px;">
<div style="float: left; width: 700px;">
Hello!!!
</div>
</div>
The first overflow: auto will declare a height for the container. It's the same concept as adding clear: both in a div tag underneath the image and text div. Remember to always clear your floats! :)

Stopping text from wrapping around image

I am destroying my mind trying to get this styling done right. I have a fixed size image with an unpredictable height div of text to the right of it. I want the top of the text to line up with the top of the image but to NOT wrap around it. My markup is:
<img height='231px' width='132px' style='float:left' />
<div>Text</div>
I would like to find a solution that doesn't involve using a table, but at the moment I am drained and can't think about how to do it with css/divs
This should do the trick.
<div style="margin-left: 132px">Text</div>
To have space between the text and the image, make the margin larger or add a padding-left.
DanielB's answer nails it, but I just like giving alternative solutions; never know if it might come in handy. You could put the image and the div into a container with a fixed width, set a fixed width on the image and div that adds up to the container's width, and float the div as well.
<div id="container">
<img height='231px' width='123px' style='float:left' />
<div>Text</div>
</div>
#container div
{
float:left;
width: 123px;
}
#container {
width:246px;
}
http://jsfiddle.net/thomas4g/A7ZHg/3/