How can I get my Sharepoint Child Controls to align horizontally?

Question

I am creating controls in a Web Part's overridden CreateChildControls() method.

My code is this (no pun intended):

this.Controls.Add(new LiteralControl("<h2>Duckbilled Platypus Unlimited</h2>"));
this.Controls.Add(new LiteralControl("<h3>Angle of Repose of Bill: "));
boxRequestDate = new TextBox();
this.Controls.Add(boxRequestDate);
this.Controls.Add(new LiteralControl("</h3>"));

this.Controls.Add(new LiteralControl("<h3>Venomosity/Lethality Quotient of Poison Toe: "));
boxPaymentAmount = new TextBox();
this.Controls.Add(boxPaymentAmount);
this.Controls.Add(new LiteralControl("</h3>"));

...and I see this:

enter image description here

What I want to see is the "Venomosity" LiteralControl and TextBox to the right of / horizontally aligned with the first LiteralControl and TextBox (to the right of them, not below them). How can I achieve this?

score 1 · Accepted Answer · answered Apr 02 '15 at 21:41

try something like this:

this.Controls.Add(new LiteralControl("<h2>Duckibilled Platypus Unlimited</h2>"));
this.Controls.Add(new LiteralControl("<h3 style='display: inline-block; width: 400px;'>Angle of Repose of Bill: </h3>"));
boxRequestDate = new TextBox();
this.Controls.Add(boxRequestDate);

this.Controls.Add(new LiteralControl("<br />"));

this.Controls.Add(new LiteralControl("<h3 style='display: inline-block; width: 400px;'>Venomosity/Lethality Quotient of Poison Toe: </h3>"));
boxPaymentAmount = new TextBox();
this.Controls.Add(boxPaymentAmount);

Please note that you cannot have a textbox inside of an h3 tag (via HTML rules). Also, it would be better to use a class inside of CSS instead of inline styles like this, but this way should work for you. It would also be better to handle the "break" with CSS instead of the "
", but for a quick fix this will do it.

How can I get my Sharepoint Child Controls to align horizontally?

1 Answers1