Need layout help

April 10, 2009 2:59 PM

I'm trying to puzzle out a change I'd like to make to this page (and its brethren) on my website.

Basically, I'd like the EXIF block to come up to the top, essentially like a second column to the text. In other words, what I have now is



texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttex
texttexttexttexttexttexttexttexttexttexttext

EXIFEXIFEXIFEXIFEXIFEXIF
EXIFEXIFEXIFEXIFEXIFEXIF



and what I'd like is:



TextTextTextTextTextTextText EXIFEXIFEXIFEXIFEXIFEXIF
TextTextTextTextTextTextText EXIFEXIFEXIFEXIFEXIFEXIF
TextTextTextTextTextTextText EXIFEXIFEXIFEXIFEXIFEXIF
TextTextTextTextTextTextText EXIFEXIFEXIFEXIFEXIFEXIF
TextTextTextTextTextTextText
TextTextTextTextTextTextText



What I can't figure out is where to change the templates.

The theme I'm using is Grain off of SourceForge.

Any ideas?

posted by pjern to Computers & Internet (3 answers total)

Best answer: In your CSS, change:

#infotext-frame {
     margin-bottom:10px;
}

to:

#infotext-frame {
     margin-bottom:10px;
     float:left;
     width:550px;
}

The float line makes the infotext-frame div float to the left and causes the exif-frame div float up next to it. The width line narrows the infotext div so there's room for the exif-frame div to do that. You may want to specify the width of the EXIF div too, just to be certain both it and the infotext div fit side by side within their container div.
posted by The Michael The at 3:48 PM on April 10, 2009 [1 favorite]

By the bye, I tested it using Firebug and it looks as I think you want, though you may want to play with the width (575 or 600 may look better to your eye).
posted by The Michael The at 3:49 PM on April 10, 2009

Response by poster: Amazing! Exactly what I needed...Thank You!
posted by pjern at 4:09 PM on April 10, 2009