Distribute elements horizontally

[ralph]

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,

[basement31]

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.

[ralph]

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

[Paulie_D]

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

http://learnlayout.com/

Both have their ‘gotchas’ though.

[__]

…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 line” is literally what we want.

[basement31]

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

[Author]

Posts