[Solved] Help with floating DIVS and paragraphs.

[ThomasAJ]

Hi all

I have a simple example at http://jsfiddle.net/ThomasAJ/R2Kzf/

If you widen your browser or drag the main divider left you will see the start of the text being shown between the 2 divs.

I want the text to START UNDER the yellow DIV and wrap under the blue div.

Any help much appreciated.

[Paulie_D]

You would have to re-structure the HTML

Blue div first – floated right
Yellow div (not floated)
Paragraph (not floated)

http://codepen.io/anon/pen/ChxsB

[ThomasAJ]

Many thanks Paulie_D works like a charm.

Sorry wolfcry but your solution has the text starting under the blue div. Not a wrap in site. At the risk of sounding ungrateful perhaps it would be wise to test solution suggestions – when practical of course.

[ThomasAJ]

Hi Wolfcry911 – yep definitely clear:left only.

Further, should anyone still like to help :) .

When the window is narrowed, the yellow box gets squashed. I have put all sorts of widths there but no good.

What I am trying to achieve is..

The yellow box to retain a fixed size (important info in it as well as the layout of the info).
The bluebox to retain a fixed size (ditto).
“Mary had a little lamb…” text to wrap as per post Paulie’s solution.

BUT…
No squashing of the yellow box.
Blue box to fall (BTW what term do CSSers use?) below “Mary had a little lamb…” text.

You see the web page will be converted to PDF for printing on 1 page so vertical space is at a premium hence the wrapping requirement.

http://jsfiddle.net/R2Kzf/4/

[Paulie_D]

The yellow box isn’t actually shrinking..its going behind the blue box but the content can’t do that…see: http://jsfiddle.net/LxM97/

Blue box to fall (BTW what term do CSSers use?) below “Mary had a little lamb…” text.

Here’s the problem…you’re asking for the blue box to come last in the screen order at a certain point/width when in neither of the examples does it ever actually do that in the HTML order.

It’s possible with flexbox but browser support is not that great for that at the moment

[ThomasAJ]

Thanks Paulie_D

Ah, I understand.

OK so perhaps a media query that makes the blue box disappear in current position in HTML and another exact same shape and content to appear below “Mary’s lamb” when the doc is narrowed past a certain point?

I’ll have a crack at the code tomorrow – it’s late in Aust. now.

[Paulie_D]

OK so perhaps a media query that makes the blue box disappear in current position in HTML and another exact same shape and content to appear below “Mary’s lamb” when the doc is narrowed past a certain point?

You could…but TBH that would be better managed by javascript to remove it and place it back in somewhere else.

[ThomasAJ]

Hi Wolfcry911 Well “I’ll be the monkey of an uncle”! I musta stuffed up. Sorry. I’m red-faced :)

(Aside: Interesting that a mild admonishment re no testing worked positively this time as you took up the challenge to prove me wrong and so I learned a little more. Thank you.)

2 final Qs (I think) Paulie_D what does the TBH acronym mean? How do I insert a quote from another post?

Cheers

[Paulie_D]

TBH =To Be Honest

To quote you can copy and paste, highlight text and press the Quote button.

Or just add a > in front of the text.

[ThomasAJ]

Hi there. As an exercise for me I was able to move the blue block below the paragraph using simple media queries. Maybe if things were more complex then jQ would be needed?

I do not know how to make it work at jsfiddle as the document is wider than the “window” the results are shown in.

CSS

.appear {
  display: none;
}
@media all and (max-width: 520px) {
  .appear {
    display: block;
  }
}
@media all and (max-width: 520px) {
  .disappear {
    display: none;
  }
}

HTML

    <div style="height: 600px; border: solid 1px";>

        <div class="disappear" style="float: right; width: 300px; height: 300px; background-color: blue;">
        </div>

        <div style="min-width: 200px; width: 200px; height: 200px; background-color: yellow;">

            Madam I'm adam. Madam I'm adam. Madam I'm adam. Madam I'm adam. Madam I'm adam. Madam I'm adam. Madam I'm adam. Madam I'm adam. 

        </div>

        <p style="margin-top: 5px;">Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb.  Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb. Mary had a little lamb.</p>

        <div class="appear" style="width: 300px; height: 300px; background-color: blue;">
        </div>


    </div>

[Author]

Posts