html - MVC Arranging items in a row -

Then I'm displaying items from a list, on Internet Explorer 8 it will look down:

  1 2 3 4 5 6 7 8 9  

However, Internet Explorer 9 has been put down in a different way:

  1 2 3 4 5  

I have noticed that when I remove the field it fixes the problem, but I would like a way around without removing the field

See

  @forch (in model A. miscellaneous items) {& lt; Field style style = "width: 39 9px; height: 210px; range: 1px; border color: black; background-color: white" & gt; & Lt; TR & gt; & Lt; TD & gt; & Lt; Div class = "box" & gt; & Lt; A href =@Url.Action ("bid", "item", new {id = item.ItemsID}) & gt;  & Lt; Div class = "box" & gt; & Lt; Br / & gt; & Lt; Br / & gt; & Lt; B & gt; Title: & lt; / B & gt; @ Html.ActionLink (@ item.title, "bid", "item", new {id = item.ItemsID}, "") & lt; Br / & gt; & Lt; B & gt; Artist: & lt; / B & gt; @ Item.artist & lt; Br / & gt; & Lt; B & gt; Condition: & lt; / B & gt; @ Item.condition & lt; Br / & gt; & Lt; B & gt; Current bid: & lt; / B & gt; @if (item.currentBid == 0) {& lt; Font color = "# E60000" & gt; & Lt; B & gt; No bids & lt; / B & gt; & Lt; / Font & gt; } Other {& lt; Font color = "# E 60000" & gt; & Lt; B & gt; £@item.currentBid< / B & gt; & Lt; / Font & gt; } & Lt; Br / & gt; & Lt; P & gt; & Lt; / P & gt; & Lt; / Div & gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; / Fieldset & gt; }  

css

  .box {padding: 15px 0px 0px 0px; Width: 210px; Swim left; Height: 150px; }  

What are you doing here & lt; Fieldet & gt; For each item in your model, then you are creating a table row within that field, which means that there is a new line for each of your items, after that you can create two div elements Trying to rotate with the class of .box , which is 210px width, the preceding fieldset width is 39 9px. It's not going to work.

For what I am trying to achieve, there will be a question about the need to use fields or tables, and & lt; Br / & gt; As a means of leaving your page (and tags as your logic of your laying, and as a logic ...) But with these questions you can study this question far away.

Without fixing all issues with my code, I do something like this (this is not perfect but it shows my proposal):

  & Lt; Div class = "wrapper" & gt; @forcha (various items in the model) {& lt; Div class = "container" & gt; & Lt; Div class = "box-image" & gt; & Lt; A href =@Url.Action ("bid", "item", new {id = item.ItemsID}) & gt; & Lt; Img alt = "@ item.title" src = "@ Url.Content (@ item.image1)" & gt; & Lt; / A & gt; & Lt; / Div & gt; & Lt; Div class = "box-text" & gt; & Lt; Span & gt; & Lt; B & gt; Title: & lt; / B & gt; @ Html.ActionLink (@ item.title, "bid", "item", new {id = item.ItemsID}, "") & lt; / Span & gt; & Lt; Span & gt; & Lt; B & gt; Artist: & lt; / B & gt; @ Item.artist & lt; / Span & gt; & Lt; Span & gt; & Lt; B & gt; Condition: & lt; / B & gt; @ Item.condition & lt; / Span & gt; & Lt; Span & gt; & Lt; B & gt; Current bid: & lt; / B & gt; @if (item.currentBid == 0) {& lt; Font color = "# E60000" & gt; & Lt; B & gt; No bids & lt; / B & gt; & Lt; / Font & gt; } Other {& lt; Font color = "# E 60000" & gt; & Lt; B & gt; £@item.currentBid< / B & gt; & Lt; / Font & gt; } & Lt; / Span & gt; & Lt; / Div & gt; & Lt; / Div & gt; } & Lt; / Div & gt;  

Based on what you've provided, my CSS will look something like this:

  .wrapper {width: 1200px; }. Container {boundary: 1px solid # 000000; Background-color: #FFFFFF; Swim left; Margin: 1px; Width: 396px; }. Box-image {float: left; Width: 200px; } .box-image a {height: 200px; Width: 200px; Profile: None; } .box-text {float: left; Padding-top: 60px; Width: 196 Px; } Period {Performance: Block; }  

To ensure that your item is displayed in three rows, I want a fixed-width 'cover' outside the @foreach loop If you are aiming for a fully responsive site then this is not the way to go, but for this demonstration purposes I have included it.

I have knocked this together that how it looks when it is repeated twice, but I am making some assumptions on the plans of your layout on the basis of the CSS provided in your question. I checked this solution in several versions of IE, with Firefox and Chrome, and it works fine for me.