SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2003
    Location
    UK
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Position 2 div's side by side

    How can I get two divs to sit next to each other rather than on top of each other?

    Really simple code, I thought giving a div a width would make it inline rather than a block element so they would sit next to each other.

    I know its easy enough with floats/positioning but is their something simple I am missing or is it not posible?

    Code:
    <style type="text/css">
    .divLeft {
        width:100px;
    }
    .divRight {
        width:100px;
    }
    </style>
    
    
    <div class="divLeft">First Div</div >
    <div class="divRight">Second Div</div >

  2. #2
    SitePoint Zealot livetech's Avatar
    Join Date
    Oct 2008
    Location
    Colwyn Bay, North Wales, UK
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bit confused by what you are asking. You've put spans in, yet refer to divs.

    Divs are for block elements, spans are for inline styles.

    You can make spans work like divs via the display:block attribute, like so.

    HTML Code:
    <style type="text/css">
    .divLeft {
        width:100px;
        display:block;
        float: left;
    }
    .divRight {
        width:100px;
        display:block;
        float: right;
    }
    </style>
    
    
    <span class="divLeft">First Div</span>
    <span class="divRight">Second Div</span>
    Try that.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2003
    Location
    UK
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oops, the spans were suposed to be divs, I was messing about with it.

    At the moment that code displays 2 divs on top of each other. What I want is the 2 divs next to each other, without using floats.

  4. #4
    SitePoint Zealot livetech's Avatar
    Join Date
    Oct 2008
    Location
    Colwyn Bay, North Wales, UK
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I've changed the code to divs in this example, for explanation.

    What we need to do is use div's to display inline elements, rather than as a block.

    Try this:-

    HTML Code:
    <style type="text/css">
    .divLeft {
        display:inline;
    }
    .divRight {
        display:inline;
    }
    </style>
    
    
    <div class="divLeft">First Div</div>
    <div class="divRight">Second Div</div>
    Is this what you are after? If you display them as inline elements, then you'll lose a lot of the block elements (such as height & width) though.

    My advice is to stick to spans though.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    What I want is the 2 divs next to each other, without using floats.
    Why don't you want to use floats ? It's the easiest way to make elements horizontally aligned.

    If you change a block element to display as an inline-box then you cannot apply dimensions (and vertical margins and padding behave differently).

    You could use inline-block which is supported in FF3,opera and safari but needs a hack for IE. It's easiest to use floats for now unless all you want is simple inline formatting.

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2003
    Location
    UK
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For some reason the floats are producing a margin underneath the floated div's in ie which I cant figure out.

    I thought asigning a div a fixed width essentialy made them behave as a inline-block so they would sit next to each other but I must have read it wrong.

    Never mind, going to use a different way.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I thought asigning a div a fixed width essentialy made them behave as a inline-block
    No, assigning a width to a static div just gives it a set width rather than auto width (effectively if fills the space available to it).

    to change the display of an element you use the "display" property e.g. display:block, display:inline etc.

    For some reason the floats are producing a margin underneath the floated div's in ie which I cant figure out
    If you post some code then perhaps we can help with that

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you need something complex (such as equal height DIVs without images) then try this method out - I personally can't stop myself from using it!

    http://www.sitepoint.com/forums/show...49#post3885849

    Otherwise just floating two DIVs to the left (or right) will work just fine in many cases.


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
  •