What is the correct way to properly embed a form within a div using HTML and CSS?

I am struggling to get things aligned correctly. Currently, I have two background image divs for content and a footer. My goal is to anchor the form to the top of div_11, but it keeps ending up at the bottom and causing parts of it to be hidden.

<div id="index-11_">
  <img src="xxx/ttt.jpg" alt="" width="1012" height="295" align="top" id="index_11" />
  <form>
    <div class="form">FORM CODE</div>
  </form>
</div>

<div id="index-12_">
  <img id="xxx/ccc.png" width="100" height="592" alt="" />
</div>

Below is the CSS code:

#index-11_ {
  position:absolute;
  left:88px;
  top:158px;
  width:1012px;
  height:295px;   
}

div.box {   
  position:relative;
  background:#222222;
  width: 600px;
  margin-left:auto;
  margin-right:auto;
  border:1px solid #262626;
}

#index-12_ {
  position:absolute;
  left:1100px;
  top:158px;
  width:100px;
  height:592px;
}

Answer №1

Your form is moving to the bottom because it is positioned after your initial image. To achieve the effect you desire, consider setting the images as background images for the div instead of including them as separate elements in the HTML flow. You can accomplish this by adding the following code to your CSS for #index-11_:

background: url(xxx/ttt.jpg) no-repeat;

This code will replace your first image element with a background image.

For more information on working with background images in CSS, check out this resource.

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

How can I horizontally add divs until the width size is exceeded?

I am looking to make tiles flow horizontally until there is no more space, then wrap to the next line. Additionally, I want them to be responsive to different screen sizes. Here is my initial code snippet: .tile { width: 248px; height: 126px; ba ...

Tips for positioning a dropdown menu at the bottom of an image

Is there a way to position the dropdown menu at the bottom left of an image in bootstrap 4? <nav class="navbar navbar-expand-md bg-success navbar-dark fixed-top"> <!-- Brand --> <a class="navbar-brand" href="#">KMA-v1</a> ...

How can I position the nav-item to the right without it becoming collapsed?

Hello! I am currently using Bootstrap 4 and attempting to create a navbar menu. Below is the code I have written: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" da ...

How can the name attribute be utilized in HTML?

I am feeling a bit perplexed about the purpose of the name attribute in HTML. Is it correct to say that the value of the "name" attribute is used on the server side to identify an HTML element (such as <form>, <iframe>, <meta>) and poten ...

Warning in Next.js: When utilizing conditional rendering, the server HTML is expected to have a corresponding <div> inside another <div>

Although similar questions have been asked on various platforms like Google, none seem to provide answers that align with my specific situation. Essentially, my goal is to have a different search bar displayed in the header based on the page I am currentl ...

Stop browsers from automatically filling in passwords

It's widely known that major web browsers like Chrome and Firefox no longer respect the standard autocomplete="off" attribute in HTML. Instead, they have implemented their own autofill mechanisms, which has caused some issues for developers. ...

Positioning the sDom in jQuery DataTables

Take a look at the image below: I want to adjust the position of the tableTools buttons (Copy, Excel, CSV) so that they appear aligned with the Search Box. I've experimented with different sDom parameters but haven't been successful. This is th ...

Using ExpressJS and Jade to submit a form using the POST method and redirecting to a specified path

I am exploring node, express and jade for the first time and working on a small application that requires users to enter their name and password in a form. The app then redirects them to a path based on their username. Here is the code snippet to achieve ...

Enhance your Joomla! template design by incorporating Bootstrap 4.3 elements and seamlessly blending custom styles with Bootstrap aesthetics

I'm working on incorporating a template I created using HTML and CSS into Joomla! 4. One specific component is this navbar: <nav class="navbar navbar-default navbar-expand-md navbar-light bg-light sticky-top"> <div class="container"> ...

leveraging aria attributes to create collapsible elements

I am working on an expandable div element that expands when a user clicks on it. I want to ensure it is accessible for screen readers. Below is the code snippet: HTML <div class="expandable" (click)="expandItem()" attr.aria-expanded="isCollapsed"> ...

Endlessly refreshing occurs when attempting to load a separate CSS stylesheet using document.write

I am attempting to implement two separate stylesheets on my WordPress blog - one for web access and another for our iOS app. Currently, we are adding ?app=true to the URL when accessing content through the app in order to distinguish between the two. Using ...

Can you choose more than one table cell with just one click using JavaScript?

Recently, I used javascript to enhance the cursor icon size on a webpage and incorporated a table. Now, I am looking for a way to change the background color of all overlapping elements in the table when the cursor icon interacts with them (during click an ...

Ways to prevent the spread of an event from the main div to the nested div

I need assistance in preventing an event from propagating from a parent div to a child div within my HTML. Below is a snippet of the code I am working with: <div> <div id='categoryList'> <div class='listed-category&apos ...

What is the best way to add an element while preserving its original placement?

I need a solution to duplicate the code of an element and transfer it to another element without removing it from its original position. Currently, I have a JavaScript function that allows you to move a picture to a box when it's clicked. However, th ...

What is the best way to use jQuery to apply CSS only to elements with a specific attribute set?

Currently, I am attempting to utilize jQuery to apply specific CSS styles to elements, but only those that possess a particular attribute. The rationale behind not resorting solely to CSS is due to the immense amount of content on the site, making it impr ...

How can I maintain the default function for links that have been clicked using window.on('click') event listener?

I am currently working on a project to visualize the spatial positions of 4673 of the closest galaxies. To enhance the user experience, I have implemented customized click events that allow users to focus on individual galaxies and even change their colors ...

Save a PNG file using the HTML5 Canvas when the Submit button is clicked, with the help of PHP

I am looking for assistance with a signature capture form. I came across a standard template on Github that works perfectly, but I wanted to customize it further. However, my Javascript skills are still in the early stages. The current code allows you to c ...

Adjust the height of each table's data cell dynamically based on the content within

I have a table in HTML with a cell that contains 2 divs and a radial tab strip. Here is an example: <td> First td </td> <td> Second td <div> .... <div style="border: solid; border-color: brown; border-width: 3px; he ...

Transferring parameters from HTML to CSS using Less and addressing two key design problems

I am currently in the process of designing a webpage, and I've encountered three distinct issues - two are related to pure .css, while one is related to less. Firstly, I have set margin: auto and padding: auto on the body tag, but it's not cente ...

Achieve equal height columns when they are stacked vertically using Bootstrap 5

Can columns be equal height when they become rows on mobile devices? <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="57353838232423253627176279677965">[email protected]</ ...