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 3 of 3
  1. #1
    DrJ
    DrJ is offline
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    my blocks won't inline

    I'm trying to make a header and a table within a div appear on the same line, like so:

    <html>
    <body>

    <h2 style="display:inline">Header</h2>

    <div style="display:inline; border: 1px solid red; padding: 10px;">
    <table style="background-color: yellow">
    <tr><td>Table data</td></tr>
    </table>
    </div>

    </body>
    </html>
    But the IE result has the table below the header, and the Firefox version is even more broken.

    If I make table inline as well, I can make them appear on the same line, but I don't understand why. If I've inlined the div, shouldn't I be free to put all the block elements I want in it?
    Attached Thumbnails Attached Thumbnails my blocks won't inline-firefox-output.gif  
    Attached Images Attached Images  

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Inline-level (text-like) elements may not contain block-level elements; if you try to do that it results in unpredictable behavior. A table element is a special type of block-level element. You can use float: left (or float: right) on both elements to have block-level elements display on the same line.

    To do what you’re trying to do via the display property requires CSS 2.1 values that neither Firefox nor Internet Explorer support: display: inline-block on the header and display: inline-table on the table. That would format them as special inline-level block elements (block-level elements that behave as text) that would flow on the same line (assuming that there’s enough room).

    Edit: Actually, you wouldn’t need display: inline-block for the header element unless you wanted to apply block-level properties such as width, height, or margin to it; display: inline would work fine for that element.
    Last edited by Arbitrator; 10-26-2006 at 07:10 PM.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    DrJ
    DrJ is offline
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you, I figured I must misunderstand something fundamental.


  •  

    Posting Permissions

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