View Full Version : Getting middle column up

Nov 20th, 2009, 12:18 AM
I have this page: http://emilydickinson.us/media.html

How do I get the middle column's 4 photos up to be next to the left column photos?

the style is:

#middlecolumn {width: 300px; float: right;}

what do I add to move it up?

Nov 20th, 2009, 02:55 AM
Hello vinoman2,
Those images and captions should be floated so #middlecolumn can come up alongside. Easiest to put them in another div, like this (add the bits highlighted in red) -

markup -

<p>Below are several <strong>high-resolution photos</strong> for your use:</p>

<br clear="all">

<div id="lone">
<a href="img/ed-gestures.jpg"><img src="img/ed-gestures_thumbnail.png" alt="emily" width="149" border="0" height="135"></a><p>Pam as Emily</p>
<br clear="all">
<a href="img/ed-pamheadhi-res300dpi.jpg"><img src="img/ed-pamheadhi-res300dpi_thumbnail.png" alt="close up" width="150" border="0" height="111"></a><p>Pam color close up</p>
<br clear="all">
<a href="img/ed-pamheadshotbw.jpg"><img src="img/ed-pamheadshotbw_thumbnail.png" alt="Pam headshot b&amp;w" width="125" border="0" height="127"></a><p>Pam B&amp;W portrait</p>
<br clear="all">
<a href="img/ed-sceneryplan.jpg"><img src="img/ed-sceneryplan_thumbnail.png" alt="Scenery set" width="161" border="0" height="107"></a><p>Stage setting</p>
<br clear="all">
<!--end lone--></div>

<div id="middlecolumn"><a href="img/emilycandle.jpg"><img src="img/emilycandle_thumbnail.png" alt="" width="155" border="0" height="106"></a><p>Emily with candle</p>

<a href="img/emilyatdesk3.jpg"><img src="img/emilyatdesk3_thumbnail.png" alt="" width="150" border="0" height="106"></a><p>Emily at her desk</p>
<br clear="all">
<a href="img/emilypointing.jpg"><img sr

and the CSS

#print {
background: url('../img/tiskarnicka.gif') no-repeat 0 80%;
padding-left: 26px;

margin-left: 40px;
#lone {
width: 300px;
float: left;
float: right;

Nov 20th, 2009, 04:43 AM
Thank you. I'll remember this one. What would happen if you add another column, since I have a float left and float right, how would I add an additional column?


Nov 20th, 2009, 04:47 AM
Well, you've already got a 3 column layout... you'll run out of room pretty fast now unless you make your images smaller.

You should have a look at an image presentation I've worked out ... would work well for you I think - http://nopeople.com/CSS/thumbnail%20presentation/index.html