I am creating a two column flow (i.e. table) using Div's. I have everything worked out except I cannot figure out how to center the image inside the DIV. Below you will see my code. Hopefully there is enough there for you to provide some suggestions. The left div is set to 33% and the right div is set to 67%. There is a master page but I am working on the content page.
Here is what the web page looks like now.
Here is the code in my code behind file
Public Class SidePanel1 Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load LoadCategoryListBox() LoadImage() End Sub Private Sub LoadCategoryListBox() Me.CategoryListBox1.Items.Add("Milk") Me.CategoryListBox1.Items.Add("Tea") Me.CategoryListBox1.Items.Add("") Me.CategoryListBox1.Items.Add("Sugar") End Sub Private Sub LoadImage() Dim divContentLeftImage As New System.Web.UI.HtmlControls.HtmlGenericControl("DIV") Dim divContentRightImage As New System.Web.UI.HtmlControls.HtmlGenericControl("DIV") Dim divContentClearFloat As New System.Web.UI.HtmlControls.HtmlGenericControl("DIV") ' divContentLeftImage.ID = "first_image_div" divContentLeftImage.Attributes("class") = "left_image" Dim ImageLeft As New Image ImageLeft.Height = "150" ImageLeft.Width = "150" ImageLeft.ImageUrl = "images/boatbig.png" ImageLeft.AlternateText = "Alternate text for BigBoat" ' divContentLeftImage.Controls.Add(ImageLeft) ' divContentRightImage.ID = "first_image_div" divContentRightImage.Attributes("class") = "right_image" Dim ImageRight As New Image ImageRight.Height = "150" ImageRight.Width = "150" ImageRight.ImageUrl = "images/boatbig.png" ImageRight.AlternateText = "Alternate text for BigBoat" ' divContentRightImage.Controls.Add(ImageRight) ' divContentClearFloat.ID = "first_clear_float_div" divContentClearFloat.Attributes("class") = "clear_float" ' ' Me.image_table_outer_div.Controls.Add(divContentLeftImage) Me.image_table_outer_div.Controls.Add(divContentRightImage) Me.image_table_outer_div.Controls.Add(divContentClearFloat) ' ' divContentLeftImage.ID = "second_image_div" divContentLeftImage.Attributes("class") = "left_image" 'Dim ImageLeft As New Image ImageLeft.Height = "150" ImageLeft.Width = "150" ImageLeft.ImageUrl = "images/boatbig.png" ImageLeft.AlternateText = "Alternate text for BigBoat" ' divContentLeftImage.Controls.Add(ImageLeft) ' divContentRightImage.ID = "second_image_div" divContentRightImage.Attributes("class") = "right_image" 'Dim ImageRight As New Image ImageRight.Height = "150" ImageRight.Width = "150" ImageRight.ImageUrl = "images/boatbig.png" ImageRight.AlternateText = "Alternate text for BigBoat" ' divContentRightImage.Controls.Add(ImageRight) ' divContentClearFloat.ID = "first_clear_float_div" divContentClearFloat.Attributes("class") = "clear_float" End SubEnd Class
your applied classes are causing this.
In your classes :- .left_image and .right_image
You have added definition as:
float:left
And this is causing issue.
Just for testing make it as:
float:right
Your all images should move to right side.
For solution, remove that first and try by adding text-align: center
Also add same for
image_table_outer_div also.
Hope this helps you.