Subeta provides a div to put all of your pet information in – it’s called #pet_desc. But what if you want to have several different divs for different information, and position them all separately? Not a problem.

First of all, I recommend leaving the #pet_desc div alone. Don’t give it any positioning, as it’ll effect the positioning of the divs we put inside it.

Now we’ll need to use some HTML to add new divs to the page. They will automatically appear within the #pet_desc div, which is fine.

<div id="one">
BLAH BLAH BLAH
</div>

<div id="two">
BLAH BLAH BLAH
</div>

<div id="three">
BLAH BLAH BLAH
</div>

Now we have three different areas to put text. They all have a unique id so that we can style them separately with CSS. We can position them, give them a width and height – basically anything!

<style>
#one {
position: absolute;
top: 50px;
left: 100px;
width: 100px;
height: 100px;
border: 1px solid blue;
}

#two {
position: absolute;
top: 50px;
left: 300px;
width: 300px;
height: 100px;
border: 1px solid green;
}

#three {
width: 400px;
height: 100px;
border: 1px solid red;
overflow: auto;
}
</style>

If you liked this post, check out Customizing Your Pet’s Stat Bars!

Have any questions or comments? Feel free to comment on this post!