You'll need to study the concept of "floating" divs.

Normal layout flow is vertically down the page. float:left on a div element will allow them to flow horizontally. Then, when you are ready to end a hoizontal run, and move vertically down, you need a filler element with clear:both after the last horizontal element on the previous row.


Heck, it's actually kinda hard to explain. But do some googling on divs with float:left and clear:both

For a simple example, look at page tab #9 on this link: http://www.barelyfitz.com/screencast/html-training/css/positioning/





>Hi everybody,
>
>I want to have the following layout
>

>text1
>
>text2
>
>Contact1                                   Contact2
>Name                                         Name
>email                                          email
>phone ext                                  phone ext
>
>

>
>So, I want Contact1 and Contact2 controls to be side by side and also the same for phone controls.
>
>I found this http://welovecss.com/showthread.php?t=465 and I tried implementing it this way:
>

><div id="Contacts">
>    <div id="leftcolumn">
>        <div class="editor-label">
>            @Html.LabelFor(model => model.Contact1)
>        </div>
>        <div class="editor-field">
>            @Html.EditorFor(model => model.Contact1)
>            @Html.ValidationMessageFor(model => model.Contact1)
>        </div>
>
>        <div class="editor-label">
>            @Html.LabelFor(model => model.Email1)
>        </div>
>        <div class="editor-field">
>            @Html.EditorFor(model => model.Email1)
>            @Html.ValidationMessageFor(model => model.Email1)
>        </div>
>
>        <div class="editor-label">
>            @Html.LabelFor(model => model.Phone1)
>        </div>
>        <div class="editor-field">
>            @Html.EditorFor(model => model.Phone1)
>            @Html.ValidationMessageFor(model => model.Phone1)
>        </div>
>
>        <div class="editor-label">
>            @Html.LabelFor(model => model.Ext1)
>        </div>
>        <div class="editor-field">
>            @Html.EditorFor(model => model.Ext1)
>            @Html.ValidationMessageFor(model => model.Ext1)
>        </div>
>    </div>
>    <div id="rightcolumn">
>        <div class="editor-label">
>            @Html.LabelFor(model => model.Contact2)
>        </div>
>        <div class="editor-field">
>            @Html.EditorFor(model => model.Contact2)
>            @Html.ValidationMessageFor(model => model.Contact2)
>        </div>
>
>        <div class="editor-label">
>            @Html.LabelFor(model => model.Email2)
>        </div>
>        <div class="editor-field">
>            @Html.EditorFor(model => model.Email2)
>            @Html.ValidationMessageFor(model => model.Email2)
>        </div>
>
>        <div class="editor-label">
>            @Html.LabelFor(model => model.Phone2)
>        </div>
>        <div class="editor-field">
>            @Html.EditorFor(model => model.Phone2)
>            @Html.ValidationMessageFor(model => model.Phone2)
>        </div>
>
>        <div class="editor-label">
>            @Html.LabelFor(model => model.Ext2)
>        </div>
>        <div class="editor-field">
>            @Html.EditorFor(model => model.Ext2)
>            @Html.ValidationMessageFor(model => model.Ext2)
>        </div>
>    </div>
>    <div class="clear"></div>
></div>

>
>but it doesn't seem to work at all. How can I correctly and nicely put them side by side without using table?
>
>Thanks in advance.