Encountered a problem while attempting to create two separate div elements. The template root is designed to have only one element. This issue

<template>
  <div class="footerpart-container">
    <div class="general-container">
     dadada
    </div>

    <div class="legal-container">
     dadad
    </div>

    <div class="helpsupport-container">
     dadada
    </div>
      
  </div>

<div class="footer-two">
  <div class="follow-us">follow us</div>
 </div>
  
</template>

Within a single template, I have included two div tags. The first one is intended to be displayed at the top, and the second one with the class "footer-two" should appear at the bottom.

However, upon arranging them as such, an error is triggered:

"The template root requires exactly one element." - eslint-plugin-vue

htmlcssvue.js

Answer №1

If you want to arrange elements side by side, consider using the flexbox feature.

By setting the CSS property display: flex, the flex-items will be aligned horizontally due to the default flex-position: row. To turn both footerpart-container and footerparttwo-container into flex items, enclose them within a container (footer-parent-container).

.footer-parent-container {
  display: flex;
  gap: 1rem;
}

.footerpart-container {
  background-color: #ffffff;
  height: auto;
  display: flex;
}

.footerparttwo-container {
  background-color: #ffffff;
}
<div class="footer-parent-container">
  <div class="footerpart-container">
    <div class="general-container">
      sas
    </div>

    <div class="legal-container">
      <div class="legal-title">Legal</div>

    </div>

    <div class="helpsupport-container">
      <div class="helpsupport-title">Help & support</div>

    </div>
    <div class="whatsup-icon-helpnum">

      <div class="ph-num">180034014</div>
    </div>


  </div>
  <div class="footerparttwo-container">
    <div class="follow-us">follow us</div>
  </div>
</div>

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

I'm curious, which effect or plugin is being used here?

Do you know the name of this particular parallax effect or the plugin used for it? I'm also interested in finding more examples with a similar type of effect, so if you have any tutorials on how to achieve it, that would be greatly appreciated. ...

jqueryhtmlcss

The iframe does not completely fill the col-sm column

https://i.sstatic.net/VeqFj.jpgHaving an issue styling embedded Grafana panels on my website. How can I adjust the iframes to fit within col-sm without large margins (refer to attached screenshot) This is my html: <p class= ...

htmlbootstrap-5

Error in Node: JSON parse failure due to invalid token "'<'" and ""<!DOCTYPE ""

Every time I attempt to run node commands or create a new Angular project, I encounter the following error. Node version 20.11.0 NPM version 10.2.4 https://i.sstatic.net/Dg6BU.png https://i.sstatic.net/ZwN1Q.png ...

javascripthtmlnode.jsangularnode-modules

Is there a way to escape from an iFrame but only for specific domains?

if (top.location != self.location) { top.location = self.location.href; } If my website is being displayed in an iFrame, this code will break out of it. But I want this to happen only for specific domains. How can I perform that check? ...

javascripthtmliframe

"CodeSandbox encountered an issue where PostCSS received an undefined value instead of the expected CSS

I successfully uploaded a React project to CodeSandbox locally by utilizing the codesandbox ./ terminal command. If you want to access the CodeSandbox project, you can find the link here. However, when trying to view the project in the pane, I encountere ...

cssreactjscodesandbox

Implementing the v-select dropdown feature to set a default value

Currently, I am working on a dropdown feature using the v-select component with options for "US" and "CANADA". The challenge I am facing is that even though my customer.country_code value is set to "US", the default selection in the dropdown does not refl ...

vue.jsvuetify.jsv-select

Design an aesthetically pleasing chat interface using CSS styling

Currently, I am working on organizing HTML elements to create a user-friendly interface. Utilizing MVC and ASP.NET for this chat client, I have encountered an issue with correctly arranging the items. The default MVC project in Visual Studio provides a str ...

htmlcss

What steps should I take to eliminate the gap in my fixed bottom navbar?

I'm looking to revamp my menu layout by aligning the links with the social media icons and home button on the same line. The links are nested inside a div within the main navbar class (streetworn-demos), while the social media icons and homepage butt ...

htmlcss

Rzslider not functioning properly due to CSS issues

I am facing an issue where rzslider is not appearing in my app. However, when I copy the code to an online editor, it works perfectly fine. Below is the code snippet: var app = angular.module('rzSliderDemo', ['rzModule', 'ui.boo ...

javascriptangularjshtmlcssangular-material

Execute a webpage in the background using PHP

Currently, I'm working on creating a basic PHP script to fetch four images from a server. The catch is that each time I retrieve a new image, I have to access a webpage first - like this: http://example.com/Set.cgi?Image=1 I don't have the abili ...

phpcgihtml

Is there a way to incorporate a responsive side menu using JQuery or CSS3 that can shift the entire page layout?

Hey there, I'm currently trying to incorporate a responsive side menu into my website using either JQuery or CSS3. What I need is a side menu that will smoothly shift the page content when a link is clicked, and also adds a close button (X) to the men ...

javascriptjquerycssmenuresponsive-design

What are some ways to modify the appearance of the post title table using CSS?

In this snippet of HTML code- <table style='min-width:60%;height:25px;'> <tr> <td><b><data:post.title></b></td> <td id='date-and-author' style='position: relative;bo ...

htmlcsshtml-table

Only show a single li element in CSS at a time

I'm working with Angular 2 and I have a list: <ul> <li *ngFor="let show of (ann)"> {{show}} </li> </ul> I want to show one item from the list every 3 seconds in an infinite loop. Here&apos ...

cssangular

I am unable to access the Dynamsoft ResourcesPath

Dynamsoft.DWT.ResourcesPath = "dwt-resources" Package.json "scripts": { "dev": "ncp node_modules/dwt/dist static/dwt-resources && nuxt", "build": "nuxt build", "start": &q ...

javavue.jsnuxt.jsdwtdynamsoft

Replacing a predefined label in Volusion (for language translations)

I am currently working on a project using the Volusion platform, which unfortunately does not provide full interface editing capabilities. As a result, I am attempting to edit certain hardcoded labels in the HTML to display them in Spanish. After trying v ...

htmlcssvolusion

Retrieving Dynamic data from an HTML form and saving it in PHP variables

Currently, I am in the process of taking an online aptitude test where 2 random questions are selected from a database and displayed on the webpage for answering. The issue I'm facing is that the values are not being stored correctly in the database. ...

phphtmlmysqlsqldatabase

The browser is displaying the raw text data of a file rather than the formatted HTML content

As a newbie in the world of webpage development, I am currently working on my very first webpage project. I have written some HTML code using a text editor and saved it as an HTML file. However, when I try to view it in my browser, all I see is plain HTML ...

html

Moving a div with arrow keys using percentages: A step-by-step guide

I found this amazing script on Stack Overflow that allows me to move elements around the page using arrow keys. It works flawlessly, and I love how it enables diagonal movement by combining different arrow key inputs. Now, my query is whether it's fe ...

javascriptjqueryhtmlresponsive-design

Flex items are overflowing, rather than adjusting their size

Here .header { display: flex; font-family: monospace; background: papayawhip; align-items: center; justify-content: space-between; margin-left: auto; } ul { display: flex; background: papayawhip; gap: 10em; list-style-type: none; f ...

cssflexbox

The Zurb Foundation has a multitude of redundant CSS entries

I have been utilizing Zurb Foundation for a while now, with a bower + compass setup as outlined in the documentation here. Recently, I encountered an issue where a specific page was loading slowly. Upon investigating, I discovered that there were numerous ...

csssasszurb-foundationcompass-sass