Floating Elements with CSS

Use the css float attribute to adjust the number of horizontal elements based upon the size of the browser window. The number of horizontal elements will automatically increase or decrease as the user resizes the browser window. The steps are
  1. Create a Main Container
  2. Define the Main Container width as a percentage
  3. Center the Main Container with auto margin
  4. Float the Elements with float left
  5. Clear the Float

Creating the Main Container

Divs are boxes that contain elements (images, links, text, smaller divs). When using CSS, it is often helpful to define the main container box that will house all the smaller divs. The width of this main container can be a fixed number of units (pixels, inches, centimeters).
CSSID #maincontainer, "{
    Width: 800px;
    Background-Color:#FFFFCC;
    }"
 
    Cls
    Div maincontainer
        For i = 1 to 20
            Print "Frog #";Right$("0";i, 2)
        Next i
    End Div
The width of this main container can also be a percentage of the browser width. This allows for the container width to dynamically change as the user resizes the browser.
CSSID #maincontainer, "{
    Width: 80%;
    Background-Color:#FFFFCC;
    }"
 
    Cls
    Div maincontainer
        For i = 1 to 20
            Print "Frog #";Right$("0";i, 2)
        Next i
    End Div

Centering the Main Container

Resize the browser window to see the maincontainer div expand and contract. By assigning the margins to auto, the div is centered. Set Text-Align to center to center the text as well.
CSSID #maincontainer, "{
    Width: 800px;
    Margin:  20px Auto;
    Text-Align:  Center;
    Background-Color:#FFFFCC;
    }"
 
    Cls
    Div maincontainer
        For i = 1 to 20
            Print "Frog #";Right$("0";i, 2)
        Next i
    End Div

Smaller Divs Inside the Main Container Div

Smaller divs are placed inside the main container. When code contains two or more successive (non-nested) divs, these boxes are stacked vertically.
    CSSID #maincontainer, "{
        Width:80%;
        Background-Color:#FFFFCC;
        Margin: 20px Auto;
        }"
 
    CSSID #frogbox, "{
        Width: 100px;
        Height: 120px;
        Background-Color:#CCCCFF;
        Padding: 20px 20px 20px 20px;
        Text-Align: Center;
        }"
 
    Cls
    Div maincontainer
        For i = 1 to 20
            Div frogbox
                Html "<img src='http://runbasic.wikispaces.com/space/showimage/FrogGIF.gif'>"
                Print: Print "Frog #";Right$("0";i, 2)
            End Div
        Next i
    End Div

Floated Elements

The float: left attribute directs the element div to rise up and anchor its left edge to the right edge of the preceding div, if there is room. If there isn't enough room, the element div anchors itself to the leftmost position of the next space down. This floating is sensitive to the main container being resized. A wide main container holds more element divs across, a narrow main container holds less element divs across. The number of across elements changes dynamically with the resizing of the browser. Be sure the background color of the element div is the same as the background color of the main container div.
    CSSID #maincontainer, "{
        Width:80%;
        Background-Color:#FFFFCC;
        Margin: 20px Auto;
        }"
 
    CSSID #frogbox, "{
        Width: 100px;
        Height: 120px;
        Padding: 20px 20px 20px 20px;
        Text-Align: Center;
        Float: Left;
        }"
 
    Cls
    Div maincontainer
        For i = 1 to 20
            Div frogbox
                Html "<img src='http://runbasic.wikispaces.com/space/showimage/FrogGIF.gif'>"
                Print: Print "Frog #";Right$("0";i, 2)
            End Div
        Next i
    End Div

Clearing the Float Attribute

The float: left attribute will continue to affect the next element div, even when that next element div has no float attribute assigned.
 
    CSSID #maincontainer, "{
        Width:80%;
        Background-Color:#FFFFCC;
        Margin: 20px Auto;
        }"
 
    CSSID #frogbox, "{
        Width: 100px;
        Height: 120px;
        Padding: 20px 20px 20px 20px;
        Text-Align: Center;
        Float: Left;
        }"
 
    CSSID #lilybox, "{
        Width: 100px;
        Height: 120px;
        Background-Color:#CCFFFF;
        Padding: 20px 20px 20px 20px;
        Text-Align: Center;
        }"
 
    Cls
    Div maincontainer
        For i = 1 to 20
            Div frogbox
                Html "<img src='http://runbasic.wikispaces.com/space/showimage/FrogGIF.gif'>"
                Print: Print "Frog #";Right$("0";i, 2)
            End Div
        Next i
        Div lilybox
            Html "<img src='http://runbasic.wikispaces.com/space/showimage/LilyGIF.gif'>"
            Print: Print "Lily Pad"
        End Div
    End Div

To prevent the float element from affecting further element divs, design a one pixel width floatstop div.
    CSSID #maincontainer, "{
        Width:80%;
        Background-Color:#FFFFCC;
        Margin: 20px Auto;
        }"
 
    CSSID #frogbox, "{
        Width: 100px;
        Height: 120px;
        Padding: 20px 20px 20px 20px;
        Text-Align: Center;
        Float: Left;
        }"
 
    CSSID #floatstop, "{
        Width: 1px;
        Clear: Left;
        }"
 
    CSSID #lilybox, "{
        Width: 100px;
        Height: 120px;
        Background-Color:#CCFFFF;
        Padding: 20px 20px 20px 20px;
        Text-Align: Center;
        }"
 
    Cls
    Div maincontainer
        For i = 1 to 20
            Div frogbox
                Html "<img src='http://runbasic.wikispaces.com/space/showimage/FrogGIF.gif'>"
                Print: Print "Frog #";Right$("0";i, 2)
            End Div
        Next i
        Div floatstop
        End Div
        Div lilybox
            Html "<img src='http://runbasic.wikispaces.com/space/showimage/LilyGIF.gif'>"
            Print: Print "Lily Pad"
        End Div
    End Div
Dynamically regrouping images in a centered, proportional main container adds a bit of polish to your web applications. It's this easy with Run BASIC.