What is the best way to stack div elements one after the other?

I am a complete beginner in HTML and I have a project for my web design class about a movie.

http://jsfiddle.net/Lbo1ftu9/

<div id="footer">
<a href="D:/MOVIE REPORT/akira.htm" title="GO BACK?"><img src="D:/IMAGES/goback.gif">

My code is messy right now, but I want to add a footer after the main body like this:

https://i.sstatic.net/SKlgi.jpg

I tried following my teacher's instructions to use a table, but it didn't work at all. Can someone please help me?

Answer №1

Did you hear? 1997 is on the line and they want their old-school <table> back.

If you want to modernize your layout, try adding a new div element with some CSS styling for separation:

<div>
  Your content here
</div>

<footer>
  <a href="/">Go back</a>
</footer>
body {
  background: #333
}

footer, div {
  background: white
}

div {
  height: 300px
}

footer {
  margin-top: 20px;
  text-align: center;
  padding: 20px 0;
}

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

Discovering the font-weight attribute in Selenium IDE

Currently, I am working with Selenium IDE and aim to detect when a text element has the 'font-weight:bold' CSS property applied to it using 'verifyAttribute'. The specific CSS locator being used is: css=body.home.es ul#languages li:nt ...

Tips for creating a table that fills the height of its parent div without surpassing it

Issue: I am facing a challenge with making a <table> element fill 100% of its container's height dynamically, without going over the limit. Context: When the height of the <table> surpasses that of the container, I want the ability to s ...

Getting the most out of option select in AngularJS by utilizing ng-options

I'm currently working with AngularJS and I am interested in utilizing ng-options for a select tag to showcase options organized under optgroups. Here is the array that I intend to use in my select option: $scope.myList = [ { "codeGroupComp ...

Divs in jQuery smoothly slide down when a category is chosen

As I work on a large website, I have hidden div tags in my HTML that I want to be displayed when a user selects a specific category. However, due to the size of the site, there are many hidden divs that need to be revealed based on different categories sel ...

Creating diagonal background cutouts using CSS

Can you create a diagonal cut in a background color using CSS? Check out this example .item { color: #fff; font-size: 30px; background-color: #565453; padding: 10px 10px 10px 10px; width: 52%; text-align: center; display: inline-block; } ...

How to locate the nearest parent link containing a specific attribute using jQuery

I am trying to locate the nearest link with the attribute findme from a child element .startpoint. Here is the structure: <ul> <li><a href="#">Point one</a></li> <li><a href="#" data-findme="yipi">Point tw ...

The quantity of elements stays constant even after adding to them using Javascript

I have implemented a notes list feature that allows users to add notes using an input field. Beneath the notes list ul, there is a message showing the total number of notes: $('li').length. However, I encountered an issue where the count of not ...

Placing text and an image within a grid cell does not automatically stack them on top of each other

I have a large div with a grid display, consisting of 3 rows and 2 columns. I am attempting to include text directly below the photo within each cell. This is what my code looks like: <div class="arrange-fixes"> ...

Image flipping effect malfunctioning in Safari and Internet Explorer

My image flipping effect is not functioning properly in Safari and IE browsers. Here is the code I am using: .flipcard { position: relative; width: 220px; height: 220px; perspective: 500px; margin: auto; text-align: center; } .flipcard.v:hove ...

Ways to eliminate the pale blue space

How can I remove the light blue gap between the "new customer account application" and Name/Street/City sections to make them adjacent? Any suggestions for improving my code as a beginner are appreciated. Thank you. I need to add more text because there ...

Ways to conceal HTML tags within a text box

Currently, I am utilizing PHP to extract content from a text file and display it in a textbox. However, I am interested in finding a way to conceal the HTML tags within the textbox (as shown in the image) without deleting them, making them invisible to use ...

python scraping: how to extract two nested elements

Hello, I am looking to extract information from the < del> and < ins> tags below. However, I haven't been able to find a solution yet. Does anyone have any ideas on how to scrape this data? This is my Python code: import requests import j ...

"Deleting a line from a text file in PHP with a predetermined format: A step-by-step guide

I am facing a situation where I need to manipulate a CSS file through PHP. The CSS file contains the following properties: #firstdiv { width:100%; height:200px; } #seconddiv { width:80%; height:70px; } #thirddiv { width:80%; height:70px; } #firstdiv { col ...

Tips for showing images with the full path URL retrieved from JSON using AngularJS

I am currently working on a project that involves displaying images from a JSON file. The URLs of these images are stored in the JSON file. Currently, my code is only outputting the URLs themselves, which is expected. However, I am looking for a way to act ...

I'm curious why I can only see the HTML code and not the three.js code as well

I attempted to run a sample three.js game today, but only the HTML code appeared. I've also installed three.js with npm and tried running it with the VSC Live Server, but it's not working. You can find the source code here. What should be my nex ...

How to efficiently pass multiple inputs from an HTML form to a controller in AngularJS using a single ng

Currently, I have multiple input text boxes in my HTML and I need to send their values to my controller to add them to an object. The challenge I'm facing is figuring out how to pass more than one value using just one ng-model. In my HTML code, I have ...

Finding an element that lacks both a class and an id, and is not consistently present - what's the trick?

Currently, I am faced with a predicament in my code where a <li> element only appears under specific conditions, making it difficult to apply positioning. This element lacks an id and class attribute, which prevents me from targeting it accurately us ...

A problem arises when trying to showcase the content in a responsive manner on the hamburger menu, particularly when viewing on mobile

As a newcomer to web development, I decided to challenge myself by building an E-Commerce website to enhance my skills. To ensure mobile responsiveness, I opted for a hamburger menu to hide the navbar content. However, despite resizing working flawlessly, ...

Is the percentage width and height for setting the size of an image in html/css mobile based on the screen's dimensions?

Currently, I'm working on an Oracle Apex jmobile query project involving an HTML page that includes the following image code: <center> <img src="#WORKSPACE_IMAGES#Logo.svg" align="center"> </center> Additionally, there is CSS to st ...

"Creating a CSS3 animation for changing the background image source - a step-by-step

Unfortunately, the background-image cannot be animated with keyframes in the following way: @keyframes kick{ 0%{background-image: url(images/img-man-1.png);} 25%{background-image: url(images/img-man-2.png);} 50%{background-image: url(images/im ...