Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Distribute elements horizontally

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #149044
    ralph
    Participant

    Hi, I´m an engineer coming from the “MATLAB-world”.

    I´m learning web programming and I have a doubt I suppose is the simplest one. How to distribute two elements horizontally with CSS?

         <div class="container-1">
                <p>Element 1.1</p>
                <p>Element 1.2</p>
            </div>
    
             <div class="container-2">
                <p>Element 2.1</p>
                <p>Element 2.2</p>
            </div>
    

    What I want is: container-1 and its children; and immediately afterwards in the horizontal direction container-2 and its children.

    Thanks,

    #149045
    basement31
    Participant

    If I understand your question try

    .container-1, .container-2 { float: left }

    http://www.w3schools.com/css/css_float.asp

    Mainstream, as in widely supported markup and styling is basically derived from print, think of a newspaper, a floated element would be the image and the text would wrap around it, since then css has basically abused and manipulated these layout rules beyond recognition so it may seam very weird how/why some things are done.

    #149046
    ralph
    Participant

    Ready, that´s exactly what I wanted! Thanks!

    #149062
    Paulie_D
    Member

    Display:inline-block instead of float would work as well.

    http://learnlayout.com/

    Both have their ‘gotchas’ though.

    #149093
    __
    Participant

    …since then css has basically abused and manipulated these layout rules beyond recognition so it may seam very weird how/why some things are done.

    CSS hasn’t abused it, authors have. The CSS spec intended the float property to be used for, well, …floats. Once you realize that, all of the “weirdness” of how they work goes away.

    inline-block is what I use in cases like this – after all, “blocks in a lineis literally what we want.

    #149141
    basement31
    Participant

    I probably did word that incorrectly – its definitely important to understand their original intentions.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.