Utilizing a div element within a loop to showcase content in a horizontal layout

I'm currently working on a project where I need to showcase YouTube links on a webpage, accompanied by brief descriptions. To achieve this, I am utilizing a repeater. Below is the item template I have implemented:

<Item Template>
  <asp:Panel ID="Panel3" runat="server" Style="margin-left:10px; margin-bottom:0px" width="800px" Font-Size="small">
    <table style="width:790px">
      <div runat="server" style="float:left; overflow:hidden; display:block">
        <tr>
          <td>
            <iframe width="370" height="210" src="<%#Eval("VideoLink") %>
          </td>
        </tr>
          <td><%#Eval("VideoDesc") %></td>
        </tr>
      </div>
    </table>
  </asp:Panel>
</ItemTemplate>

Even though the display is functioning properly, the content is appearing vertically. I am aiming for a horizontal alignment until the table width is filled, and then move on to the next line. I initially tried using the div tag for this purpose, but unfortunately it did not yield the desired result.

Moreover, it would be great to have a horizontal line separating the video rows, but if this requires extensive effort, I am open to skipping this feature.

htmlcssasp.nettagsrepeater

Answer №1

It seems like using a section element instead of a table and setting the div as an inline-block element would be a better choice for your needs. This will ensure proper alignment.

<Item Template>
  <asp:Panel ID="Panel3" runat="server" Style="margin-left:10px; margin-bottom:0px" width="800px" Font-Size="small">
    <section style="width:790px">
      <div runat="server" style="display:inline-block">
        
            <iframe width="370" height="210" src=""></iframe>
         
      </div>
      <div runat="server" style="display:inline-block">
       
            <iframe width="370" height="210" src=""></iframe>
         
      </div>
      <div runat="server" style="display:inline-block">
       
            <iframe width="370" height="210" src=""></iframe>
         
      </div>
    </section>
  </asp:Panel>
</ItemTemplate>

Answer №2

Avoid using tables for this task as it doesn't make sense, and don't nest div elements inside tables either. It's not a recommended practice.

Instead, use div elements like this:

<div runat="server" style="float:left; overflow:hidden; display:block">

    <div class="item">
        <iframe width="370" height="210" src="<%#Eval("VideoLink") %>">       
        <span class="description"><%#Eval("VideoDesc") %></span>
    </div>

</div>

and apply the following styles in a CSS stylesheet

.server {
    display: flex;
    flex-flow: row-wrap;
}

.server .item {
    border-bottom: 1px solid black;
}

.server .item .description {
    display: block;
}

This approach should work effectively for the task at hand.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Merging backend code (Java and Python) into HTML for seamless integration

While I have a solid background in back-end coding languages like Java and Python, the task at hand requires integrating this code into a website. The backend code comprises various methods and classes to encrypt text messages using encryption techniques ...

javapythonhtmlencryptionweb

Tips for improving the speed of loading infinite scroll pages

I am currently working on scraping over 100k rows from the provided URL. The data goes back approximately a month, loading in batches of 7-8 rows at a time. My current approach involves using a macro to scroll down the page slowly, which is effective but ...

javascripthtmlseleniumweb-scrapingautomation

Creating a responsive grid layout with HTML and CSS

Is there a way to adjust the grid layout so that the second row of blocks align just below the corresponding block above instead of creating an entirely new row? http://jsfiddle.net/AndyMP/wSvrN/ body { margin-left: 0px; margin-top: 0px; marg ...

htmlcssgrid

Is it better to use enum rather than ul for inline lists within paragraphs in HTML5?

Reflecting on the passage below: So in the initial group, we merge these 3 codes: - AA - BB - CC with the following codes: - Aa - Ab - Ac to achieve the desired outcome. Is this paragraph semantically incorrect? If not, how should it be written in H ...

htmlsemantic-markup

Neighbor wrapping causing Flex to shrink

Is there a way to make the element shrink when the flex container below grows due to flex-wrapping? Currently, the new space is created below the container instead of shrinking the one above. The flex-grow and flex-shrink properties do not seem to work as ...

htmlcssflexbox

What is the best method for utilizing an autocomplete plugin to update a div element?

I am seeking assistance regarding implementing an autocomplete feature in a DIV that displays the names, images and ages of other users as they are typed into a field positioned above the DIV. I want this autocomplete functionality to mimic Facebook' ...

htmlajaxjquery-uijquery

Clickability issue with searchbar results caused by onBlur event

My searchbar functionality includes showing results in a dropdown list when the user searches. However, I am facing an issue with the onBlur event that changes the display of the list to none when the user clicks away from the search box. The problem aris ...

javascripthtmlreactjs

Is it possible to modify the text displayed within a select element?

Currently, I am working on enhancing a react app by making the dropdown options in a select element more informative than what is displayed as the selection. For instance: Selected: A However, when you click on the element for the dropdown it displays: ...

htmlcssreactjsselect

Angular Universal causes SASS imports to malfunction

Check out this sample app that you can download to see the issue in action: https://github.com/chrillewoodz/ng-boilerplate/tree/universal I am currently working on implementing angular universal, but I'm encountering an error with a SCSS import in o ...

cssangularsassangular-universal

Is there a way to showcase English and CJK text vertically with CSS?

This particular issue was first discussed 14 years ago on Stack Overflow, but a definitive solution still remains elusive. My goal is to have both CJK and Latin characters displayed vertically, with their bottoms facing the right side. While writing-mode ...

htmlcsscross-browserlocalecjk

Eliminate HTML nodes that are not currently visible

I am currently developing a Vue/Vuetify application that showcases a large number of images (10-20k) in a grid view along with some additional information. These images are grouped into different sections, and clicking on an image opens an overlay displayi ...

javascripthtmlvue.jsvuetify.js

What is the process for incorporating an additional input in HTML as you write?

I am looking to create a form with 4 input boxes similar to the layout below: <input type="text" name="txtName" value="Text 1" id="txt" /> <input type="text" name="txtName2" value="Text 2" id="txt" /> <input type="text" name="txtName3" valu ...

javascriptjqueryhtml

Enhance the Bootstrap Sass by integrating a color scheme that seamlessly complements all elements such as backgrounds, text, and borders throughout the

Hi there, I'm having an issue with Bootstrap and Sass when trying to add new colors to my theme map. Can anyone help me figure out what I might be doing wrong? Thank you in advance. I've been attempting to include a new color in the theme-colo ...

csssassbootstrap-5theming

Creating a flexible grid layout with DIVs that share equal width dimensions

Struggling with my HTML and CSS code, I need a way to structure nested DIV blocks into a responsive grid where each block has the same width. Despite my efforts, nothing seems to work as expected. Currently, the nested DIVs are stacked vertically one on to ...

htmlcss

Having difficulty submitting a form with ajax, while accomplishing the same task effortlessly without ajax

I have been experimenting with submitting a form using ajax to the same .php file. When I submit the form without ajax directly (form action), the database gets updated. However, when I try the same process with ajax, there is no change in the database. H ...

javascriptphphtmlcssajax

I am facing difficulties with invoking the popOpen() function within my parameters in JS, HTML, and CSS

I'm currently facing an issue with my code. I am attempting to invoke my openPop() function with the input parameter 'pop' within some of my sensor code, but no pop-up is appearing even though I believe I am calling the popup correctly. If a ...

javascripthtmlcss

Utilizing the calc() function to determine height dimensions

I created a very simple layout with 5 divs, which can be viewed here: http://jsfiddle.net/8tSk6/. In this layout, I want the div with the ID "kubka" to have a height of 100% - 100px (height: calc(100% - 100px);). However, I am running into issues as it i ...

htmlcssheightcss-calc

Repairing the Left-sided Popup Leaflet

Can someone help me with fixing the positioning of the Popup to the left of the map? Currently, it does not stay aligned to the left edge when moving the map. I tried using position: fixed in my styling, and while everything looks good when zooming, it br ...

javascriptcssreactjsleaflet

Searching in SQL does not involve the use of %

My attempt to implement a basic search using the SQL LIKE function seems to be failing for unknown reasons. Here is the code I have written. private void gvbind() { connection.Open(); string sql = ""; if (txtSearch.Text.Trim() == "") { ...

c#asp.netsqlsql-serversql-like

From where was this color of the navigation bar derived?

As I delve into a site previously worked on by someone else, my task is to recreate the navigation they implemented. However, I am unable to locate in the source code what was used for the navigation background. The challenge lies in the fact that after m ...

htmlcssnav