Clever Geek Handbook

Text doesn't overflow floating div

I'm stuck with one of the simplest things ... I can't see what is wrong and why my paragraph text won't overflow the button container (located in the lower right corner of the wrapper).

JS Fiddle link here: http://jsfiddle.net/8q7cexL9/1/

Code for this: HTML

<div class="what-wrapper">
    <div class="what-box">
        <h1>What we do</h1>
        <p class="what-text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quiss nosstrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute r in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
        </p>
        <p class="what-text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore mauis aute r in enderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. gna aliqua. Ut enim ad minim veniam, quiss nosst eu fugiat nulla parruduis aute r in reprehen eu arderit in voluptate velit.
        </p>
        <div class="button">Explore our facilities</div>
    </div>
</div>

CSS

.what-box {
    border: 1px solid #ededed;
    padding: 3%;
    width: 80%;
    position: relative;
    margin: 0 auto;
    border-radius: 15px;
    overflow: auto;
}

h1 {
    font-size:30px;
    color:red;
}

p.what-text {
    font-size: 13px;
    padding: 1% 0;
}

.button {
    font-size: 20px;
    color: #00396F;
    border: 1px solid;
    border-radius: 5px;
    padding: 2%;    
    float: right;
}

Thanks for any help, E.

e: Since it doesn't seem obvious enough: enter image description here

This is what I was aiming for.

+3


source to share


3 answers


You can arrange text and images in this format

text text text  ------------
text text text  | button   |
text text text  |          |
text text text  ------------
text text text text text text
text ...


This is good formatting. For this you can check

http://jsfiddle.net/swapnilmotewar/4adprz48/
+1


source


Hope this is what you need.

position: absolute;

instead



position: relative;

in .what-box. Here is a link http://jsfiddle.net/8q7cexL9/1/

0


source


A floating-point element typically wraps text around it only when the text appears after the floated element . In your case, the text does not wrap around the div (with the button class) because that div appears after the text in the icon up.

If you edit your label to make the element float in front of the text, this solves your problem. For example, if you just move the div button in front of the second paragraph, this will give you the behavior you want.

Don't change any of your styles. Just edit the mark as follows. And that will fix the problem.

<div class="what-wrapper">
    <div class="what-box">
        <h1>What we do</h1>
        <p class="what-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quiss nosstrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute r in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        <div class="button">Explore our facilities</div>
        <p class="what-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore mauis aute r in enderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. gna aliqua. Ut enim ad minim veniam, quiss nosst eu fugiat nulla parruduis aute r in reprehen eu arderit in voluptate velit.</p>
    </div>
</div>
0


source






More articles:


All Articles