SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    3 Post(s)
    0 Thread(s)

    How to divide this header using CSS?

    Hi guys

    I want to divide my header like this link below,

    height must be 1000px.
    width must be 150px.

    Also I want it to put it inside the top header of this sample page below,

    And center it.
    Also must be cross browser.

    Can you show me the right CSS codes for this.

    Thank you in advanced.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Melbourne, AU
    448 Post(s)
    8 Thread(s)
    Quote Originally Posted by solidcodes View Post
    height must be 1000px.
    width must be 150px.
    Ummm ... are you sure?

    To get that layout shown in the image, float the inner elements left and right as appropriate. Also give overflow: hidden to the container.

    So, for example, inside #header put a div like "header-inner", give it the desired width (say 1000px), and center is with margin: 0 auto; Also give it overflow: hidden;

    Inside that, have the box for the left side floated left, and the box containing the boxes to the right floated right.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Posting Permissions

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