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.

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.

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.

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...]

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).

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

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.

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...!

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.

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.

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 :(