Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2008
    Location
    Portland, OR
    Posts
    82
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Getting middle column up

    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?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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 -
    Code:
    
    <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
    Code:
    #print {
    background: url('../img/tiskarnicka.gif') no-repeat 0 80%;
    padding-left: 26px;
    }
    
    .indent{
    margin-left: 40px;
    }
    #lone {
    width: 300px;
    float: left;
    }
    #middlecolumn{
    width:300px;
    float: right;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Sep 2008
    Location
    Portland, OR
    Posts
    82
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

    http://emilydickinson.us

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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%20...ion/index.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •