Position multiple td elements in two different rows to the right of single td element

Question

I would like to position one td element on the left-hand side of the table and make it span multiple rows. To the right of that td element I'd like to align multiple td elements in each row the original td element spans. However, since I suck at HTML/CSS, my most recent attempt looks like this.

enter image description here

What I'd like is for the Territory label and input text box to sit below the Effective on this date label/input. (Used my artistic/Paint talents to highlight the area I'd like the Territory stuff to go)

HTML/Razor

    <table class="boxMe">
        <tr>
            <td id="zipBox">
                @Html.Raw("Zip Code")
                @Html.TextAreaFor(model => model.searchZip, new { style = "width: 300px;", placeholder = "Enter up to 35 comma separated zip codes" })                    
            </td>
            <td id="dateBox">
                @Html.LabelFor(model => model.searchDate)
                @Html.TextBoxFor(model => model.searchDate, new { style="width: 80px;"})                    
            </td>
            <td id="stateBox">
                @Html.LabelFor(model => model.searchState)
                @Html.DropDownListFor(model => model.searchState, Model.StateCodes, "  ")
                <button type="submit" id="SearchButton">Search</button>                    
            </td>
        </tr>
        <tr>
            <td id="terrSearch">
                @Html.LabelFor(model => model.searchTerritory)
                @Html.TextBoxFor(model => model.searchTerritory, new { style = "width: 30px;padding-left:10px;", maxLength = 3 })
            </td>
        </tr>
    </table

CSS

#zipBox {
    float: left;
    padding-left: 20px; 
    padding-right: 10px; 
    padding-top: 20px; 
    padding-bottom: 20px; 
    vertical-align: top;
    row-span: 2;
    border:none;
}
#dateBox {
    float: left; 
    padding-right: 10px; 
    padding-top: 20px;
    border:none;
}
#stateBox {
    float: left; 
    padding-right: 20px; 
    padding-top: 20px;
    border:none;
}
#terrSearch {
    border:none;
}
.boxMe 
{
    float: left;
    border: 1px solid Silver;
    padding: 3px;
}

Using tables for layout? See: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html. You'll probably end up with far less headaches if you don't take this route. — Kittoes0124, Oct 07 '13 at 21:23

score 1 · Accepted Answer · answered Oct 07 '13 at 21:29

I know it does not directly answers your question, but you really should not be using table for positioning elements. Tables should be used for tabular data representation. Divs are probably should be used instead here. Here is the example of how to achieve what I think you want using divs

CSS

.container{
     width: 660px;
}

.container div  {
    float: left;
    width: 200px;
}

HTML

    <div class="c1">zip code
        <textarea>12345</textarea>
    </div>

    <div class="c2">
        <div>Effective on this date:
         <input type="text" />
    </div>
    <div>Territory:
        <input type="text" />
    </div>
</div>
<div  class="c3">
    State:
    <select>
        <option value="IL">IL</option>
        <option value="WA">WA</option>
        <option value="MI">MI</option>
    </select>
</div>
    </div

>

http://jsfiddle.net/BeGBa/

score 0 · Answer 2 · answered Oct 07 '13 at 21:15

It's really basic. Look:

<table class="boxMe">
    <tr>
        <td rowspan="2">
            @Html.Raw("Zip Code")
            @Html.TextAreaFor(model => model.searchZip, new { style = "width: 300px;", placeholder = "Enter up to 35 comma separated zip codes" })                    
        </td>
        <td>
            @Html.LabelFor(model => model.searchDate)
            @Html.TextBoxFor(model => model.searchDate, new { style="width: 80px;"})                    
        </td>
        <td>
            @Html.LabelFor(model => model.searchState)
            @Html.DropDownListFor(model => model.searchState, Model.StateCodes, "  ")
        </td>
    </tr>
    <tr>
        <td>
            @Html.LabelFor(model => model.searchTerritory)
            @Html.TextBoxFor(model => model.searchTerritory, new { style = "width: 30px;padding-left:10px;", maxLength = 3 })
        </td>
        <td>
            <button type="submit" id="SearchButton">Search</button>
        </td>
    </tr>
</table>

See? Simple. The table is now formatted correctly, with the same total number of cells on each row and column, in a correct grid. No CSS needed for the table. You can add CSS for the fields if you want, but this HTML is all you need.

That's what I thought, however if you take a look at the CSS I have going on that's exactly what I tried. the `zipBox` CSS class corresponds to the `td` element you have the `rowspan` specified on. In my CSS I did the same thing, specified a `rowspan` of 2 and got the above results. — NealR, Oct 07 '13 at 21:19
It comes up via Visual Studio's intellisense, however just to make sure I put the `rowspan` in the `td` tag like you have it and got the same results. — NealR, Oct 07 '13 at 21:23

score 0 · Answer 3 · answered Oct 08 '13 at 15:38

Thought I'd post the final result since it's a little different than the answer provided but uses the same concept:

HTML/Razor

    <div id="searchBox" class="boxMe">
        <div id="zipBox">
            @Html.Raw("Zip Code")
            @Html.TextAreaFor(model => model.searchZip, new { style = "width: 300px;", placeholder = "Enter up to 35 comma separated zip codes" }) 
        </div>
        <div id="dateBox">
            @Html.LabelFor(model => model.searchDate)
            @Html.TextBoxFor(model => model.searchDate, new { style="width: 80px;"})
            <div id="terrBox">
                 @Html.LabelFor(model => model.searchTerritory)
                 @Html.TextBoxFor(model => model.searchTerritory, new { style = "width: 30px;padding-left:10px;", maxLength = 3 })                   
            </div>
        </div>
        <div id="stateBox">
            @Html.LabelFor(model => model.searchState)
            @Html.DropDownListFor(model => model.searchState, Model.StateCodes, "  ")
            <button type="submit" id="SearchButton">Search</button>
        </div>
    </div>
    <div style="clear: both;"></div>

CSS

    #zipBox {
        float: left;
        padding-left: 20px; 
        padding-right: 10px; 
        padding-top: 20px; 
        padding-bottom: 20px; 
        vertical-align: top;
        border:none;
    }
    #dateBox {
        float: left; 
        padding-right: 10px; 
        padding-top: 20px;
        border:none;
    }
    #stateBox {
        float: left; 
        padding-right: 20px; 
        padding-top: 20px;
        border:none;
    } 
    #terrBox  {
        padding-top: 20px;
        padding-left: 110px;
    }
    .boxMe 
    {
        float: left;
        border: 1px solid Silver;
        padding: 3px;
     }

Position multiple td elements in two different rows to the right of single td element

3 Answers3