Divs and images and floats, oh my! (fairly basic CSS issue)

Discussion in 'Web Design and Development' started by cleo, Feb 16, 2008.

  1. cleo macrumors 65816


    Jan 21, 2002
    Tampa Bay Area, FL, USA
    I'm hardly a CSS n00b, but floating divs to create the look of old-school table layouts has always been a bit tricky for me to get my brain around.

    Here's what I want:

    A whole-page wide div with a border (check)
    Containing, from left to right:
    an image
    a chunk of text that consists of multiple paragraphs
    an image

    And, now here's the bit that I'm stumbling on, all of the above should be vertically aligned across the middle axis (that is, centered top-to-bottom) as well as horizontally centered (which is easy).

    If you can excuse my lack of artistry and use your imagination on the alignment (since it's far from perfect here, but close enough to get the idea):

    So how do I do this? I can't predict the height of the container div, so just using margins won't work. And I want the elements to be able to flow to accommodate the text as it (or the window) is resized. Back in the day I'd just do a table with three cells of width *, 50%, * respectively and valign the whole lot, but I just don't know how to handle it using CSS.

    Please help! You'll be my best friend... :D

    Damn, I put this in the wrong sub-forum, didn't I? Is there a moderator out there willing to scootch it over to Web Design? Sorry!
  2. Blue Velvet Moderator emeritus

    Jul 4, 2004
  3. angelwatt Moderator emeritus


    Aug 16, 2005
    Yeah, this is one of those things that sounds so easy to do until you start typing it up. Here's what I've come up with as one solution. You'll need to change the background image to something you have. The outline property is just so you can see what's happening visually.

    <div id="head">
    <p>here's some text blah blah blah<br/>
    here's some more, yada yada yada<br/>
    copyright me</p>
    body {
     margin: 0; padding: 0;
    #head {
     margin: 0; padding: 0px;
     width: 100%;
     text-align: center;
     background: url('arrow-up-black.gif')
      no-repeat scroll 5% 50%;
     outline: 1px solid #f00;
    #head p {
     margin: 0 0 0 25%; padding: 0 25% 0 0;
     width: 50%;
     background: url('arrow-up-black.gif')
      no-repeat scroll 93% 50%;
     outline: 1px solid #0f0;
    You may notice that the paragraph background image is at 93% rather than 95% as you'd expect. I think it's because of the size of the image. I think it places the left hand side of the image at the percentage, so had to pull it back a tad.

    Attached Files:

Share This Page