Tag Archives: arrange

Using Sorting Layers to arrange assets in Unity 2D game design

This tutorial explains how to arrange assets in a 2D scene in Unity using Sorting Layers. If you have assets that you want in the background and assets that you want in the midground and foreground of a scene, then you can use Sorting Layers to arrange these assets. You can also use Sorting Layers to fix the problem of disappearing assets in your scene.

Next tutorial: Organising and grouping assets in the hierarchy

Float and clear property

In this tutorial we will use the float and clear CSS properties to arrange images and text on a web page.:

    • float property – with the float property, an element can be pushed to the left or right letting other elements on the web page wrap around it. It is often used to arrange images and for div layouts.
    • clear property – with the clear property, we can specify which side or sides of an element that are floating elements aren’t allowed to be. The float property can be set to none, left, right, both, or inherit (inherit from the parent element). Setting the clear property to ‘both’ for a div means that no other floating divs can be to the left or the right of this div.

In this tutorial, we will float an image and clear a paragraph. We can float an image to the left or right and clear other content around it.

Here is an example of an image floating to the left without clearing the text.

Screen Shot 2015-05-15 at 9.03.35 am

Here is an example of an image floating to the right without clearing the text.

Screen Shot 2015-05-15 at 9.10.24 am

And here is an example of the image floating to the left and the clear property for the paragraph of text set to clear left.

Screen Shot 2015-05-15 at 9.12.44 am

Watch the video below and then scroll down to see the sample HTML and CSS code.

Here is the sample HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Float and clear</title>
 <link rel="stylesheet" href="resources/stylesheet15.css"/>
</head>
 
<body>
 <img src="resources/canada.jpg" class="pic"/>
 <p class="paragraph">The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
 
 <p class="paragraph">The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
</body>
</html>

Here is the sample CSS code:

.pic{
 float:left; /* Float can be left or right */
 padding:5px;
}
.paragraph{
 clear:none; /* clear can be none, left, right, or both */
}