CODEWITHSUNDEEP
csscss-float
Jeff Klukas
Jeff Klukas

Reputation: 1357

Floating images to their own "column" without divs

I would like to recreate the look of the following page on my existing blog: http://jeff.klukas.net/bio/

The hallmark here is that we have two columns, images on the left and text on the right without the text wrapping underneath the images. Also, the images appear at vertical positions which place them in context with the text.

The current design uses Blueprint CSS with pairs of divs for each section of image and text. I'd like to create an adaptive design that crunches down to a single column for smaller browser widths, so the source (generated from Markdown) would look like:

<img src=img1.png>
<p>First paragraph...</p>
<img> src=img2.png>
<p>Second paragraph...</p>

Which would display on a narrow screen as:

------------
|img1      |
------------
First paragraph
------------
|img2      |
------------
Second paragraph

Or on a wide screen as:

------------  First paragraph...
|img1      |  more text more text
------------  more text more text
              more text more text
              more text more text
              more text more text.
------------  Second paragraph...
|img1      |  more text more text
------------  more text more text
              more text more text
              more text more text
              more text more text
              more text more text.

I can achieve most of what I want with the little I know of @media trickery, but I'm not sure if it's possible to achieve the wide-screen layout I want without messing with the html. Is this just a dream?

Upvotes: 3

Views: 3030

Answers (1)

Matt Gibson
Matt Gibson

Reputation: 38238

I think this should be possible, especially if you can determine or control the width of the images. On the example layout, they're all the same width, which should make life easier.

How about this: for the narrow screen view, simply leave the images as they are, and for the wider screen view, float the images left, but give the paragraphs a left margin wide enough to move them out of the image area, e.g.:

img {
  float: left;
}
p {
  margin-left: 400px; /* Or however wide your images are */
}

...and then just serve that using a conditional media query at the screen width you'd like the images to "pop out" at.

Here's a worked example. With kittens. Play with the width of the output area, and you should find the kind of effect I think you're looking for. When the column is narrower than 400px, the layout collapses into a single column. Works fine for me in Safari and Firefox; you may need a media-query-enabling shim to make older versions of IE work, but the layouts should still work fine in it.

Upvotes: 6

Related Questions