aligning left and right in same line dynamically asp.net - css

Question

I am Displaying Picture dynamically in gallery ,below picture i displayed product name,product weight , product color, product quality,origin and quantity.It is currently displayed in 6 lines,each item per line...
I want to display two items in each line and 6 item in 3 lines.First item should align left , second item on right on first line and so on.how can i do it? this is my code.
using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class jewellery : System.Web.UI.Page
{
public void select_data()
{
//String con_str = #"Data Source=.\SQLEXPRESS;AttachDbFilename=D:\asim\bootstrap1 (1)\App_Data\Database.mdf;Integrated Security=True;User Instance=True";
String con_str = #"Data Source=KHAN-PC\SQLEXPRESS;Initial Catalog=D:\ASIM\BOOTSTRAP1 (1)\APP_DATA\DATABASE.MDF;Integrated Security=True";
//string con_str = #"Data Source=(LocalDB)\v11.0;AttachDbFilename=E:\project\App_Data\Database.mdf;Integrated Security=True";
SqlConnection con = new SqlConnection(con_str);
con.Open();
string query = "select * from jewellery1";
SqlCommand cmd = new SqlCommand(query, con);
SqlDataReader reader = cmd.ExecuteReader();
int n = 1;
String id = "Image";
while (reader.Read())
{
System.Web.UI.HtmlControls.HtmlGenericControl section = new System.Web.UI.HtmlControls.HtmlGenericControl("section");
section.ID = "portfolio";
section.Attributes["class"] = "bg-light-gray";
System.Web.UI.HtmlControls.HtmlGenericControl row = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
row.Attributes["class"] = "row";
Byte[] bytes = (Byte[])reader["item_image"];
String item_name = (String)reader["item_name"];
String color = (String)reader["item_color"];
String weight = (String)reader["item_weight"];
String quality = (String)reader["item_quality"];
String clarity = (String)reader["item_clarity"];
String origin = (String)reader["item_origin"];
System.Web.UI.HtmlControls.HtmlGenericControl createDiv = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
createDiv.ID = "createDiv" + n + 11;
System.Web.UI.HtmlControls.HtmlGenericControl createDiv1 =
new System.Web.UI.HtmlControls.HtmlGenericControl("div");
System.Web.UI.HtmlControls.HtmlGenericControl hover = new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");
hover.Attributes["class"] = "portfolio-hover";
System.Web.UI.HtmlControls.HtmlGenericControl hover_content = new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");
hover_content.Attributes["class"] = "portfolio-hover-content";
System.Web.UI.HtmlControls.HtmlGenericControl i = new System.Web.UI.HtmlControls.HtmlGenericControl("i");
i.Attributes["class"] = "fa fa-2x";
createDiv1.ID = "createDiv" + n + 12;
createDiv1.Attributes["class"] = "col-md-4 col-sm-6 portfolio-item zoomIn animated";
createDiv1.Attributes["data-wow-duration"] = "1500ms";
createDiv1.Attributes["data-wow-delay"] = "100ms";
createDiv.Attributes["class"] = "portfolio-caption";
LinkButton a = new LinkButton();
a.Attributes["class"] = "portfolio-link";
a.Attributes["data-toggle"] = "modal";
a.Click += new EventHandler(test);
a.CommandArgument = item_name;
/* System.Web.UI.HtmlControls.HtmlGenericControl a = new System.Web.UI.HtmlControls.HtmlGenericControl("a");
a.Attributes["class"] = "portfolio-link";
a.Attributes["data-toggle"] = "modal";*/
System.Web.UI.HtmlControls.HtmlGenericControl h1 = new System.Web.UI.HtmlControls.HtmlGenericControl("h4");
System.Web.UI.HtmlControls.HtmlGenericControl h2 = new System.Web.UI.HtmlControls.HtmlGenericControl("h4");
System.Web.UI.HtmlControls.HtmlGenericControl h3 = new System.Web.UI.HtmlControls.HtmlGenericControl("h4");
System.Web.UI.HtmlControls.HtmlGenericControl h4 = new System.Web.UI.HtmlControls.HtmlGenericControl("h4");
System.Web.UI.HtmlControls.HtmlGenericControl h5 = new System.Web.UI.HtmlControls.HtmlGenericControl("h4");
System.Web.UI.HtmlControls.HtmlGenericControl h6 = new System.Web.UI.HtmlControls.HtmlGenericControl("h4");
h1.Attributes["align"] = "LEFT";
h1.Attributes["style"] = "color:black";
h1.InnerHtml = "Name &nbsp &nbsp :&nbsp &nbsp " + item_name;
h2.Attributes["align"] = "RIGHT";
h2.Attributes["style"] = "color:black";
h2.InnerHtml = "color &nbsp &nbsp &nbsp &nbsp :&nbsp &nbsp " + color;
h3.Attributes["align"] = "LEFT";
h3.Attributes["style"] = "color:black";
h3.InnerHtml = "Weight &nbsp &nbsp: &nbsp &nbsp " + weight;
h4.Attributes["align"] = "LEFT";
h4.Attributes["style"] = "color:black";
h4.InnerHtml = "Quality &nbsp&nbsp: &nbsp " + quality;
h5.Attributes["align"] = "LEFT";
h5.Attributes["style"] = "color:black";
h5.InnerHtml = "Clarity &nbsp&nbsp: &nbsp " + clarity;
h6.Attributes["align"] = "LEFT";
h6.Attributes["style"] = "color:black";
h6.InnerHtml = "Origin &nbsp&nbsp: &nbsp " + origin;
System.Web.UI.HtmlControls.HtmlGenericControl hyp = new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");
hyp.Attributes["class"] = "portfolio-link";
System.Web.UI.WebControls.Image tb = new System.Web.UI.WebControls.Image() { ID = "Image" + n + 10 };
tb.Height = 250;
tb.Width = 500;
tb.ImageUrl = "data:image/png;base64," + Convert.ToBase64String(bytes);
hover_content.Controls.Add(i);
a.Controls.Add(hover);
a.Controls.Add(hover_content);
a.Controls.Add(tb);
createDiv.Controls.Add(h1);
createDiv.Controls.Add(h2);
createDiv.Controls.Add(h3);
createDiv.Controls.Add(h4);
createDiv.Controls.Add(h5);
createDiv.Controls.Add(h6);
createDiv1.Controls.Add(a);
createDiv1.Controls.Add(createDiv);
// row.Controls.Add(createDiv1);
//section.Controls.Add(row);
divid1.Controls.Add(createDiv1);
Console.WriteLine("{0}\t{1}", reader.GetInt32(0),
reader.GetString(1));
n++;
}
}
protected void test(object sender, EventArgs e)
{
String wagerId = ((LinkButton)sender).CommandArgument;
Response.Redirect("awesome.aspx?eid=" + wagerId);
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
select_data();
}
}
protected void Button1_Click(object sender, EventArgs e)
{
}
}
Updated Code
Bro your code didn't work. I tried this way,its working somehow fine . It displays H1 on left ,H2 on right.thats fine but it also displays h3 in center,as it should be on next line.how can I resolve it.
h1.Attributes["class"] = "links left";
h1.Attributes["style"] = "color:black";
h1.InnerHtml = "Name &nbsp &nbsp :&nbsp &nbsp " + item_name;
h2.Attributes["class"] = "links right";
h2.Attributes["style"] = "color:black";
h2.InnerHtml = "color &nbsp &nbsp &nbsp &nbsp :&nbsp &nbsp " + color;
h3.Attributes["class"] = "links right";
h3.Attributes["style"] = "color:black";
h3.InnerHtml = "Weight &nbsp &nbsp: &nbsp &nbsp " + weight;
h4.Attributes["align"] = "LEFT";
h4.Attributes["style"] = "color:black";
h4.InnerHtml = "Quality &nbsp&nbsp: &nbsp " + quality;
<style>
.mainlinks
{
text-align:right;
margin-top:3px;
margin-right:10px;
margin-bottom:0px;
padding:0px;
}
a.links:link {
color: #FF0000; text-decoration: none;
text-align:left;
margin-left:8px;
margin-top:300px;
margin-bottom:0px;
padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
}
.right { float: right }
.left { float: left }
</style>

Answer 1

Use the following code. I've removed Attributes["align"] = "LEFT" part and added float: left;width: 50%;. Adjust the width percentage according to your needs.
h1.Attributes["style"] = "color:black;float: left;width: 50%; ";
h1.InnerHtml = "Name &nbsp &nbsp :&nbsp &nbsp " + item_name;
h2.Attributes["style"] = "color:black;float: left;width: 50%; ";
h2.InnerHtml = "color &nbsp &nbsp &nbsp &nbsp :&nbsp &nbsp " + color;
h3.Attributes["style"] = "color:black;float: left;width: 50%; ";
h3.InnerHtml = "Weight &nbsp &nbsp: &nbsp &nbsp " + weight;
h4.Attributes["style"] = "color:black;float: left;width: 50%; ";
h4.InnerHtml = "Quality &nbsp&nbsp: &nbsp " + quality;
h5.Attributes["style"] = "color:black;float: left;width: 50%; ";
h5.InnerHtml = "Clarity &nbsp&nbsp: &nbsp " + clarity;
h6.Attributes["style"] = "color:black;float: left;width: 50%; ";
h6.InnerHtml = "Origin &nbsp&nbsp: &nbsp " + origin;
UPDATE (Commented out the variables for adjusting in my VS)
var n = 1;
while(n < 5) {
System.Web.UI.HtmlControls.HtmlGenericControl createDiv = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
createDiv.ID = "createDiv" + n + 11;
System.Web.UI.HtmlControls.HtmlGenericControl createDiv1 =
new System.Web.UI.HtmlControls.HtmlGenericControl("div");
System.Web.UI.HtmlControls.HtmlGenericControl hover = new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");
hover.Attributes["class"] = "portfolio-hover";
System.Web.UI.HtmlControls.HtmlGenericControl hover_content = new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");
hover_content.Attributes["class"] = "portfolio-hover-content";
System.Web.UI.HtmlControls.HtmlGenericControl i = new System.Web.UI.HtmlControls.HtmlGenericControl("i");
i.Attributes["class"] = "fa fa-2x";
createDiv1.ID = "createDiv" + n + 12;
createDiv1.Attributes["class"] = "col-md-4 col-sm-6 portfolio-item zoomIn animated";
createDiv1.Attributes["data-wow-duration"] = "1500ms";
createDiv1.Attributes["data-wow-delay"] = "100ms";
createDiv.Attributes["class"] = "portfolio-caption";
LinkButton a = new LinkButton();
a.Attributes["class"] = "portfolio-link";
a.Attributes["data-toggle"] = "modal";
//a.Click += new EventHandler(test);
//a.CommandArgument = item_name;
/* System.Web.UI.HtmlControls.HtmlGenericControl a = new System.Web.UI.HtmlControls.HtmlGenericControl("a");
a.Attributes["class"] = "portfolio-link";
a.Attributes["data-toggle"] = "modal";*/
System.Web.UI.HtmlControls.HtmlGenericControl h1 = new System.Web.UI.HtmlControls.HtmlGenericControl("h4");
System.Web.UI.HtmlControls.HtmlGenericControl h2 = new System.Web.UI.HtmlControls.HtmlGenericControl("h4");
System.Web.UI.HtmlControls.HtmlGenericControl h3 = new System.Web.UI.HtmlControls.HtmlGenericControl("h4");
System.Web.UI.HtmlControls.HtmlGenericControl h4 = new System.Web.UI.HtmlControls.HtmlGenericControl("h4");
System.Web.UI.HtmlControls.HtmlGenericControl h5 = new System.Web.UI.HtmlControls.HtmlGenericControl("h4");
System.Web.UI.HtmlControls.HtmlGenericControl h6 = new System.Web.UI.HtmlControls.HtmlGenericControl("h4");
h1.Attributes["style"] = "color:black;float: left;width: 50%; ";
h1.InnerHtml = "Name &nbsp &nbsp :&nbsp &nbsp " + "item_name";
h2.Attributes["style"] = "color:black;float: left;width: 50%; ";
h2.InnerHtml = "color &nbsp &nbsp &nbsp &nbsp :&nbsp &nbsp " + "color";
h3.Attributes["style"] = "color:black;float: left;width: 50%; ";
h3.InnerHtml = "Weight &nbsp &nbsp: &nbsp &nbsp " + "weight";
h4.Attributes["style"] = "color:black;float: left;width: 50%; ";
h4.InnerHtml = "Quality &nbsp&nbsp: &nbsp " + "quality";
h5.Attributes["style"] = "color:black;float: left;width: 50%; ";
h5.InnerHtml = "Clarity &nbsp&nbsp: &nbsp " + "clarity";
h6.Attributes["style"] = "color:black;float: left;width: 50%; ";
h6.InnerHtml = "Origin &nbsp&nbsp: &nbsp " + "origin";
System.Web.UI.HtmlControls.HtmlGenericControl hyp = new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");
hyp.Attributes["class"] = "portfolio-link";
System.Web.UI.WebControls.Image tb = new System.Web.UI.WebControls.Image() { ID = "Image" + n + 10 };
tb.Height = 250;
tb.Width = 500;
tb.ImageUrl = "data:image/png;base64," /*+ Convert.ToBase64String(bytes)*/;
hover_content.Controls.Add(i);
a.Controls.Add(hover);
a.Controls.Add(hover_content);
a.Controls.Add(tb);
createDiv.Controls.Add(h1);
createDiv.Controls.Add(h2);
createDiv.Controls.Add(h3);
createDiv.Controls.Add(h4);
createDiv.Controls.Add(h5);
createDiv.Controls.Add(h6);
createDiv1.Controls.Add(a);
createDiv1.Controls.Add(createDiv);
// row.Controls.Add(createDiv1);
//section.Controls.Add(row);
divid1.Controls.Add(createDiv1);
n++;
}