Divs not Responsive in item template

[djdaiz]

I have an issue with responsive design.I have div blocks which has image followed by content and all this images with their content float to left. However, the div blocks are not coming in vertical order when the window is resized. I am rendering all the content and images by using C# and asp.net code.\[code\].left{ float:left; position:relative; width:30%; height: 275px; list-style-type:none; overflow: hidden; padding: 5px; padding-left: 2.6%; max-width:30%; display: inline;} .photoBox{ width:300px; height:100px; background-position:center; max-width: 30%; max-height: 100%; }\[/code\]\[code\] <ItemTemplate> <!-- Float all game content to left --> <div class="left"> <div class="title"> <h4> <asp:Label ID="title" Text=<%#Eval("Title") %> runat="server" Font-Underline="true" ></asp:Label><br /> </h4> </div><br />\[/code\]The Image goes below.\[code\] <div class="photoBox"> <asp:HyperLink ID="imageHyperlink1" runat="server" NavigateUrl=<%#Eval("Description")%> Target="_blank"> <asp:Image ID="gameImage" ImageUrl=<%#Eval("Image1")%> runat="server" CssClass="image" /> </asp:HyperLink> </div><!-- End of photoBox --> <asp:Label ID="genreLabel" Text="Platform: PC" runat="server" ></asp:Label><br /> <asp:Label ID="releaseDateLabel" Text="Release Date: " runat="server" ></asp:Label> </div> <!-- End of left div --> </ItemTemplate>\[/code\]