CODEWITHSUNDEEP
imagecssreactjsword-wrap
user3622460
user3622460

Reputation: 1251

Why is my text still wrapping under a floated div?

I have a render component which renders out some text and an image. The component is a DIV containing two divs. The first div contains an image, this div is floated to the right. The next div contains various text strings. I have overflow: hidden on the parent div, but my text is still wrapping around the div containing the image. The only way I can fix this currently is by setting the height to 100% for the div containing the image. However, if I do this I can't add a border / background to this div because it extends the entire page.

In short, I have a div containing two divs. I want my text in a column, and the image in the other. I do not want the text to wrap under the image. I've visited the other text wrapping questions, but overflow hidden or adding span tags doesn't seem to be solving my problem.

Below is the render function and the SASS/CSS that goes with it.

render() {
        const renderHelpFile = this.props.data.filter(obj => {
            return this.props.name === obj.name;
                }).map((obj, idx) => {
                return (
                    <div key={idx} className="fadingDiv">
                        <div className="divImg">
                            <img src={`${obj.image}`} className="helpFileImg"></img><br />
                        </div>
                        <div className="displayLineBreak">  
                            <h3 style={upperStyle}> {obj.name} </h3>
                            <b>Path:</b> {obj.path} <br /><br />
                            {obj.content} <br /><br />
                            <b>Troubleshooting:</b> {obj.troubleshoot} <br /><br />
                            <b>Video:</b> {obj.video} <br />
                        </div>
                    </div>
                );
        });

css

.fadingDiv {
    text-align: justify;
    overflow:hidden;

    -webkit-animation: divFadeIn .75s ease-in forwards;
    animation: divFadeIn .75s ease-in forwards;
}

.displayLineBreak {
    white-space: pre-line;
}

.divImg {
    width: 35%;
    float: right;
    padding: 5px;
    background: #0080ff;
    border: 2px solid black;
    border-radius: 2px;
    //height: 100%;
}

.helpFileImg {
    width: 100%;
    height: auto;
}

Upvotes: 0

Views: 1324

Answers (1)

Johannes
Johannes

Reputation: 67748

That's how float is supposed to work - text "floats" around it.

Instead of using float, you could either define both containers as inline-block, with according widthsettings, or you could put display: flex on the container element.

If you know the width of the image, you can use that for a fixed width on the image container and use calc for the width of the text container, like width: calc( 100% - XXpx );, where XX stands for the width of the image.

Upvotes: 1

Related Questions