[tutorial] adjusting width and positioning.

Theme: Organizer
Style system: 2
Base: Flexible squares
Design: No sidebar


This tutorial will show you how to make your entries wider or less wide, and also how to de-center and reposition it. Prior CSS knowledge could come in handy but is not necessary:
I. customizing the width
II. de-centering the entries

I. Customizing the width
You may have a header that is wider or less wide than the entries, and want to make the entries fit underneath your header neatly. To alter the width, you'll need to open your CSS file in a text editor and find this passage:

#content {
width: 500px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
padding-left: 2px;
padding-right: 2px;
}

You can change the number after width: into whatever you wish. Your code may become, for example:

#content {
width: 650px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
padding-left: 2px;
padding-right: 2px;
}

II. De-centering the entries
To de-center, you will need the same passage as to change the width:

#content {
width: 500px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
padding-left: 2px;
padding-right: 2px;
}

Now, you have two options - you can use relative positioning or absolute positioning. The codes are:

position: absolute;
left: *px;

and:

position: relative;
left: *px;

You can also change px to %. Just play around with numbers until your journal is positioned in the way you like.

------

Got questions?