Welcome to WebmasterWorld Guest from 3.228.24.192

Forum Moderators: not2easy

Message Too Old, No Replies

Can I put 2 div elems next to each other horizontally

     
11:08 am on Aug 4, 2014 (gmt 0)

New User

5+ Year Member

joined:Aug 4, 2014
posts: 2
votes: 0


Hi,
I am trying to achieve something that is so easy in typical GUI apps (SWT, Swing).
I would like to have one parent <div> element that contains two <div> children elements:
  • one <div> element with few labels and another <div> element with
  • few controls (text, combo box etc).

    I also would like to put label <div> element on the left and controls <div> element to the right of labels <div> element.

    I think I have tried all possibilities using CSS position attribute and got nowhere.
    Any help appreciated,
    Regrds,
    Janusz
  • 11:49 am on Aug 4, 2014 (gmt 0)

    Senior Member from GB 

    WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

    joined:Mar 9, 2003
    posts:2099
    votes: 10


    Hi rejkid - welcome to Webmaster World.

    Try using the CSS float attribute:

    HTML:

    <div id="parent">
    <div id="labels">Labels</div>
    <div id="controls">Controls</div>
    <p>Labels on the left. Controls on the right.</p>
    </div>


    CSS:

    #parent {width:400px;}
    #labels, #controls {float:left; width:198px; border:1px solid rgba(0,0,0,1);}
    #parent p {clear:both;}


    Just off the top of my head, but it should work.

    One important thing to note is that when you employ float, you should always declare the width of the floated element.
    3:24 pm on Aug 4, 2014 (gmt 0)

    Senior Member from US 

    WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

    joined:Apr 9, 2011
    posts:15889
    votes: 876


    Other options are
    display: inline-block (will fit the elements side by side if and only if there's room)
    display: table-cell (will put them side by side regardless, and will take up all allotted horizontal space)

    A floated element properly floats alongside some non-floated element. The "float" property wasn't really intended for parallel elements sitting next to each other, though it's often used that way.

    Don't use ID (# in CSS) unless you're absolutely certain there can never be more than one of a thing. Otherwise use classes.

    you should always declare the width of the floated element

    The validator will be unhappy if you don't. Unless they've changed it again. But the width can be expressed any way you like: pixels, ems, percentage. Make sure to allow for padding; two adjoining 50% won't fit.
    3:59 pm on Aug 4, 2014 (gmt 0)

    Senior Member from GB 

    WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

    joined:Mar 9, 2003
    posts:2099
    votes: 10


    display: inline-block (will fit the elements side by side if and only if there's room)


    Personally, I like display: inline-block and consider it a more elegant solution than horizontally-adjacent floats. But... last year when I undertook some web-design work for a health provider in the North of England, I discovered that IE7 does not understand display: inline-block. Imagine that. It had been so long since I'd done anything on IE7, I'd forgotten this was the case.

    That said, I think everyone will forgive you, rejkid, if you decide not to support IE7.

    Don't use ID (# in CSS) unless you're absolutely certain there can never be more than one of a thing. Otherwise use classes.


    Ooops! My mistake. Obviously too tired this morning. I meant to write all classes and I ended up writing all IDs.

    Should be:

    HTML:

    <div class="parent">
    <div class="labels">Labels</div>
    <div class="controls">Controls</div>
    <p>Labels on the left. Controls on the right.</p>
    </div>



    CSS:

    .parent {width:400px;}
    .labels, .controls {float:left; width:198px; border:1px solid rgba(0,0,0,1);}
    .parent p {clear:both;}


    Thanks for the heads up, lucy24.
    8:34 pm on Aug 4, 2014 (gmt 0)

    Senior Member from US 

    WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

    joined:Apr 9, 2011
    posts:15889
    votes: 876


    I discovered that IE7 does not understand display: inline-block

    Yup. I remember that from ebooks, because until quite recently one of the People In Charge used MSIE6 (SIX), so that was the Acid Test. (He has now moved on to MSIE 8. Whew.)

    Formally, MSIE 6 and 7 recognize "inline-block" if and only if it's attached to an element that would normally be inline. Meaning, in practice, a span.

    [caniuse.com...]
    11:37 pm on Aug 4, 2014 (gmt 0)

    Junior Member

    5+ Year Member

    joined:May 17, 2011
    posts:170
    votes: 0


    One advantage of inline-block and table-cell over float is that you can align your horizontally arranged elements vertically (e.g., top, middle or bottom).
    1:45 am on Aug 5, 2014 (gmt 0)

    New User

    5+ Year Member

    joined:Aug 4, 2014
    posts: 2
    votes: 0


    Thanks you all for the replies. I have tried all suggestions they all work.
    I was thinking but of using CSS position attribute - as I thought that is exactly for that purpose - Am I wrong? Can I achieve what you suggested in previous posts with position attribute or I am totally on the wrong path?
    Regards,
    Janusz
    2:08 am on Aug 5, 2014 (gmt 0)

    System Operator from US 

    incredibill is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

    joined:Jan 25, 2005
    posts:14664
    votes: 99


    It had been so long since I'd done anything on IE7, I'd forgotten this was the case.


    This is why I...

    A) don't design for anything but modern browsers and,

    B) use twitter bootstrap so they do all the cross browser support stuff, not me

    Side by side divs with floats is a simple solution for making rows and columns. Another reason to use bootstrap [getbootstrap.com...] is all that nonsense is built in as well.

    Still need CSS skills to use bootstrap, but there's already classes to make all this basic row and column stuff tick. We use it on the free tools [freetools.webmasterworld.com...] to give you an idea.
    11:33 am on Aug 6, 2014 (gmt 0)

    Senior Member from GB 

    WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

    joined:Mar 9, 2003
    posts:2099
    votes: 10


    I was thinking but of using CSS position attribute - as I thought that is exactly for that purpose - Am I wrong? Can I achieve what you suggested in previous posts with position attribute or I am totally on the wrong path?


    CSS float is a (special) kind of CSS position.

    But, yeah you could also achieve horizontally adjacent boxes with absolute positioning:

    HTML:

    <div class="parent">
    <div class="labels">Labels</div>
    <div class="controls">Controls</div>
    <p>Labels on the left. Controls on the right.</p>
    </div>



    CSS:

    .parent {position:relative; width:400px; padding-top:40px;}
    .labels, .controls {position:absolute; width:198px; border:1px solid rgba(0,0,0,1);}
    .labels {top:0; left:0;}
    .controls {top:0; right:0;}



    or even... (with a bit of contortion), relative positioning:

    HTML:

    <div class="parent">
    <div class="labels">Labels</div>
    <div class="controls">Controls</div>
    <p>Labels on the left. Controls on the right.</p>
    </div>



    CSS:

    .parent {width:400px; height:24px;}
    .labels, .controls {position:relative; width:198px; height:24px; border:1px solid rgba(0,0,0,1);}
    .controls {margin-top:-26px; margin-left:200px;}



    Frankly, as lucy24 mentioned, display:inline-block is better than both positioning or floats.

    And one day there will be CSS Flexbox...!
    2:54 pm on Aug 6, 2014 (gmt 0)

    Senior Member from GB 

    WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

    joined:Mar 9, 2003
    posts:2099
    votes: 10


    Actually, on that last note... I just checked out caniuse and it looks like Flexbox is now fully supported by all desktop browsers (and all mobile browsers except Opera Mini and IE Mobile).

    So, it looks like it's time to start upgrading to Flexbox for 2D layouts.
    5:46 pm on Aug 6, 2014 (gmt 0)

    Junior Member

    5+ Year Member

    joined:May 17, 2011
    posts:170
    votes: 0


    Actually, on that last note... I just checked out caniuse and it looks like Flexbox is now fully supported by all desktop browsers (and all mobile browsers except Opera Mini and IE Mobile).

    So, it looks like it's time to start upgrading to Flexbox for 2D layouts.

    I was going to mention Flexbox as well, and a few days ago I checked for updates on browser support. It just makes so much sense and solves so many layout problems for responsive design. FF, Chrome, IE and Opera have all supported it going back many versions now, although in terms of time perhaps a year or so (I'm not sure).

    Of course, this begs the question: how many of your site's visitors use older versions of these browsers or other browsers. (Sadly, I no nothing about Safari.) And how would a Flexbox site appear on their screens? Will you need alternative styles for them?

    On a related note, what about the W3's grid layout specification ([dev.w3.org ]), which I believe was in the works before Flexbox? It also solves some of the same CSS headaches -- essentially Tables+ for page layout. (How I miss nesting tables and padding cells using <font size=5>&nbsp;</font>.) I'm trying to wrap my head around how and when to use CSS Grid and Flexbox together.
    8:25 pm on Aug 6, 2014 (gmt 0)

    Senior Member from US 

    WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

    joined:Apr 9, 2011
    posts:15889
    votes: 876


    Sadly, I [k]no[w] nothing about Safari.

    I devoutly hope that you at least know more than the site I attempted to visit earlier this year. It locked me out on the grounds that I wasn't using the current version of Safari. Well Duhhh I wasn't: Safari 7 can only be used by OS 10.some-number-higher-than-6 (I was then on 10.6). Below that you have to use Safari 6.

    I don't actually like Safari, but mercifully it has been much less wanton with whole-number increments than most other browsers (looking at you, FF and Chrome). Both 6 or 7 are legit. Even 5 may be if the user is on a very old OS. (I don't think I've ever personally met a non-OSX Mac, but I suppose they still exist.)

    :: detour to caniuse dot com ::

    Hm. I think we've got differing interpretations of what constitutes adequate support levels. What I like to see on caniuse is solid dark-green everywhere*, with the predictable exception of MSIE <8.


    * New formatting, which frankly I find less intuitive than the old color style :(