mySpace Simple Div Float Floating Divs

Simple Div Overlay Using Inner Divs

The main difference between this strategy, and my other strategy, is the use of inner divs instead of a core image.

We will be building this:
My Space Page with Child Div Containers inside an Outer Core Div

My other strategy consisted of one or more core images, which made up what I called the core of the div.
Content was then placed on top of the Core using absolute placement.
The code for this strategy can be found here:
MySpace Simple Div Ovrlay

This strategy replaces the core image with multiple inner divs. These divs are placed, allowing them to fall naturally into the position we want them, and then
floated either left or right (or not at all).
This allows us to create inner containers, which can change height, as content is added, without messing up our layout.
Some of the content from the default page, can be easily placed into an inner div, which is opened BEFORE that content occurs, and closed AFTER that content occurs.
There are limitations, on exactly where we can place the default page content, and still allow it to grow without messing up our layout.

In the below example I will do the following:

- Remove or hide all of the default page content (we will bring some back at a later step)
- Create a core div, which will serve as an outer container (parent) to all of my inner content
- Create multiple inner containers (div blocks)
- Position each of these inner containers without the need to use absolute positioning.

- Build one of the inner div containers so it wraps around our blogs. This allows our blog content to grow.

- Position the friends and Comments at the bottom, in such a way as to allow them to push down the bottom links as they grow.


1) Use the code block in "Step 2: Hide the Default Page Content" of this article:
MySpace Simple Div Ovrlay
Don't worry if you don't want to hide everything, we will bring back what we want later. I like to start by getting it all out of the way.

2) Use the code block in "Step 3: Create a Core Div to put our our Content in"
From the above page. Put this code in the Hero Section.
If you are folling the band tutorial, put this code into the Band Members Section.


Notice I left a gap between these span blocks (which I use for comments since myspace removes anything using official comment syntax):
!!-----START Core Custom CONTENT------!!




!!-------END Core CUSTOM CONTENT--------!!

We will be placing the next several code blocks between the above two lines.
This will put the content inside our core div (myCoreDiv).

Look at this inline style command, that is included with the open tag for the core div:
<div class="myCoreDiv" style="width:900px; height:auto !important; border:1px violet solid; position:relative; top:0px;

overflow:hidden; z-index:0;">
Change the 900 to the desired with for your core div.
In my example I am using 800

Create Top Left Div

If you want the div to grow to accomodate added content, or if the content does NOT size the same cross-platform, you want to set height:auto
If you want the div to be an exact height, you want to set the height to a px value.
If you set a px value, and your content does not fit, you have a high risk of cross browser issues. Y

<div class="myDivTopLeft" style="width:398px; height:auto; float:left">

Content for Top Left Div Goes Here.

</div>

Create Top Right Div

<div class="myDivTopRight" style="width:394px; height:auto; float:right">
Content for Top Right Div Goes Here.<br> 

I can put anything I want here, as long as it has a width of 394px or less.

This section is set to height:auto.<br>
As it grows it will push down the content below it, if needed.
</div>

It is possible to put more than 2 containers on the same level. You can float multiple containers in either direction, as long as there is room.
I will cover more complicated examples later.

When we are done placing our divs in our top row, we need to do a clear. IE and other browsers treat Float differently. Float causes a container to not take up

space (similar to absolute placement). If we Clear, we can solve this issue.

Open Center Div (which will hold our blogs)
IF I want my next div to sit below BOTH the left and right div, I clear both. If I only want it to sit below my Right div, I clear Right.
For this example, I will clear both:

Because I want this next div to include content from the default page, I am going to open the Div in one section, and close it in another.
The blogs occur AFTER the Interests section and BEFORE the blurbs section (on the band page after the General Section and Before the Bio section).
The blogs are NOT static in size, either across browsers or across time.
Therefore I want them in a space, which can grow with them.
This is also a good strategy to use for placement of the shows.

I will open this div in the hero section. This code goes INSIDE our Core Custom Content Block.

<div class="myDivCenter" style="clear:both; border:1px green solid" >
(You can replace this with a custom Blog Header or Remove this text.  This section will grow as blogs are added.)

Earlier, when we hid all of the default content, we hid our blogs.
We will now unhide them.
Remove the following line of code:

table.latestBlogEntry {display:none;}

Your blogs should now show up inside the div you just created. They should automatically center.
IF you do not want them centered, but instead want them right or left, you can move them using relative positioning.
However, for this particular example, I want them centered in this space.

Open same number of tables we closed
The code is already in the code block we pasted in earlier.
It is always a good habit to keep the close and open table/row/cell tags balanced.
Each time I put content, which I want at the level of my Core Div, I take things up to the level of One Table Deep.
I do the needed close table/row/cell commands in each cell, where I enter this type of content.
This is important, because each time we leave one of the cells (where we are allowed to enter data) the code encounters several close tags. We need these tags to

map correctly.

Prepare the the "To Meet" Section For continuation of our Div
The reason I am choosing my Meet section, instead of my About section, is that it is the LAST data entry point. If I leave this section, with a div open, that div will suck in my friends and comments.

When we left the Hero section we had 2 divs open. Both of these divs are still open.
These Divs are ONE table deep.
The cell we enter data in, in the Meet section, is FOUR tables deep.
Therefore we must close three levels of table/row/cell before we close this div.

I start out this section by closing enough tables/rows/cells to take me OUT of the Blurbs class (which we rendered display:none} and one table deep.
I then close the div (myDivCenter).

I place the below code block in the "To Meet" section (or the "Bio" on the band page):

<i class="off">!-go up to level one table deep-!</i>
</td></tr></table>
</td></tr></table>
</td></tr></table>

</div> <i class="off">!-Close div.myDivCenter-!</i>

Create Lower Center Div
Place the below code block just below the last block you placed in the "To Meet" section:

<div class="myDivLowerCenter" style="border:1px white dashed; height:auto">

Notice this div stretches the entire width of the parent div.

Next put in the content.
Notice that the div automatically grows as content is added, pushing down the bottom link area.

Once your content is entered, close the Div.
After closing the Div,
Open the same number of tables/rows/cells that we closed at the top of this section.
When I am done with a section, I like to put in something to indicate this is the end of the custom code in the section.
This makes it much easier to find the code, after it is merged with the myspace default code.

I paste this block at the end of the "To Meet" section:

</div> <i class="off">!-close div.myDivLowerCenter-!</i>
<i class="off">!-open same number of tables we closed -!</i>
<table><tr><td>
<table class="off"><tr><td>
<table class="off"><tr><td>
<i class="off">!-End custom code in Meet-!</i>

Recover Friends and Comments
Our core div is still open.
If we now remove the code which has rendered our friends and comments {display:none} they should show up after the last div we closed, and inside our core div, and

above the bottom link area.

Locate and remove the following lines of code:

table.friendsComments {display:none}
table.friendSpace {display:none}

Thank you for Visiting; Have a Nice Day :-)