3

I got stuck on one of the simplest things ever... I can't see what is wrong and why my paragraph's text won't overflow the button container (located in bottom right corner of the wrapper).

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

Code to go with it: 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 to be obvious enough: enter image description here

This is what I'm aiming for.

Entalpia
  • 757
  • 9
  • 21
  • 2
    So what do you want to overflow? The text in the button? The button in the .what-box or the text inside the .what-box itself? – Erik Terwan Nov 27 '14 at 13:48
  • 3
    My crystal ball tells me [this](http://jsfiddle.net/webtiki/8q7cexL9/4/) is what you need. – web-tiki Nov 27 '14 at 13:49
  • 1
    Possible duplicate of http://stackoverflow.com/questions/499829/how-can-i-wrap-text-around-a-bottom-right-div - this suggests it's only possibly possible using javascript – Rhumborl Nov 27 '14 at 14:29

3 Answers3

1

You can arrange the 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/
Swapnil Motewar
  • 1,080
  • 6
  • 12
  • But I don't want to have it arranged this way... I did say, I want the button to be in the bottom right corner and I want the paragraph text to overflow it on the left side. – Entalpia Nov 27 '14 at 14:31
0

Hope this is what you need.

position: absolute;

instead of

position: relative;

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

Sridhar DD
  • 1,972
  • 1
  • 10
  • 17
0

The floated element will usually make the text wrap around it, only when the text appears after the floated element. In your case, the text does not wrap around the div (with a class of button) because this div appears after the text in the mark up.

If you edit your mark up to make the floated element appear before the text, then this will solve your issue. For example - If you just move the button div before the second paragraph, it will give you the desired behavior.

Don't change any of your styles. Just edit the mark up like the following. And it will fix the issue.

<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>
Vik
  • 106
  • 2
  • 11