# Layout

We can seen how to create basic images. We can combine images using layouts methods to create more complex images. Try the following code. You should see a circle and a rectangle displayed beside one another, as shown below.

(Image.circle(100).beside(Image.rectangle(100, 200))).draw()

Image contains many layout methods for combining images. Here are one we'll use to start with.

• beside places images horizontally next to one another. Example:

Image.circle(100).beside(Image.circle(50)) 
• above places images vertically next to one another. Example:

Image.circle(100).above(Image.circle(50)) 
• on places images centered on top of one another. Example:

Image.circle(100).on(Image.circle(50)) 

Try out these methods until you're sure you understand them.

## Exercises

#### Exercise: The Width of a Circle

Create the picture below using the layout methods and basic images we've covered so far.

It's three small circles on top of a bigger circle, and we can just about state this as is in code.

Image
.circle(60)
.beside(Image.circle(60))
.beside(Image.circle(60))
.on(Image.circle(180))
// res0: Image = On(
//   t = Beside(
//     l = Beside(l = Circle(d = 60.0), r = Circle(d = 60.0)),
//     r = Circle(d = 60.0)
//   ),
//   b = Circle(d = 180.0)
// )