problem aligning horizontally two DIVs

[dbarasuk]

Hello,

I have two div that i would like to align horizontally. The problem is that the second DIV begins under the first one. This is the html code:
<div id='wrapper'>
<div id = 'menu'>
<ul> <li>Content one</li><li>Content two</li></ul>
</div>
<div id='content'>
<h3>Feedback</h3>
<p>A couple of paragraphs here</p>
</div>
</div>

And the CSS code is the following:

div#wrapper{width:770; position relative;}
div#menu{position:relative; left:0; width:170;}
div#content{position:relative; left:200; width:500;}

As you can see from the css code, i expected to see the div#content at the right side of div#menu, exactly 30px after the border of div#menu. This was not the case however.

Div#content begins at 200px from its parent (here div#wrapper) but under div#menu. However there is enough space at the right side of div#menu to contain div#content. This happens both in Internet explorer and firefox.

Someone to help how i can fix this problem.

Kind regards.

[swa66]

I'm afraid you didn't quite get what position:relative does.

Position relative does 2 things:

• allow the element to be nudged in any direction using top/left/right/bottom
  The element starts on it's normal in flow position and that position is kept for it, even if the element is moved completely away
  
• make the element gain "position" so that it serves as a reference for any children (no need for them to be direct children) that are absolutely positioned themselves.
  

So, you could use absolute positioning on the children (position: absolute; top:0 instead of the position:relative you have).

But if you have anything after that wrapper, you'll find it terribly hard to position it unless you know exactly how long the content is going to be rendered.

Alternatively, the most common solution is to float columns.

[dbarasuk]

I used float left for div#menu and float right for div#content and this worked only for internet explorer but not for FireFox.

I will try the absolute positionning for the children as you suggest to see what will be the result.

Thanks