Making A Layout: Structure: Content & Sidebar

[sireesanwar]

Account Status: All
Theme: Flexible Squares
Actions: Creating Your Own Layout: Structure - Content & Sidebar
Links: Code Index

Hopefully you all understand the body section of the coding. I wanted to mention as we get into these explanations that occasionally you'll find coding sections that are not part of these tutorials. Feel free to point me to them and I will explain them. I've come across some as well but right now I can't really think of an example.

Now, we want to look at the basic structures of the layout. The different types of content (content, maincontent & subcontent) and the sidebar. I won't be going into detail about the sidebar yet. That will come later. This is just understanding the main coding for these elements.



The coding I would like to work with is from my layout Oxygen.
/*--------------------------------
S2 Flexible Squares - 90. Oxygen
Layout by http://layout-lounge.livejournal.com
PLEASE DO NOT REMOVE THIS SECTION
----------------------------------*/
body{
background-color: #F6F6F6;
background-image: url(http://i77.photobucket.com/albums/j49/SireesAnwar/Backgrounds/2h4l5bq.png);
background-repeat: repeat, repeat;
background-attachment: fixed, fixed;
background-position: left top, left top;
color: #888888;
font-family: "lucida grande", "lucida sans", trebuchet ms, arial, sans-serif;
font-size: 12px;
margin: 10px 0 20px 0;
}

a, a:link, a:visited { color: #004359; }
a:hover { color: #444444; }

blockquote {
width: 70%;
background: #444444;
margin-left: auto;
margin-right: auto;
padding: 10px;
color: #ffffff;
font-size: 13px;
line-height: 16px;
font-family: "trebuchet ms", arial, sans-serif;
text-align: left;
box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.1);
}

blockquote a { color: #cccccc !important; font-style: italic; }
blockquote a:hover { color: #ffffff !important; }

img.special, i img { border: 10px solid #f5f5f5; }

b, strong { color: #004359; }
i, em { color: #4c228a; }
u { color: #8CB53F; }
s, strike { color: #AD5C00; }

/*--------------General------------*/
#content {
width: 1000px;
background-color: #ffffff !important;
margin-left: auto;
margin-right: auto;
padding: 0px;
}

#maincontent {
font-family: "trebuchet ms", arial, trebuchet ms, sans-serif;
font-size: 12px;
color: #333333;
margin-left: 285px;
text-align: center;
}

.subcontent {
width: 710px;
margin-top: 0px;
}

/*---------------Header--------------*/
#header {
position: inherit;
width: 100%;
height: 30px;
text-align: left;
color: #282828;
padding: 0px;
margin-bottom: 5px;
font-family: "Abel", georgia, arial;
font-size: 16px !important; line-height: 130%; line-height: 130%;
letter-spacing: 1px;
text-transform: lowercase;
font-weight: none;
z-index: 199;
}

div#header a, div#header a:link, div#header a:visited, div#header a:active {
padding: 5px 5px 5px 5px;
margin: 0px 2px 0px 0px;
letter-spacing: 1px;
color: #0da4d3;
text-align: left;
border:0px solid #E0E0E0;
-webkit-transition: box-shadow 0.3s linear;
-moz-transition: box-shadow 0.3s linear;
-ms-transition: box-shadow 0.3s linear;
-o-transition: box-shadow 0.3s linear;
transition: box-shadow 0.3s linear;
}

div#header li.view {
padding: 5px 10px 5px 15px;
margin: 0px 5px;
color: #cccccc;
-webkit-transition: box-shadow 0.3s linear;
-moz-transition: box-shadow 0.3s linear;
-ms-transition: box-shadow 0.3s linear;
-o-transition: box-shadow 0.3s linear;
transition: box-shadow 0.3s linear;
}

div#header a:hover {
color: #000000;
-webkit-box-shadow: #f6f6f6 0 0 10px inset;
-moz-box-shadow: #f6f6f6 0 0 10px inset;
-ms-box-shadow: #f6f6f6 0 0 10px inset;
-o-box-shadow: #f6f6f6 0 0 10px inset;
box-shadow: #f6f6f6 0 0 10px inset;
}

ul.navheader {
list-style: none;
line-height: 24px;
margin: 0px 0 0 15px;
padding: 0;
}

ul.navheader li {
display: inline;
list-style: none;
}

.title, .subtitle { display: none; }

/*--------------- footer ---------------*/

.lj-view-recent #footer, .lj-view-friends #footer {
bottom: 10px;
padding:5px 0;
position: fixed;
left: 0;
text-align:left;
text-transform:lowercase;
width: 100%;
z-index:99;
}

ul.navfooter{
margin:0 auto;
padding:0;
}

/*--first link---*/
ul.navfooter a {
}

ul.navfooter li {
list-style:none outside none;
margin:0;
padding:0;
display:inline; }

.lj-view-recent #footer a, .lj-view-friends #footer a, .lj-view-recent #footer a:link, .lj-view-friends #footer a:link {
background-color: rgba(0, 0, 0, 0.3);
color: #ffffff;
font-family: open sans condensed, georgia,arial,sans-serif;
font-size: 13px;
padding: 20px 30px 20px 30px;
margin: 0px 10px -10px 10px;
}

.lj-view-recent #footer a:hover, .lj-view-friends #footer a:hover {
color:#dddddd;
padding: 20xp 10px 20px 10px;
}

/*--second link---*/
ul.navfooter li + li a {
float: right;
background-color: rgba(0, 0, 0, 0.3) !important;
padding: 20xp 10px 20px 10px;
}

ul.navfooter li + li a:hover { }

ul.navfooter li + li {
list-style:none outside none;
margin:0;
padding:0;
display:inline; }

#footer .viewing { display:none; }

/*--in entries---*/

/*-------------Sidebar--------------*/
#sidebar {
background-color: #ffffff;
padding: 10px;
font-family: "Abel", arial, georgia;
font-size: 14px;
color: #000000;
width: 260px;
float: left;
text-align: right;
text-transform: normal;
}

.sbarbody2, li.sbaritem2 {
padding: 5px;
margin: 0px 0px 0 10px;
font-family: "Abel", arial, sans-serif;
font-size: 14px !important;
text-transform: lowercase;
text-align: left;
}

.sbarbody {
margin:0;
padding: 5px;
padding-bottom: 5px;
}

ul.sbarlist{
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: left;
}

li.sbaritem {
position: inline;
list-style-type: none;
margin-top: 2px;
text-align: left;
}

li.sbaritem a {
color: #8A1751;
display: inline;
font-family: "Abel", arial, sans-serif;
font-size: 14px;
font-weight: lighter;
margin-right: 0px;
padding: 0px;
text-align: left; }

li.sbaritem a:hover {
color:#ffffff; }

li.sbartitle {
background-color: rgba(255, 255, 255, 0.5);
list-style: none;
color: #aaaaaa;
text-align: left;
letter-spacing: 2px;
font-family: "Abel", trebuchet ms, arial, sans-serif;
font-size: 14px;
text-transform: uppercase;
margin: 5px -12px 0px 8px;
}

#sidebar_linklist {
list-style-type:none;
padding: 5px;
text-align: left !important;
text-transform: uppercase; }

#sidebar_linklist li.sbaritem a {
background-color: #111111;
border-bottom: 1px solid #1d1d1d;
color: #eeeeee;
display:block;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
font-weight:lighter;
padding: 8px;
margin: 0px 0px -2px 0px;
text-align: left;
}

#sidebar_linklist li.sbaritem a:hover {
color:#FFFFFF;
background-color: #000000;
text-align: left;
}

td.sbarcalendar {background-color: transparent !important;
padding: 5px;}

td.sbarcalendarposts {background-color: #ffffff; border-bottom: 0px solid #dedede; padding: 3px; box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); }

table.calendar {padding-top: 5px; }

#sidebar_summary .sbarcontent {
background-color: #000000;
color: #ffffff;
padding: 0px;
margin: 0px -5px 0px 5px;
text-align: left;
}

#sidebar_summary li.sbaritem {
padding: 5px;
border-bottom: 1px solid #1d1d1d;
}

#sidebar_summary li.sbaritem a { color: #dddddd; }

#sidebar_summary li.sbaritem a: hover { color: #ffffff!important; }

#sidebar_tags .sbarcontent { height: 325px; overflow-x: hidden; overflow-y: auto; margin-right: -12px; padding: 5px; }

#sidebar_tags .sbarcontent { height: 500px; overflow-x: hidden; overflow-y: auto; margin-right: -12px; padding: 5px; }

li.tagBox a {
background-color: #111111;
background: url("http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/greyarrow.gif") no-repeat scroll left center #111111;
border-bottom: 1px solid #1d1d1d;
color: #eeeeee;
display:block;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
font-weight:lighter;
padding: 5px 1px 5px 12px;
margin: 0px 0px -2px 0px;
text-align: left;
}

li.tagBox a:hover {
color:#FFFFFF;
background-color: #000000;
text-align: left;
}

#sidebar_tags li.sbaritem a {
background-color: #111111;
background: url("http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/greyarrow.gif") no-repeat scroll left center #111111;
border-bottom: 1px solid #1d1d1d;
color: #eeeeee;
display:block;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
font-weight:lighter;
padding: 5px 1px 5px 9px;
margin: 0px 0px -2px 0px;
text-align: left;
}

#sidebar_tags li.sbaritem a:hover { color:#FFFFFF;
background-color: #000000;
text-align: left;
}

.defaultuserpic {
width: 100px;
height: 100px;
margin: 8px auto 10px auto;
padding: 10px;
background-color: #ffffff !important;
border: 0px solid #cccccc;
-webkit-box-shadow: #ccc 0 0 5px;
-moz-box-shadow: #ccc 0 0 5px;
-ms-box-shadow: #ccc 0 0 5px;
-o-box-shadow: #ccc 0 0 5px;
box-shadow: #ccc 0 0 5px;
}

.defaultuserpic img {
}

.social-roll {
border-radius: 50%;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.social-roll:hover {
box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}

/*-----------Entries-----------*/
div.entry_text {
padding: 20px 30px 0px 30px;
margin: 0px;
color: #444444;
font-family: "arial";
font-size: 14px;
line-height: 150%;
text-align: left;
}

div.entry_text li { line-height: 12px !important; }

.userpic, .userpicfriends {
float: right;
margin: 5px -60px 25px 15px;
padding: 10px;
width: 100px;
height: 100px;
text-align: center;
color: #FFF!important;
background: #FFF!important;
-webkit-box-shadow: #CCC 0 0 5px;
-moz-box-shadow: #CCC 0 0 5px;
-ms-box-shadow: #CCC 0 0 5px;
-o-box-shadow: #CCC 0 0 5px;
box-shadow: #CCC 0 0 5px;
}

.userpic img, .userpicfriends img {
width: 100px;
height: 100px;
}

.userpicfriends a, .userpicfriends font {
margin: 0px 0px 0px 0px;
position: relative;
background-color: transparent!important;
float: center;
font-family: 'TuffyRegular', sans-serif;
font-size: 11px;
text-align: center;
color: #FF5DDD;
text-shadow: 2px 2px 4px #777777;
-webkit-transition: background-color 0.3s ease;
-moz-transition: background-color 0.3s ease;
-ms-transition: background-color 0.3s ease;
-o-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
}

.userpicfriends a:hover, .userpicfriends a font:hover {color: #bbbbbb; text-shadow: 2px 2px 6px #bbbbbb; }

.datesubject {
padding: 0px;
text-align: left;
border-bottom: 1px solid #dedede;
}

.date {
margin: 10px 80px -15px 0px;
text-align: right;
padding-right: auto;
padding-left: auto;
color: #ccccca;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
text-transform: none;
}

.subject {
padding: 0px 0px 5px 5px;
margin: 15px 10px 0px 10px;
color: #0da4d3;
font-family: "Abel", open sans condensed, georgia, arial;
font-size: 28px;
font-weight: normal;
text-align: left;
text-transform: uppercase;
}

.subject a, .subject a:link, .subject a:visited {color: #0da4d3;}

.subject a:hover {color: #565656;}

span.ljuser a b {
padding: 2px 0 2px 0;
color: #4c228a;
font-weight: normal;
}

span.ljuser a:hover b {
padding-top: 2px;
padding-bottom: 2px;
color: #8A1751;
font-weight: normal;
}

.skiplinks {
text-align: center;
margin-top: 5px;
margin-bottom: 3px;
font-family: "Abel", arial, sans-serif;
padding: 10px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
color: #999999;
}

.clear { height: px; font-size: 0.01px; }

.separator { height: 0px; }

/*----------- Currents--------------*/
.currents, .currentlocation, .currentmood, .currentgroup, .currentmusic {
padding: 5px;
background-color: transparent !important;
margin: 5px 0 0 0;
font-size: 9px;
font-family: Verdana;
color: #7F7F7F;
text-align: left;
}

.currentlocation, .currentmusic { display:none; }

/*-----Currents, tags, comment links-----*/

div.ljtags {
margin-top: 20px;
text-align: left;
color: #808080;
font-family: verdana;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
}

.comments {
color: #eeeeee;
font-size: 12px; line-height: 130%;
letter-spacing:-0.1em;
padding: 10px;
margin-top: 8px;
position: relative;
text-align: center !important;
width:auto;
}

div.comments a, div.comments a:link, div.comments a:visited {
background-color: #111111;
color:#eeeeee;
font-family: open sans condensed, arial !important;
font-size: 14px !important; line-height: 130%;
line-height:1;
padding: 10px;
margin:0;
text-align: center; }

div.comments a:hover {
background-color: #000000;
color:#ffffff;
}

/*----------SECTION: Tiny Icons----------*/
.currentlocation {
background: url(http://i54.tinypic.com/msm1c0.jpg) no-repeat left center;
padding: 2px 0px 5px 18px;
}

.currentmood {
background: url(http://i32.tinypic.com/2vhsnxy.jpg) no-repeat left center;
padding: 2px 0px 5px 18px;
}

.currentmusic {
background: url(http://i26.tinypic.com/2nv6qtf.jpg) no-repeat left center;
padding: 2px 0px 5px 18px;
}

.currentgroups {
background: url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/fugue/foaf.png) no-repeat left center;
padding: 2px 0px 5px 18px;
}

/* PROTECTED ENTRY */
.subject img[src*="icon_protected.gif"]{
width: 0;
height: 0;
padding: 16px 0px 0 16px;
background: URL(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/famfamfam/2wbzrdd-famfamfam.png) no-repeat !important;
}

/* STICKY POST */
.subject img[src*="icon_sticky.png"]{
width: 0;
height: 0;
padding: 16px 0px 0 16px;
background: URL(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/fugue/pin.png) no-repeat !important;
}

/* FRIENDS GROUP */
.subject img[src*="icon_groups.gif"]{
width: 0; height: 0; padding: 0 16px 16px 0; background: url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/fugue/foaf.png) no-repeat !important; }

/* PRIVATE ENTRY */
.subject img[src*="icon_private.gif"]{
width: 0;
height: 0;
padding: 16px 0px 0 16px;
background: URL(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/fugue/eye-close.png) no-repeat !important;
}

/* USER */
html body .ljuser img {
width: 0 !important;
height: 0 !important;
background-repeat: no-repeat;
background: transparent url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/owl.png) no-repeat 0 0 !important;
padding: 16px 0px 0px 16px !important;
}

html body .ljuser img[src*="userinfo.gif"] {
width: 0 !important;
height: 0 !important;
background: transparent url(http://i77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/owl.png) no-repeat 0 0 !important;
padding: 16px 0px 0px 16px !important;
}

/* COMMUNITY */
html body .ljuser img[src*="community.gif"] {
width: 0 !important;
height: 0 !important;
background: transparent url(http://s77.photobucket.com/albums/j49/SireesAnwar/TinyIcons/tiny_icon_tree_summer.png) no-repeat 0 0 !important;
padding: 16px 0px 0px 16px !important;
}

/*------------Comments Page--------*/
.box {
padding: 5px 5px 5px 10px;
margin: 0px;
text-align: left;
clear: left;
background-color: #FAFAFA;
border: 1px solid #dedede;
}

form div.box {
text-align: left;
background-color: #FAFAFA;
}

center.comment-links { }

div#footer.box { text-align: center; }

.commentbox {
align: left;
padding: 2px;
margin: 2px;
}

.datesubjectcomment {
margin-top: 10px;
text-align: left;
padding: 5px;
font-size: 12px;
background-color: #f6f6f6;
color: #000000;
}

.userpiccomment {
margin: -2px 0px 5px 5px;
padding: 10px;
width: 100px;
height: 100px;
float: right;
background: #FFF!important;
-webkit-box-shadow: #CCC 0 0 5px;
-moz-box-shadow: #CCC 0 0 5px;
-ms-box-shadow: #CCC 0 0 5px;
-o-box-shadow: #CCC 0 0 5px;
box-shadow: #CCC 0 0 5px;
}

.commentreply {
font-family: "trebuchet ms", arial, sans-serif;
position: relative;
margin: 10px;
font-size: 13px;
color: #000000;
}

.commentinfo {
margin-top: 5px;
width: 100%;
}

div.comment-links { text-align: left !important; margin: 5px; padding: 20px 5px; }

div.comment-links a { color: #A9000F; }

div.comment-links a:hover { color: #888888; }

/*-----------Calendar/Year/Archive Page----------*/

ul.year { text-align: center; padding: 5px; background-color: #ffffff; }

ul.year li {display: inline;}

ul.year a { padding: 0px 3px 0px 3px; }

ul.year a:hover {}

table.yeartable { width: 710px; margin-left: auto; margin-right: auto; padding: 10px 100px 10px 100px; background-color: #ffffff; }

table.yeartable td.yeardate { color: #888888; border: 1px solid #cccccc; }

table.yeartable td.yearday { text-align: center; color: #888888; border: 1px solid #cccccc; }

td.yearmonth { color: #000000; border-style: none; }

/*-----------Fonts-----------*/
@font-face {
font-family: 'Grand Hotel';
font-style: normal;
font-weight: 400;
src: local('Grand Hotel'), local('GrandHotel-Regular'), url(http://themes.googleusercontent.com/static/fonts/grandhotel/v1/NrGQkrs9rbHm5EYx0Eil0obN6UDyHWBl620a-IRfuBk.woff) format('woff');
}

@font-face {
font-family: 'Great Vibes';
font-style: normal;
font-weight: 400;
src: local('Great Vibes'), local('GreatVibes-Regular'), url(http://themes.googleusercontent.com/static/fonts/greatvibes/v1/6q1c0ofG6NKsEhAc2eh-3YbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}

@font-face {
font-family: 'Delius Swash Caps';
font-style: normal;
font-weight: 400;
src: local('Delius Swash Caps'), local('DeliusSwashCaps-Regular'), url(http://themes.googleusercontent.com/static/fonts/deliusswashcaps/v6/uXyrEUnoWApxIOICunRq7-HbywbERJ_YcOpO6Co4fHY.woff) format('woff');
}

@font-face {
font-family: 'IM Fell DW Pica SC';
font-style: normal;
font-weight: 400;
src: local('IM FELL DW Pica SC'), local('IM_FELL_DW_Pica_SC'), url(http://themes.googleusercontent.com/static/fonts/imfelldwpicasc/v4/xBKKJV4z2KsrtQnmjGO17ORrWueMUZPacwWUa4j7Ahg.woff) format('woff');
}

@font-face {
font-family: 'Abel';
font-style: normal;
font-weight: 400;
src: local('Abel'), local('Abel-Regular'), url(http://themes.googleusercontent.com/static/fonts/abel/v4/EAqh528fFdbUek8UOky4sA.woff) format('woff');
}

/*-----------Mics-----------*/

.headerimage {
position: relative;
width: 960px;
height: 300px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: 20px solid #ffffff;
background-color: transparent !important;
background-image: url(http://i77.photobucket.com/albums/j49/SireesAnwar/graffitigraphic-movie0297.png);
background-repeat: no-repeat;
background-position: center top;
}

As you can see there are multiple colors going on here. You can see gray, black, white and red (image above). This is telling us where we want to change the color and what we want to leave without color. Below is the coding you'll end up with in the end (at this point in the coding process. Your journal might not look right to you if you've saved it. That would be because there is stuff actually missing from the layout.
/*--------------------------------
S2 Flexible Squares - 90. Oxygen
Layout by http://layout-lounge.livejournal.com
PLEASE DO NOT REMOVE THIS SECTION
----------------------------------*/
body{
background-color: #F6F6F6;
background-image: url(BACKGROUND IMAGE);
background-repeat: repeat;
background-attachment: fixed;
background-position: left top;
background-size: inherit;
color: #888888;
font-family: "lucida grande", trebuchet ms, arial, sans-serif;
font-size: 12px;
margin: 10px 0 20px 0;
}

/*--------------General------------*/
#content {
width: 1000px;
background-color: #ffffff !important;
margin-left: auto;
margin-right: auto;
text-align: left;
padding: 0px;
}

#maincontent {
font-family: "trebuchet ms", arial, trebuchet ms, sans-serif;
font-size: 12px;
color: #333333;
margin-left: 285px;
text-align: center;
}

.subcontent {
background-color: #ffffff;
width: 710px;
margin-top: 0px;
}

/*-------------Sidebar--------------*/
#sidebar {
background-color: #ffffff;
padding: 10px;
font-family: "Abel", arial, georgia;
font-size: 14px;
color: #000000;
width: 260px;
float: left;
text-align: right;
text-transform: none;
}

First, let me tell you I like to have sections (as you can see above) for parts of my journal and while the sidebar is really part of the structure I usually put it under a sidebar sections because when I work on a sidebar I'm typically working in one place and want it together. I tend to make adjustments to this coding all together so here we go...
/*--------------General------------*/
#content {
width: 1000px;
background-color: #ffffff !important;
margin-left: auto;
margin-right: auto;
text-align: left;
padding: 0px;
}

#maincontent {
font-family: "trebuchet ms", arial, trebuchet ms, sans-serif;
font-size: 12px;
color: #333333;
margin-left: 285px;
text-align: center;
}

.subcontent {
background-color: #ffffff;
width: 710px;
margin-top: 0px;
}

/*-------------Sidebar--------------*/
#sidebar {
background-color: #ffffff;
padding: 10px;
font-family: "Abel", arial, georgia;
font-size: 14px;
color: #000000;
width: 260px;
float: left;
text-align: right;
text-transform: none;
}

Because of the way this layout is we are going to ignore the maincontent for a bit. Because the layout is one big square all with a background of white we are working more with the subcontent as opposed to Layout Lounge's layout which focuses more on the maincontent and ignores the subcontent.

#content: How wide do you want your layout? I want it to be 1000px which is what I have in the width. You could do 100% which would fill up your screen but then there is no reason for the background image in the body section. Some people like to do 80% or 90% which adjusts depending on the screen. This is nice but can cause problems down the line. For example images in your entries might spill over your post. There is a way to code for this but the more you code for things the less flexibility you end up with.

#sidebar: I'm moving to sidebar because if I'm working with a 1000px layout, I want to decide how wide my sidebar will be and then pick the subcontent. I like my sidebar to be rather wide so I'm going with 260px. You'll notice in the sidebar section it has coding that says float: left;. This is putting our sidebar on the left of the journal.

.subcontent: Now we determine how large the "posts" or subcontent is going to be. So the entire journal is 1000px. The sidebar is 260px. That leaves 740px (1000-260=740). But sometimes there is a margin-right in the sidebar section which will subtract more from our 1000pxs. We don't in this case but we also don't want the sidebar and the posts really close together. So I'm going with 710px for the subcontent. We can always make it bigger if we need too.

Typically we'd have the maincontent float left. In this case we aren't going to do that. How do I get the subcontent to float right? Okay so I know this is foolhardy but if you try float: right; it actually does move right but now there is a gap which is not white and the background is peeking through. Should you try putting it in the maincontent? Not this time....

#maincontent: Float does not work here either. But what will work is a margin. Technichally the subcontent is incorporated into the maincontent so we want to add the line margin-left: 285px; to the maincontent. Why? Well we want to work from the left of the journal because we know the most about it. We know the sidebar is 260px. We want to add a little padding so the entries don't appear to run into the sidebar. So we add 15px to this width. That way when we put in the margin line it pushes all the entries to 285px from the left side of the journal effectively keeping them floating right. You can also float the sidebar to the right and then your margin would become margin-right: 285px;.

Here is the Layout Lounge's Coding:
#content {    
 width: 1000px;  
 margin-left: auto;
 margin-right: auto;
 text-align: left;
 padding: 0px;
z-index: 50;
 }

#maincontent {
 width: 790px;
float: left;
 padding-top: 188px;
 font-family: "trebuchet ms", arial, sans-serif;
 font-size: 12px;
 color: #333333;
 text-align: center;
 }

.subcontent {
 background-color: #ffffff;
 margin: auto;
 padding-top: 10px;
border: 1px solid #dedede;
 }

*--------------- sidebar ---------------*/

#sidebar {
width: 260px;
float: right;
margin: 188px -50px 0px 0px;
padding: 0px 0 10px 0;
color: #000000;
font-family: open sans condensed, arial, georgia;
font-size: 12px;
font-weight: normal;
text-align: left;
left: 5px;
}

As you can see the content is again 1000px. The sidebar is 260px. The MAINCONTENT is 790px The sidebar is floating right and the maincontent is floating left. What is the difference between the two layouts? At Layout Lounge it looks like the sidebar and the posts are floating over the background image. In the Oxygen layout they are not but instead look like a full layout with the sidebar and posts all on ONE white background. This is why we shift from focusing on the subcontent to the maincontent. Also in the Oxygen & Layout Lounge layout the maincontent doesn't need a background color. So in the Layout Lounge's coding we will give our maincontent the width and the float but the background-color and marins are going to be in the subcontent.

If I put the background-color in the maincontent the posts here at Layout Lounge wouldn't have the float feeling. Instead, it would be a semi-float. They would all lay on a background of white but the sidebar would not. Have I confused you yet? Let me show you some examples.




If you wanted a semi-float look where all the posts have the same background and the sidebar is seperate then you would put the background-color in the maincontent and then you'd probably want to remove the border in the subcontent.
However, we have the background-color in the content which is making the layout one entity without any float features.

Feel free to test these things, save your coding, and view it in your journal. That way you can see what the different examples are doing.

Now let's breakdown the coding further.
#content {
 width: 1000px;
 background-color: #ffffff !important;
 margin-left: auto;
 margin-right: auto;
 text-align: left;
 padding: 0px;
 }

1. width is necessary. So choose how wide you'll want your layout. I typically make my layout the width of whatever header image I'm going to be using. In my case, I'm often making them myself and making them 1000px. But should you have an image that is 800px you'll have to remove 200px worth of space from both the sidebar and the sub/maincontent.
2. background-color is important in the Oxygen layout because the posts and the sidebar are all contained in a full style layout. This is where we'd set that white background color. Notice the !important after it. This isn't to tell you it is important but to tell the coding. Sometimes you'll put in a color (userpics always do this) and it just doesn't change. Typically it is because something else is overriding it and adding !important at the end makes it change. In Layout Lounge's journal coding there is no content background color. Typically this means all you have to do to make it transparent is to remove the line of backgrounge-color though sometimes you'll need it to say (background-color: transparent !important;). If you remove the background color and it doesn't disappear then you'll need the !important in the coding automatically.
3. margin dictates where your journal is on the browser. So here we have margin-left: auto; and margin-right: auto;. Why? Because there is no align: center. It won't work. The auto margins essentially make equal distances from the edge of the BODY coding. Now your journal is centered. You can also write this as margin: 0 auto 0 auto; (top, right, bottom, left). But then you might also want your journal to one side with a large image on the otherside (that is the body's image). You would then have margin-left: 0px; or margin-right: 0px;. You can even have one 10px from right or left. It is up to you.
4. text-align works the way the fonts worked in the body section which is should something in your journal fall outside other coding this will pick up the slack. So if you entries don't have a text-align in their coding it will revert to the content and should you leave it out of content it falls to the body.
5. padding is the space around something but inside the section. So the way this works is I have it set to 0 because I want everything under content (ie sidebar, maincontent, entries, etc) to be all the way to the edges of the content. I can add any padding I want in sections like sidebar and entries should I need them.

Let's break down the maincontent. We are currently working with Oxygen's so there is no width. We want the maincontent to be controled by the margin-left.
#maincontent {
 font-family: "trebuchet ms", arial, trebuchet ms, sans-serif;
 font-size: 12px;
 color: #333333;
 margin-left: 285px;
 text-align: center;
 }

1. font-family, font-size, color, and text-align again provide customization should elements of your journal not be coded for these things. If you want to use a custom font from Google for your entire journal I would typically put it in the body but should you mainly want it in your entires and the elements within it you'd change the font name, size, etc here. Typically I don't have a custom font for the entire journal so I usually target areas like the Subject, Date & the Sidebar Titles.
2. margin I explained above. Because the float doesn't work in this instance we need to create a marin to compensate for the float. But there is also the possibility you would need to move the maincontent down in which you could use margin-top.

In cases of floating entries and sidebar, the subcontent wouldn't have width but the maincontent would. Here we want the subcontent to have the width because we are containing the actual posts within the maincontent.
.subcontent {
 background-color: #ffffff;
 width: 710px;
 margin-top: 0px;
 }

1. background-color is technically unnecessary here. The reason being is that the content of this layout has a background color. It is in this layout as a precaution. But maybe you want your posts to be slightly off in color. Not exactly white. You could do that here. And example of this is in my Layout Apple of My Eye were the content is black and the subcontent is green.
2. width in this case is necessary because we are going for a full layout rather than the floating sidebar and entries. If you are working with a content width that is a percentage you won't actually need to have a width. Setting a size for the sidebar and leaving this width to auto or removing the line altogether should make your posts adjust to the size of the browser. The problem this creates is that it could become too small to look at which is why you can change width to max-width: 710px; but you would need a minimum width also so add min-width: 400px;. This will give your posts the ability to adjust to the browser but not get too small or too big.
3. margin is sometimes necessary even if it is designated at 0. You may notice without it a slight gap or your entries not being level with your sidebar. Just entering margin-top: 0; may fix the problem. If it needs to go higher up on the layout you'll notice margin-top: 5px; moves it down. margin-top: -5px; will move it up.

Now let's work on the sidebar. This is just the basis of the sidebar and will not structure the tags, links, summary, free text, calendar or default userpic on your sidebar.
#sidebar {
 width: 260px;
 background-color: #ffffff;
 float: left;
 padding: 10px;
 font-family: "Abel", arial, georgia;
 font-size: 14px;
 color: #000000;
 text-align: right;
 text-transform: none;
 }

1. width is very important in the sidebar. Whether you're journal is a set width or a percentage you'll want to set the sidebar's width. You can do a percentage but in some browsers it might become almost non-existant. You can impliment the max-width and min-width but with flexible layouts I tend to think something needs to be a fixed width and everything else can flex around it.
2. background-color isn't actually necessary here but if I go into a post and the sidebar is longer than it there might be a transparent sidebar hanging below the white. So I give it a color to prevent this.
3. float is always necessary in the sidebar. This tells use where the sidebar is on the journal.
4. padding gives us a little cushion inside the sidebar. Remember in content I said I wanted my elements (ie sidebar) to be all the way to the edges of the content so we had a 0 value on the padding. That isn't the case in the sidebar. If we have a 0 value then links, text, etc will all be all the way to the edges. So here I have 10px. When you have one number in th padding value it means all the sides are padded 10px. That way I don't have to type out padding: 10px 10px 10px 10px; (top, right, bottom, left). Though you might want the top or the bottom to have a larger padding depending on the sidebar an example is my Ribbon Rainbow layout which needed extra padding on the bottom of the sidebar to accomdate the background image of the ribbon.
5. font-family, font-size, color, text-align, text-transform all customize our text on the entire sidebar. So if you code a style onto the free text and do not code for these elements the sidebar sections will pick up the slack. This will only apply to regular text and not necessarily links. If you do not code the links on the sidebar it will fall to this coding except the color of a link which will fall to your journal's overall link coloring. text-transform is set to none here which also means should you wish you could remove that line. However, this is where you'd change your text to either uppercase or lowercase.

And that is the end of that coding session. You layout will start looking like something but it still will not look like it really should. Remember to save your coding. You can leave your journal like this or restore your old layout and save your new coding to a text file.



What we have so far...
/*--------------------------------
S2 Flexible Squares - 90. Oxygen
Layout by http://layout-lounge.livejournal.com
PLEASE DO NOT REMOVE THIS SECTION
----------------------------------*/
body{
background-color: #F6F6F6;
background-image: url(BACKGROUND IMAGE);
background-repeat: repeat;
background-attachment: fixed;
background-position: left top;
background-size: inherit;
color: #888888;
font-family: "lucida grande", trebuchet ms, arial, sans-serif;
font-size: 12px;
margin: 10px 0 20px 0;
}

a, a:link, a:visited { color: #004359; }
a:hover { color: #444444; }

blockquote {
width: 70%;
background: #444444;
margin-left: auto;
margin-right: auto;
padding: 10px;
color: #ffffff;
font-size: 13px;
line-height: 16px;
font-family: "trebuchet ms", arial, sans-serif;
text-align: left;
box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.1);
}

blockquote a { color: #cccccc !important; font-style: italic; }
blockquote a:hover { color: #ffffff !important; }

i img { border: 10px solid #f5f5f5; }

b, strong { color: #004359; }
i, em { color: #4c228a; }
u { color: #8CB53F; }
s, strike { color: #AD5C00; }

/*--------------General------------*/
#content {
width: 1000px;
background-color: #ffffff !important;
margin-left: auto;
margin-right: auto;
text-align: left;
padding: 0px;
}

#maincontent {
font-family: "trebuchet ms", arial, trebuchet ms, sans-serif;
font-size: 12px;
color: #333333;
margin-left: 285px;
text-align: center;
}

.subcontent {
background-color: #ffffff;
width: 710px;
margin-top: 0px;
}

/*-------------Sidebar--------------*/
#sidebar {
background-color: #ffffff;
padding: 10px;
font-family: "Abel", arial, georgia;
font-size: 14px;
color: #000000;
width: 260px;
float: left;
text-align: right;
text-transform: none;
}

Any questions about this tutorial? Please Comment.