SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    in my head
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    losing my mind trying to valign a DIV

    Hi All,

    I have been trying to put 1 DIV inside another and have the 2nd (smaller) DIV vertically aligned in the middle of the 1st (bigger) DIV.

    #logoStrapline { border: solid 1px #000; margin: 40px 0px;}
    #logoStrapline div { display:inline; text-align:right; border:solid 1px #c0c0c0;}


    <div id="logoStrapline">
    <img src="castle.gif" height="100" width="100" alt="Logo" align="absmiddle">
    Some text
    <div>search box</div>
    </div>

    I have tried floating the 2nd DIV to the right and it pops out of the 1st one,

    I have tried adjusting the margins top and bottom to force vertical alignment, much as you would do for horizontaly centering a DIV,

    and a plethora of other things that i've forgotten but none of them seem to work.

    Can anyone throw a little light on the subject before I start looking at for a box of matches to *really* solve the problem

  2. #2
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure what you are asking. Is the text supposed to display overtop of the image, beneth it or to one side or other of the image? Also how tall is the first DIV box supposed to be? the size of the image or larger?

    If you want the text in the second Div to display on top of the image, why not make the image a background image for the first DIV and format the second DIV accordingly?
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    KLB's correct and we need a little more info before we can help properly. If you are just trying to vertically align the text alongside the image then you just need vertical-align:middle on the image. (have a look at the FAQ thread on vertical-align for some more hints).

    Paul

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    in my head
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem,

    The 1st DIV for now can be taken as being the height of the image and width 100% of the screen display

    The 2nd DIV for now will just contain text and is to be the height of the text (approx 12px) width=length of text and horizontaly aligned to the right of the 1st DIV and vertically aligned to the middle of the 1st DIV

    Ideally I would prefer this not to depend on absolute values or positionings as the contents will change but the layout format will not.

    In answer to the above questions, the image is to be on the far left of the screen and the text on the far right, this is a simplified example of what the real content will be.

    FYI, the real content will be a logo and strapline on the left (strapline enclosed with H3), and, on the far right there will be a site search box which will contain the word search, a text entry box and a graphical "go" button.

    Originaly I used 2 seperate DIV's and floated them left and right which worked fine but then I was asked to make the horizontaly centred to each other, hence I put the first DIV inside the other and thats when it all got messy.

    Cheers for the time taken to answer

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Heres a simple way to vertically align one line of text (thats not going to wrap).

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #test{
     border:1px solid #000;
     background:lightblue;
     height:102px;
     text-align:right;
     line-height:102px;
     white-space:nowrap;
     position:relative;
    }
    #test p {
     margin:0;
     padding:0 0 0 170px;/*make room for image*/
    }
    #test img {position:absolute;left:0;top:0;}
    
    </style>
    </head>
    <body>
    <div id="test"> <img src="images/pmoblogoc.jpg" width="155" height="102" alt="" /> 
      <p>This is some text that should not wrap</p>
    </div>
    </body>
    </html>
    For other methods have a look here:

    http://www.pmob.co.uk/temp/vertical-align-examples.htm

    The first method in the link is based on a post made in this forum by xerxos.

    Paul

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    in my head
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    thanks for the reply but unfortunately this hasn't solved the issue, for 1 line of text it works fine but I was more interested in how to nest a DIV inside a DIV, eventually with the aim of placing content of any size and variety into each one of them.

    I also checked out the link and thought I saw something in the source code that might work, vertical-align:middle, no such luck, then I saw position:absolute; top:50%, still no luck.

    Any more suggestions would be greatly appreciated

    Cheers

    Darren

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI darren,

    I think test one in the link above does exactly what you want Have another look as it is the only current method of centering fluid content within another element.

    Paul


Bookmarks

Posting Permissions

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