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 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question DIV/CSS align question

    I am trying to line up the following elements on the same line using css.

    Here is my HTML:

    PHP Code:
    <div id="header">
        <
    div id="logo"><a href="#"><img src="images/logo.jpg" width="165" height="72" border="0" alt="" /></a></div>

        <
    div id="top-image"><img src="images/top.jpg" width="16" height="72" border="0" alt="" /></div>
        
        <
    div id="slogan">Slogan Here</div>
        <
    div id="top-nav">
        <
    a href="#">About the FLC</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">FAQs</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Contact Us</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Feedback</a>
        </
    div>
        
        <
    div id="news"><a href="#"><img src="images/news.jpg" width="138" height="72" border="0" alt="" /></a></div>
    </
    div
    Here is my CSS:

    PHP Code:
    img {
        
    displayblock;
    }

    #header {
        
    width775px;
        
    height72px;
        
    background#FFF;
        
    border0px solid black;
    }

    #logo {
        
    floatleft;
    }

    #top-image {
        
    floatleft;
    }

    #slogan {
        
    width456px;
        
    height41px;
        
    line-height41px;
        
    text-aligncenter;
        
    font-size15px;
        
    font-styleitalic;
        
    font-weightbold;
        
    floatleft;
        
    border0px solid black;
    }

    #top-nav {
        
    width456px;
        
    height31px;
        
    line-height31px;
        
    text-aligncenter;
        
    color#FFF;    
        
    background#293f68;
        
    floatleft;
    }

    #top-nav a {
        
    color#FFF;
        
    text-decorationnone;
    }

    #news {
        
    ???

    If I put nothing in the news id everything lines up properly in FF, but in IE news.jpg image is moved down to the next line.

    Can anyone shed some light on this for me? Any help is greatly appreciated!

  • #2
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts
    display: inline;

    try that....

  • #3
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts
    display: inline; in the news div does nothing in FF and IE.

  • #4
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts
    sorry, dident read properly!!

    Try making the header div slightly wider, by a few px.

    EDIT, if i could read maybe we might get somewhere!!!!!!

    Sorry, i have read it wrong 3 times now, maybe i should go back to school!!! lol

    Lookin at it now, im no pro, but maybe able help...
    Last edited by jonnybinthemix; 05-05-2006 at 08:14 PM.

  • #5
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts
    that did not work either

  • #6
    Regular Coder
    Join Date
    Jan 2005
    Posts
    140
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I guess I could always position it using absolute values but I didn't want to have to do that.

  • #7
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts
    you can try that, but it will not move with the browser when its resized...

  • #8
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts
    have you got a live version? easier to see....

    Also, try

    float: left;
    vertical-align: top;

    jon


  •  

    Posting Permissions

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