How to Get a Twitter Button to Float
Floating an element on your Web page allows you to wrap text around the item in the same way that text often flows around an image in newspapers or magazines. Floating a graphic button or image can improve the look of a Web page by eliminating large gaps and white space between images and text. Floating can also help reduce the overall length of the Web page, because the text sits beside graphics and images. To get a Twitter button to float on a Web page, you'll need to create a Cascading Style Sheet design element, and summon this command in HyperText Markup Language code for the Twitter button.
Other People Are Reading
Instructions
-
-
1
Launch your HTML-editing program, Web-coding and design program or a plain text-editing tool, such as Microsoft Notepad.
-
2
Open the Web page that contains the Twitter button that you want to float. Scroll to the page's header section, which is all the content and HTML code between the <head> and </head> tags.
-
-
3
Copy and paste the following CSS code into the head section of the Web page:
<STYLE type="text/css">
/* remove default margins and padding */
* {
padding: 0 0 0 0;
margin: 0 0 0 0
}
/*Set the dimensions for the main division */
#main {
width: 100%;
float: left
}
/* Set the dimensions for the left division.
Add float */
#left {
width: 72%;
margin: 0 4% 0 4%;
float: left;
}
/* Set the dimensions for the right division.
Add float*/
#right {
width: 16%;
margin: 0 4% 0 0;
float: left;
}
</STYLE>
This code will float items to the left or right in the HTML code in the main body of the Web page.
-
4
Scroll to the location of the Twitter button in the main body section of the Web page. This is all the content between the <body> and </body > tags.
-
5
Paste or type the following code immediately before the Twitter button. Enter "<div id="left">" to float the Twitter button to the left of the page. Enter "<div id="right">" to float the button to the right of the page. Paste "</div>" immediately after the Twitter button.
-
6
Save the edited Web page and upload it to your website server. The Twitter button will now float with all text wrapped around the graphic.
-
1
Tips & Warnings
If your website uses a separate CSS style sheet file, add the CSS code in Step 4 to this file rather than the header section of the relevant Web page.
Don't alter any of the number values in the CSS code example. All values in the left and right division sections must add up to 100 percent for the code to work correctly.
References
Resources
- Photo Credit Comstock/Comstock/Getty Images
