DIY – Floating Textbox

This week’s blogpost will be on floating textboxes. This allows you to create a string of text, and even entire paragraphs, in a contained text box that does not shift when you change the size of the window. This assumes you have an external CSS.

Step 1 – Create class or id in your CSS file,  such as “.textbox,” followed by the standard opening and closing brackets.

Step 2 – Choose how you want your textbox to look. It can float right or left by including “float:right;” or “float:left;”. You can choose the size and color of your borders with “”border:#000000 2px;” for example.

Step 3 – It also might be a good idea to include margins (which push the textbox away from the edge of the screen), with “margin:10px;” as well as pad your text (which pushes it away from the inside of the textbox) with “padding:10px;” for example.

Step 4 – Take your text and slip it between two div tags, which should look something like “<div class=”textbox”> Text Here</div>”

And that’s it. You’ve created a floating text box. You can also add multiple values to the margins for top, bottom, left and right.

– Dan Pinsky

~ by kravenergeist on February 21, 2011.

%d bloggers like this: