Post
Ask Question

Float Div Control in ASP.NET Using CSS

This article will show you how you can use style sheet to make a div box align to left side of each other. In this article i have used css style sheet to align the div at the left of each other. So for this we add some div controls in the page.
  1. <div>Div Control 1</div>  
  2.        <div>Div Control 2</div>  
  3.        <div>Div Control 3</div>  
  4.        <div>Div Control 4</div>  
  5.        <br style="clear: left;" />  
  6.        <div>Div Control 5</div>  
  7.        <div>Div Control 6</div>  
  8.        <div>Div Control 7</div>  
  9. <div>Div Control 8</div> 
Now use the below css style sheet in the header of the page. 
  1. .floatleft_div 
  2.       {  
  3.            float: left;  
  4.            width: 100px;  
  5.            height: 100px;  
  6.            background-color: green;  
  7.            text-align: center;  
  8.            border: 2px solid black;  
  9.        } 
The above css style sheet used float left for making div control move to left of each other. In this width and height is used for make the div control look like a box.
 
Now assign the style to the div control.
  1. <div class="floatleft_div">Div Control 1</div>  
  2.       <div class="floatleft_div">Div Control 2</div>  
  3.       <div class="floatleft_div">Div Control 3</div>  
  4.       <div class="floatleft_div">Div Control 4</div>  
  5.       <br style="clear: left;" />  
  6.       <div class="floatleft_div">Div Control 5</div>  
  7.       <div class="floatleft_div">Div Control 6</div>  
  8.       <div class="floatleft_div">Div Control 7</div>  
  9. <div class="floatleft_div">Div Control 8</div> 
In above html tag i have assign the class to all the div controls. Check below the complete code of the page.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication7.Csharpcorner.WebForm1" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title>Flot Div Control Side By Side Using Css or Style Sheet in Asp.net</title>  
  8.     <style>  
  9.         .floatleft_div 
  10.         {  
  11.             float: left;  
  12.             width: 100px;  
  13.             height: 100px;  
  14.             background-color: green;  
  15.             text-align: center;  
  16.             border: 2px solid black;  
  17.         }  
  18.     </style>  
  19. </head>  
  20. <body>  
  21.     <form id="form1" runat="server">  
  22.         <div class="floatleft_div">Div Control 1</div>  
  23.         <div class="floatleft_div">Div Control 2</div>  
  24.         <div class="floatleft_div">Div Control 3</div>  
  25.         <div class="floatleft_div">Div Control 4</div>  
  26.         <br style="clear: left;" />  
  27.         <div class="floatleft_div">Div Control 5</div>  
  28.         <div class="floatleft_div">Div Control 6</div>  
  29.         <div class="floatleft_div">Div Control 7</div>  
  30.         <div class="floatleft_div">Div Control 8</div>  
  31.     </form>  
  32. </body>  
  33. </html> 
In above <br style="clear: left;" /> is used to make the div appear in new line of the page. Now run the page to check the output.