How to display text inline using the box model in Visual Studio

Home > Search > How-to

For the purpose of this tutorial, lets say you have some text you wish to display inline, where you want to align some of the text left and align some of the text right. First, add this to your styles.css file. Notice the width is 50%, and padding is only applied to the top and bottom. We do not apply padding to the left or right, because this causes the width to be greater than 100%.

.box50 {
    box-sizing: border-box;
    width: 50%;
    float: left;


Make sure the head of your page references the styles.css.

<link href="css/Styles.css" rel="stylesheet" type="text/css" media="screen" />


Use the following HTML in the body.

<div class="box50">
<div class="box50">
<div class="clear:both"></div>  

This causes the text to be inline.


Add a Comment

We will never share your name or email with anyone. Enter your email if you would like to be notified when we respond to your comment.

Please enter in the box below so that we can be sure you are a human.