Q:

Float 3 divs next to each other and stack on smaller screens

I have searched the forum and tried numerous ways of doing this based on current answers but nothing seems to work how I need it to so any help is GREATLY appreciated as I am pulling my hair out!
I am working in Joomla 3 and have created a custom html module to display a download with sign up form.
I need to have some text on the left, the sign up module I am calling with Modules Anywhere in the center and an image on the right, so like this:
Text  |  Module  |  Image

And then on small screens it should stack so like this:
Text
Module
Image

The code I have which isn't working is:

<div style="float: left;">Blah blah blah</div>
<div>{module Newsletter Signup}</div>
<div><img src="images/content/ebook.png" alt="ebook" width="150" /></div>

I would like to have the spacing as a percentage so it looks nice and even on all screen sizes when in horizontal view.
Thanks in advance for any advice

A:

To have a different layout at a certain breakpoint, you'll need CSS media queries:
HTML
<div class="row">
  <div class="col">
    blah blah blah
  </div>
  <div class="col">
    {module}
  </div>
  <div class="col alignImgRight">
    <img src="images/content/ebook.png" alt="ebook" width="150" />
  </div>
</div>

CSS
.row:after { clear: both; }

.row:before, .row:after {
  content: " ";
  display: table; }

@media (min-width: 768px) {
  .col { 
    float: left;
    width: 33.33333333%; }

  .alignImgRight { text-align: right; }
}

Of course you can change the breakpoint to whatever you want. In this situation the 1/3 width and float of the column will only apply above 768px screen width. Below that, the divs will take their default 100% width with no float (i.e. stacked). The .row parent element simply contains all the columns with a clear on it, so they don't all spill out and mess up layouts with the floats.
I would highly recommend look at Bootstrap as a responsive framework. It's an industry standard for handling layouts like this.

