2 divs parallel w/o negative top: value

[TheAwake]

Greetings:

I have two little issues here which I hope to be easily solvable by the experienced members here:

1) I want to put 2 divs of the same size parallel to each other, how can I do this without using top: -xyz on the right div (with xyz being the height of the left div)
Is there some kind of <span> tag for divs?

(the problem is that in IE, the divs below act as if the right div was below the left one, while I actually moved it next to it with the negative top: value)

2) I have copied the code for a div which is completely specified from the style tags (including its position), how can I make it appear with the conventional div tag?

(the problem is that using position:relative, the div is releated to the top of the page and not the div I want it to relate to)



Hope I stated everythin understandable and I hope you can help me, please dont ask me to post the code (well I maybe could for problem 2) because its a hell of a mess (newb at work) Thanks in advance

 

[mkrausnick]

What you're looking for is the FLOAT attribute. Without testing the code, something like this should work:

<!-- container div to position both where you want them side by side -->
<div style="background-color:red">
<h1>PRECEDING CONTENT</h1>

<div width="100px" style="float:left; background-color:green">
<h1>LEFT SIDE</h1>
</div>

<div width="100px" style="float:left; background-color:yellow">
<h1>RIGHT SIDE</h1>
</div>

<!-- the div following below the two side-by-side divs -->
<div style="clear:left; background-color:blue">
<h1>REMAINING CONTENT</h1>
</div>

<!-- end of container div -->
</div>

This would produce two divs exactly adjacent to each other. If you wanted the left div left-justified and the right div right-justified with a variable gap in the middle, then use "float:right" on the second div.

The "clear:both" tells the browser that floating is done and it should revert to normal stacked divs.

Note that this is "fluid" design, meaning that it works only when the user's browser width is wide enough for both divs to exist side-by-side. When the user re-sizes the browser to less than about 200px in this example, the right div will automatically wrap and appear BELOW the left div.

Mike Krausnick
Dublin, California

 

[TheAwake]

thanks alot, worked well