SitePoint Sponsor

User Tag List

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

    How to divide this header using CSS?

    Hi guys

    I want to divide my header like this link below,
    http://coder9.com/img/header.jpg

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

    Also I want it to put it inside the top header of this sample page below,
    http://csseasy.com/layouts/fluid/1column.html

    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
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 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.


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
  •