CSSFloatLeft

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). code format="vbnet" 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 code 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. code format="vbnet" 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 code

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. code format="vbnet" 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 code

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. code format="vbnet" 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 "" Print: Print "Frog #";Right$("0";i, 2) End Div Next i   End Div code

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. code format="vbnet" 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 "" Print: Print "Frog #";Right$("0";i, 2) End Div Next i   End Div code

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. code format="vbnet"

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 "" Print: Print "Frog #";Right$("0";i, 2) End Div Next i       Div lilybox Html "" Print: Print "Lily Pad" End Div End Div code

To prevent the float element from affecting further element divs, design a one pixel width floatstop div. code format="vbnet" 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 "" Print: Print "Frog #";Right$("0";i, 2) End Div Next i       Div floatstop End Div Div lilybox Html "" Print: Print "Lily Pad" End Div End Div code 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.