Question

Here is my Fiddle:
http://jsfiddle.net/LLFpp/

I’m just starting to learn CSS and Divs (moving over from the old tables) and I’m trying to figure out how to place another one of the green div above the already existing green div, with a 20px space between the 2 divs, while keeping the right side div in it’s place.

I tried to do it as I would with tables, but then it screws up the entire layout, pushing down the div on the right.

So basically now I have:

| |

And I need:

| |
|

Makes sense? 😀

Answer 1

You need to have a container for both “green” divs and left allign that one.

something like this:

<div id="bigcontainer">
    <green div 1>
    <green div 2>
</div>
<div id="menu">
 <!--whatever-->
</div>

In your CSS

#bigcontainer{float:left;}

You can then do whatever you want with the “green divs” without affecting the main design.

hope it’s clear enough 🙂