1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

aligning two divs next to eachother?

Discussion in 'CSS' started by liam_d, Nov 26, 2005.

  1. #1
    Hi i am creating a sorta portal like system and im converting everything to CSS.

    I am wondering how i can get the two 'test' and 'testing 2' bars to align next to eachother? - Edit: i now have them together but i cannot get them to change there widths in firefox although in firefox there position is correct, ie shows them as the correct width but not the correct position...arrrg!

    And also how to get the menu under the logo to align in the centre of the div?

    http://ztbits.zitrote.com/

    Thanks!
     
    liam_d, Nov 26, 2005 IP
  2. stuw

    stuw Peon

    Messages:
    702
    Likes Received:
    44
    Best Answers:
    0
    Trophy Points:
    0
    #2
    #logo
    {
    top: 0;
    width: 650px;
    height: 80px;
    margin-left: auto;
    margin-right: auto;
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    background: #327FBF;
    background-image: url("images/logo.gif");
    background-repeat: no-repeat;
    background-position: left;
    }

    #logo_menu
    {
    top: 80px;
    width: 650px;
    height: 24px;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    background: #327FBF;
    background-image: url("images/block_title.gif");
    background-repeat: repeat;
    background-position: left;
    color: #FFFFFF;
    text-align:center
    }

    #portal_container
    {
    top: 115px;
    width: 650px;
    margin-left: auto;
    margin-right: auto;
    }

    #portal_nav
    {
    width: 150px;
    border: 1px solid #000000;
    background: #6699CC;
    color: #FFFFFF;
    float:left;
    }

    #portal_content
    {
    width: 490px;
    border: 1px solid #000000;
    background: #6699CC;
    color: #FFFFFF;
    float:right;
    }

    I find it easier not to mix fixed width and % layouts. Also if you float things you don't need to use spans so much.

    If you do float things adding
    div.clear {clear:both}
    to your css, and
    and <div class="clear"></div>
    to your html will allow you to stack things easily under your floats.

    www.linkmeup.co.nz does this as does www.bellissimo.co.nz
     
    stuw, Nov 26, 2005 IP
  3. liam_d

    liam_d Active Member

    Messages:
    306
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    80
    #3
    Thanks its looking great now, although how can i get it all to align to the left like it is in IE?

    And one last thing, how can i get the text in the logo menu to be in the middle as in height wise?
     
    liam_d, Nov 26, 2005 IP
  4. stuw

    stuw Peon

    Messages:
    702
    Likes Received:
    44
    Best Answers:
    0
    Trophy Points:
    0
    #4
    add
    vertical-align: middle;
    to align in the middle height wise.

    Can't really help you with the alignment as the test code is down, and I only looked at it in firefox. So I can't see what is going on.

    PM me if you want some more help:)
     
    stuw, Nov 26, 2005 IP
  5. liam_d

    liam_d Active Member

    Messages:
    306
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    80
    #5
    Thanks will do.
     
    liam_d, Nov 26, 2005 IP
  6. admans

    admans Peon

    Messages:
    870
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Same probs here..but hopefully by using the css above shud solve it..
     
    admans, Nov 27, 2005 IP