Wrapper for box placement

Just starting out in web development and I'm eager to create my first webpage. I'd like to have three boxes neatly placed within my wrapper, something similar to this sketch: https://ibb.co/xGDCv2f

The three boxes I want to include are "Registrer Pant", "Nexus Fordele", and "Samlet Donation". However, I'm a bit unsure about how to go about it.

Here's a snippet of my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Registrer Pant</title>
    <link rel="stylesheet" type="text/css" href="Forside.css"/>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
</head>
<body>

<div class="header">
    <h1>Good morning, Mathias</h1>
</div>

<div id="wrapper">

</div>

<br/>
<br/>
<br/>
<div id="box1" class="Pant">
    Registrer Pant
</div>
<br/>
<br/>
<br/>
<div id="box2" class="Nexus">
    Nexus advantages
</div>
<br/>
<br/>
<div id="box3" class="Samlet">
    Total donation
</div>

</body>
</html>

Here's a glimpse of my CSS:

.header {
    padding: 40px;
    text-align: center;
    background: #4968aa;
    color: white;
}

.header h1 {
    font-size: 40px;
}

#wrapper {
    width: 1260px;
    height: 500px;
    border: 2px solid black;
}

.Pant {
    background-color: #BCBCBA;
    width: 800px;
    height: 300px;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    line-height: 300px;
    font-size: 100px;
}

#box2 {
    background-color: lime;
    width: 200px;
    height: 100px;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    line-height: 100px;
}

#box3 {
    background-color: dodgerblue;
    width: 200px;
    height: 100px;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    line-height: 100px;
}

Any help or guidance is greatly appreciated. Thank you!

Answer №1

To keep the boxes within the wrapper, make sure not to close the wrapper div (using </div>) until after the boxes' HTML code.

Then, make some minor adjustments in the CSS styling.

.header {
  padding: 40px;
  text-align: center;
  background: #4968aa;
  color: white;
}

.header h1 {
  font-size: 40px;
}

#wrapper {
  width: 1260px;
  height: 500px;
  border: 2px solid black;
  text-align: center;
}

.Pant {
  background-color: #BCBCBA;
  width: 800px;
  height: 300px;
  text-align: center;
  vertical-align: middle;
  line-height: 300px;
  font-size: 100px;
  margin: auto;
}

#box2 {
  background-color: lime;
  width: 200px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
  display: inline-block;
}

#box3 {
  background-color: dodgerblue;
  width: 200px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
  display: inline-block;
}
<div class="header">
  <h1>Good morning, Mathias</h1>
</div>

<div id="wrapper">
  <div id="box1" class="Pant">
    Register Deposit
  </div>
  <div id="box2" class="Nexus">
    Nexus Benefits
  </div>

  <div id="box3" class="Total">
    Total Donation
  </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

Send the data to be placed in the div to launch the window

I'm attempting to open a new window within the same tab and transfer some html code to be inserted into a specific div section of the newly opened window. However, I'm encountering difficulties in passing the data as illustrated below: JavaScrip ...

Transmit information from SerialPort to socket.io

I'm having difficulty with integrating socket.io, express, and node.js. I am successfully sending data from an Arduino to my command prompt using the serialport library. Now, I want to display this data on my web browser by utilizing the express libr ...

What is the best way to create a gap between two Bootstrap buttons?

I'm attempting to create two buttons in the same line in this code, but it's not working as I want. Take a look below: <div class="w3-show-inline-block"> <div class="w3-bar"> <button class="btn btn-s ...

Aligning a DIV using javascript

Hey everyone, I'm encountering an issue with the JavaScript on my website. I'm struggling to center the div in order to properly display the image I click on. It seems to work fine on the second attempt, but on initial click, the div always appea ...

Style applied directly to .col elements

I want to customize the styling of the .col elements on a single page without affecting other pages. I've tried adding the following code snippet to my CSS file: .col { border: 1px solid #7851A9; } However, this also styles the element ...

Internet Explorer Fails to Display CSS Background Images

Requesting assistance, The issue I am facing is that the background image is not displaying in Internet Explorer, although it appears perfectly fine in Safari. I have conducted thorough checks with W3C CSS validation and HTML validation, confirming that ...

Adding a <tr> tag to an HTML table using JQuery and AJAX in the context of Django framework step by step

I am currently navigating the world of Javascript, Jquery, and Ajax requests and I'm encountering a challenge with how my scripts are executing. My homepage contains a lengthy list of items (over 1200) that need to be displayed. Previously, I loaded ...

Discovering with jQuery

Can we actually change the background color of '.preview-inner' to yellow from "#change_color"? <div id = "form-container> <input class="color-picker" id="change_color" type="text"> <div class="replacer"> <div class= ...

My desire is to have the left image's position set as sticky

Currently, I am attempting to update the image positioning on this page for the T500 Smart Watch: I want it to look similar to how it appears here: Here is the CSS code I have experimented with: .storefront-full-width-content.single-product div.product ...

Trouble getting CSS to load in Webpack

I'm having some trouble setting up Webpack for the first time and I think I might be overlooking something. My goal is to use Webpack's ExtractTextPlugin to generate a CSS file in the "dist" folder, but it seems that Webpack isn't recognizi ...

Determining the height of a Bootstrap column in relation to another element

Utilizing the grid layout from bootstrap, I have the following structure: <div id="prof_cont_enclose"> <div class="row"> <div class="prof_cont_row"> <div class="col-xs-12 col-sm-4 col-md-2 col-lg-2 prof_elem"&g ...

Button elements are not responsive to Bootstrap margin classes

I am facing an issue in my code where adding the class m-0 to a button is not working to reduce the margin around it to 0. However, when I include .close {margin:0;} in my SCSS file, it successfully reduces the margin to 0. Even though I was advised agains ...

What could be the reason that my Javascript function is not displaying in the HTML document?

I'm currently working on developing an HTML page that displays random quotes by Mark Twain. The function and array of quotes are set up in a separate Javascript file which is linked to the main HTML document. However, I am facing an issue where the ou ...

Carousel issue with sliding on Bootstrap when deployed on various web servers

I am experiencing a strange issue with my website. I have it installed on two different servers, and while the Carousel works perfectly fine on the first server, it does not slide properly on the second server. Here are the links to each version of the we ...

Load a page and sprinkle some contents with a slide effect

I am brand new to jQuery and just starting out, so please excuse me if this question seems basic or silly. I would like the header and footer of my page to stay in place while the center content slides in from the right side when the page loads. This websi ...

The controls for the Bootstrap carousel component do not have a clear appearance

Trying to implement a Bootstrap carousel component but facing an issue with the controls not appearing transparent like in the example provided in the Bootstrap documentation. Check out the code snippet: <div class="carousel slide" id="s ...

What is the best way to implement a dropdown menu with JavaScript or jQuery?

I'm looking to create a dynamic dropdown list using Javascript or JQuery that mirrors the functionality of selecting countries, states, and cities. Can someone provide guidance on the best code to achieve this? Below is a snippet of my existing code: ...

Customizing the Background of an Input Box

How can I create an input box with a specific background? I have tried the following code but it's not displaying properly. What is the correct way to achieve this? In addition, I need to create variations of this button as described below: I wa ...

JavaScript call to enlarge text upon click

I'm struggling to figure out why my font enlargement function isn't working as expected. Below is the code for my font enlargement function: <script type="text/javascript> function growText() { var text = document.getElementBy ...

Using image paths in CSS for styling purposes

As I develop an Asp.net website, I've encountered a surprising issue. Here is my folder structure: - Styles - master.css - Images -webPages -scripts When trying to access an image in the Images folder from the CSS file, I receive a ...