Positioning problem in CSS!

[angelali]

Hello, I have a problem in CSS. I want to make an image appear on the right below my menu buttons, but I can't do it. See a screenshot of my web page attached below first!

Do you see the the image on the right which is in pink and has a text written on it? I want it to display above the page, just below the web buttons on the right.

Below are my codes for my DIV containers:

The body

body {
width:1000px;
background-color:#1e1e1e;
margin:auto;
}

The wrap DIV container

#wrap {
width:1000px;
height:1000px;
background-image:url(images/background.png);
background-position:top center;
background-repeat:no-repeat;
}

The DIV container for the banner

#banner {
margin-top:5px;
margin-bottom:2px;
padding-left:100px;
}

The DIV container for the menu

#menu {
margin-top:7px;
padding-left:120px;
border-top:2px solid orange;
border-bottom:2px dashed orange;
}

The DIV container for the content (The one which has the yellow background saying Welcome...)

#content {
width:400px;
height:200px;
background-image:url(images/contentb.png);
background-repeat:no-repeat;
background-position:right 2%;
margin-top:15px;
padding-left:5px;
}


h1 {
text-align:center;
color:purple;
font-style:italic;
}

.sub {
text-align:center;
color:green;
font-style:oblique;
font-weight:bold;
}

p {
text-align:center;
color:#007fff;
font-style:oblique;
font-weight:bold;
}

The DIV container for the pink image I'm having problem

#design1 {
float:right;
}


Please help, again, I want the pink image to display below the web buttons on the right. Thank you! Please help! :(

[angelali]

I done it finally! I took the DIV container of the pink image and put it above the DIV container for the content! and it works!