Results 1 to 3 of 3

Thread: inline-block not working

  1. #1
    Join Date
    Dec 2009
    Posts
    54
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Question inline-block not working

    Hi Guys,

    I know this is very basic, but for some reason the div's dont line up, info displays under logo, if you know how to fix this i would really appreciate it
    HTML Code:
     <div id="logo">
      <img src="FILENAME" width="100%"/>
     </div><!--logo-->
     <div id="info">HI
     </div><!--info-->
    Code:
    #logo {
    	display: inline-block;
    	*display: inline;
    	width: 15%;
    	vertical-align: top;
    	padding: 6px 3px;
    }
    
    #info {
    	display: inline-block;
    	*display: inline;
    	width: 20%;
    	vertical-align: top;
    	text-align: right;
    	background: #006699;
    }
    Thanks

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    What do you mean exactly when you say that they don't line up?

    I've had to guess and add "background:red" to the #logo styles, but the divs sit side-by-side and their tops are flush with each other with that in place.

    Its going to be best if you provide a link to your actual page though - maybe the image dimensions and/or other CSS is affecting the display. Or maybe screen size, or browser, or doctype, or another element encroaching on space - lots of things could have an impact. Its impossible to say without seeing it in context and without you providing more info.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    works for me too.

    As a side note, *display: inline is not necessary and should be removed unless you need to support IE7 and below (and even then, you would also have to give the divs "hasLayout" by adding zoom: 1 or a z-index for it to have any effect).

Similar Threads

  1. Replies: 6
    Last Post: 04-25-2013, 08:04 PM
  2. Replies: 4
    Last Post: 01-08-2010, 05:08 PM
  3. Downgrading to FF2 for inline-block testing.
    By jlizarraga in forum Computer hardware and software
    Replies: 2
    Last Post: 03-19-2009, 07:27 AM
  4. Display: Block vs. Inline
    By lindsaycb in forum CSS
    Replies: 8
    Last Post: 02-29-2008, 06:08 PM
  5. Replies: 2
    Last Post: 12-08-2007, 02:56 PM

Tags for this Thread

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
  •