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 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2007
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts

    display: inline problem

    I have two divs nested within another div. I would like to get these 2 div's (d1, d2) to be side by side. When I do display:inline though, nothing happens. I've already tried float:left, but that moves a lot of other things around as well which I do not went. An example of the code follows:

    Code:
    <div id="hdiv">
        <div id="d1">stuff</div>
        <div id="d2>stuff</div>
    </div>
    
    div#hdiv div{
    	display: inline;
    }
    Thanks for the help.

  • #2
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    If you want d1 and d2 to be side by side, then put THEM to display inline (or float them), not their container. I don't see the context of this, but you may or may not need to clear the floats later as well.

  • #3
    New Coder
    Join Date
    Jul 2007
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts
    doesn't my current css do that already, although not in as direct a way as you suggest? But i'll try anyway.

    Edit: I attempted making the changes listed above, but the result was the same. I used the following css:

    Code:
    div#id1, div#id2 {
        display: inline;
    }
    Last edited by mxb7642; 08-06-2007 at 09:54 PM.

  • #4
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Float the d1 to the left and add a clearing class of some sort below them. Like this for example:

    Code:
    .clear {
    clear: both;
    }
    You could call it with the <br> tag for instance:

    Code:
    <div id="hdiv">
        <div id="d1">stuff</div>
        <div id="d2>stuff</div>
        <br class="clear">
    </div>
    .
    .

  • #5
    New Coder
    Join Date
    Jul 2007
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks that did what i needed. good to know about this clear property too

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by mxb7642 View Post
    Code:
    <div id="hdiv">
        <div id="d1">stuff</div>
        <div id="d2>stuff</div>
    </div>
    
    div#hdiv div{
    	display: inline;
    }
    This code should put the two words on the same line with a space in between them. However, your code contains an error; you’re missing the closing Quotation Mark (") character around the second id attribute value.

    Quote Originally Posted by mxb7642 View Post
    doesn't my current css do that already, although not in as direct a way as you suggest?
    Yes.

    Quote Originally Posted by mxb7642 View Post
    Edit: I attempted making the changes listed above, but the result was the same. I used the following css:

    Code:
    div#id1, div#id2 {
        display: inline;
    }
    This code is erroneous. Your IDs were d1 and d2, not id1 and id2.

    Quote Originally Posted by Jutlander View Post
    Float the d1 to the left and add a clearing class of some sort below them. Like this for example:

    Code:
    .clear {
    clear: both;
    }
    You could call it with the <br> tag for instance:

    Code:
    <div id="hdiv">
        <div id="d1">stuff</div>
        <div id="d2>stuff</div>
        <br class="clear">
    </div>
    Instead of polluting the HTML with a clearing element, you can simply use the overflow property.

    If hdiv doesn’t have hasLayout [1] already, you’ll need to trigger it to get Internet Explorer 6 to behave properly; hence the proprietary zoom property. overflow: auto triggers hasLayout in Internet Explorer 7, so no issues there.

    Code:
    #hdiv { overflow: auto; zoom: 1; } 
    #d1, #d2 { float: left; }
    
    <div id="hdiv">
        <div id="d1">stuff</div>
        <div id="d2>stuff</div>
    </div>
    1. http://www.satzansatz.de/cssd/onhavinglayout.html
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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