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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Fluid Width Header

    Hey all,
    I'm not that experienced with CSS and so I thought that I should just ask you guys instead of wasting even more time than I have on trying to fix this problem...
    I am trying to make a header that is comprised of three images. I was the first image to stick to the left side of the side, the second be centered, then the third image stick to the right side of the screen. I have been able to get the two aligned on the left and right side but I can't get the center image to be centered. I have also tried to float left with the first two then float right the last one but it still doesn't work right. I have tried it with div's where I set display:inline and I have tried it without div's. I just can't get it to work correctly. Is there any better way to achieve what I want without tables?
    Thanks

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,802
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    I am trying to make a header that is comprised of three images. I was the first image to stick to the left side of the side, the second be centered, then the third image stick to the right side of the screen. I have been able to get the two aligned on the left and right side but I can't get the center image to be centered.
    Are you displaying it using <img> tags?
    I just can't get it to work correctly. Is there any better way to achieve what I want without tables?
    Can we have a link t your current setup?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    821
    Thanks
    10
    Thanked 78 Times in 76 Posts
    It would be easier with 4 divs. The main wrapper div set to the width that you want and height set to the height needed for images. Then wrap each image in their respective divs. Just set the width and height for them and set each as a background image for their respective divs. Float one left and the other right. Then for the centered div, use: margin: 0 auto;

    I use this all the time to have 3 images with middle one centered. Just tweak as needed. Good use of divs and CSS will "git 'er dun". This is one using inline CSS, but I recommend using an external CSS file:

    Images - Left, Right & Center
    Last edited by Major Payne; 08-02-2010 at 03:41 PM.
    ☠ ☠RON☠ ☠


  •  

    Tags for this Thread

    Posting Permissions

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