Ways to incorporate text into a div container

For my assignment, I am working on setting up a menu website and I want to create a floating side div for the order summary.

If you need a visual reference, you can check out this Figma design:

Just to clarify, this is my first time dealing with coding so everything is pretty new to me.

I have managed to set up the div and grid structure, but struggling to add content without breaking things.

The issue I'm facing is that the buttons at the bottom either don't align properly or go beyond the div container. Is this a problem with the div itself or the content within?

Also, I was wondering if there is a way to remove an item using the "remove" button. Would I need to use JavaScript for that?

You can find the code I've been working on here: https://jsfiddle.net/93bqypdu/1/

<div class="grid-container">
<div class="a">a</div><div class="a">a</div><div class="a">a</div>
<div class="a">a</div><div class="a">a</div><div class="a">a</div>
<div class="a">a</div><div class="a">a</div><div class="a">a</div>
<div class="a">a</div><div class="a">a</div><div class="a">a</div>
</div>

<div class="side">
<img src="https://images2.imgbox.com/f6/96/uf0fayVE_o.png" width="150vh" 
height="auto" class="pic">
<div class="content">Lorem Ipsum</div>

<div class="sbutt">
CANCEL
</div>

<div class="sbutt">
ORDER
</div>
</div>
javascripthtmlcssbootstrap-4

Answer №1

If you're noticing that the Order and Cancel buttons in your fiddle are not aligned properly, a solution would be to introduce an additional div container for the buttons and apply more classes to them:

HTML

<div class="grid-container">
  <div class="a">a</div>
  <div class="a">a</div>
  <div class="a">a</div>
  <div class="a">a</div>
  <div class="a">a</div>
  <div class="a">a</div>
  <div class="a">a</div>
  <div class="a">a</div>
  <div class="a">a</div>
  <div class="a">a</div>
  <div class="a">a</div>
  <div class="a">a</div>
</div>

<div class="side">
  <img src="https://images2.imgbox.com/f6/96/uf0fayVE_o.png" width_="150vh" height="auto" class="pic">
  <div class="content">Lorem Ipsum</div>

  <div class="sbutt-container">
    <div class="sbutt cancel" onclick="window.location.href = 'Hiveworks.html';">
      CANCEL
    </div>

    <div class="sbutt order" onclick="window.open('dashboard.html', '_blank', 'toolbar=no,scrollbars=no,resizable=no,top=100,left=800,width=380,height=380',overflow=hidden)">
      ORDER
    </div>
  </div>
</div>

CSS

.side {
  right: 1px;
  float: right;
  margin: 0;
  margin-right: 1%;
  width: 26vw;
  height: 80%;
  background-color: #ffffff;
  border-radius: 10px;
  border: 5px solid #EFA078;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  position: fixed;
  padding: 0;
}

.content {
  height: 51%;
  background-color: #ffffff;
}

.pic {
  margin-left: 20px;
  margin-right: 20px;
  max-width: 100%;
}

.sbutt-container {
  position: absolute;
  display: block;
  height: auto;
  bottom: 0;
  width: 100%;
  background-color: white;
  height: auto;
  padding: 10px;
  box-sizing: border-box;
}

.sbutt {
  background-color: #EFA078;
  display: block;
  text-align: center;
  font-size: 10px;
  vertical-align: middle;
  padding: 5px 5px;
}

.cancel {
  width: 30%;
  float: left;
  left: 0;
}

.order {
  width: 50%;
  float: right;
  right: 0;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-column-gap: 1px;
  grid-row-gap: 2px;
  padding: 0;
  width: 69vw;
  height: 100%;
  margin-left: 0.8%;
  float: left;
}

.a {
  margin: 0;
  width: 150px;
  height: 150px;
  background-color: red;
}

See it in action here: https://jsfiddle.net/q4n9rxhg/

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

Encountering issues with Node.js and Socket.io not displaying results on Internet Explorer when using a secure connection

I have successfully integrated socket.io, node.js, and express to serve real-time json data to multiple browsers except for IE (tested on version 9) over a secure connection. Everything was functioning smoothly until I switched to HTTPS. From the server&ap ...

javascriptnode.jssocket.ioexpress

Is there a simple way to set the form inputs to right-to-left without excessive duplication?

Is there a way to apply the right-to-left (RTL) direction to a form without duplicating code for every input, based on the locale of the language being used? Can the locale be changed in CSS to make the form RTL more efficiently? For example: <div ...

csslaravelbootstrap-4

Retrieve the value of another ID within a form using the .innerHTML property

I would like to be able to show the value of a text field when the Search button is clicked. Currently, I have the following code on the search button: onclick="document.getElementByid('output').innerHTML = this.value" This code successfully r ...

javascriptjqueryhtml

Decide on the chosen option within the select tag

Is there a way to pre-select an option in a combobox and have the ability to change the selection using TypeScript? I only have two options: "yes" or "no", and I would like to determine which one is selected by default. EDIT : This combobox is for allow ...

htmlangulartypescript

What is the best way to center an infowindow in Google Maps API V3 when working with a map canvas that has a narrow width?

As an illustration of my point, I have put together a sample page: The issue I am facing is with a narrow map canvas and an infowindow in it. Upon clicking the marker, the map sometimes fails to center properly and the marker along with the infowindow sli ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

Steps for establishing a one-to-many relationship in my comment database table

I've inserted the following code into my articles migration: Schema::create('articles', function (Blueprint $table) { $table->id(); $table->unsignedBigInteger('user_id'); $table->foreign('user_id')- ...

javascriptphpnode.jslaravel

Ways to access the current element in the Evernote editor that corresponds to the cursor's position?

It seems that Evernote editor uses a Rich Text Editor which differs from the input or textarea tag. Therefore, I am unable to use the provided code to determine its type. Is there a way to retrieve the current element of the Evernote editor where the curso ...

javascripthtml

Sending response error codes in nodejs can be achieved using a variety of methods

I am looking for a way to properly send an error code as a response in a promise within a Node.js application. It seems that errors in promises are not being sent correctly in the response object in NodeJS/Express. module.exports.providerData = function ( ...

javascriptnode.jsexpress

Refinement of chosen selection

Is there a way to dynamically filter the content of a table based on the selected option? I want the table to refresh every time I change the option in the select dropdown. HTML <select ng-model="selectedGrade" ng-options="grade.Id as grade.Title f ...

javascriptangularjsselect

Setting up a Progressive Web App installation feature with a built-in delay from a

I have integrated a v-dialog component that shows up when my webapp loads and is utilized for installing the PWA: <template> <div> <v-dialog v-model="popupAndroid" max-width="80%" ...

javascriptvue.jsvuetify.jsprogressive-web-apps

Is the Bootstrap datatable failing to be responsive in the tabler dashboard when viewed on mobile devices?

Implemented Bootstrap Datatable to display database data on a tabler admin dashboard. The functionality works perfectly on desktop view, but encounters issues on mobile devices. Any suggestions on how to resolve this problem? Desktop View Screenshot: ht ...

jquerybootstrap-4datatableresponsive-designbootstrap-5

ReactJS instance.render function error: How to solve it?

I encountered a strange error message while working with reactjs, which states that instance.render is not a function in reactjs. Despite my efforts, I have been unable to identify the source of this error. Below are the contents of index.js and search_bar ...

javascriptreactjs

Tips for resolving the issue of a Bootstrap dropdown menu overlapping content in its vicinity

I am trying to position a Bootstrap dropdown button on the right-hand side of the page. The dropdown should cover 100% of the page's width and overlay any content when activated. However, there is a large logo on the left-hand side that I want users t ...

javascriptjqueryhtmlcssbootstrap-4

Execute controller action upon item selection within KODataTable MVC table

I am displaying data in a table using AJAX to call an Action that returns a JSON list. Output: I want each user (row in the table) to be clickable and linkable to an edit page (Admin/Edit/Id). This can be done either by clicking on them or by having an E ...

javascriptjqueryasp.net-mvcknockout.js

Using multiple GET methods on a single route in Express and Sequelize can lead to conflicts

I've created a simple product CRUD application with routes to search for products by ID and by name. However, when I send a request to http://localhost:4000/products?name=pen, the routes conflict with each other and I'm unable to retrieve the pro ...

javascriptnode.jsexpresssequelize.js

What is the best way to style the current element being targeted in React?

In my React application, I am trying to dynamically adjust the height of a textarea element based on its content. I want to achieve this by utilizing an 'onchange' listener to trigger a resize function. While I have successfully implemented the ...

javascriptcssreactjsajax

What is the best way to stack two pull-right elements on top of each other within the Bootstrap grid system?

I have set up a bootstrap grid system on my webpage and I am trying to align two elements to the right, one below the other. Currently, this is how it appears: https://i.sstatic.net/UcpAJ.png When I try to align the "Active" and "Primary" buttons undernea ...

htmlcss

Develop a new entity utilizing Array in Javascript

let DaysArray: any = ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"] I am looking to transform the above array into an Object structure as shown below: let DaysObject: any = { time: { headerName: "" }, m ...

javascriptarraysobjectfor-looptypescript

Show a different image with a matching title each time the page loads

I need help creating a JavaScript script that will display a random image from an array along with an associated title each time the page loads. Is there a way to do this without using an onload function placed in the body tag? Currently, my code relies o ...

javascripthtml

Querying for the presence of an ObjectId in an array in Mongoose

I'm developing a Node.js project that involves two models: User and Project. Below is the Schema for the Project model: const ProjectSchema = new mongoose.Schema({ name: { type: String, maxlength: 50, required: true, } ...

javascriptnode.jsmongodbexpressmongoose