The div I'm trying to position at the bottom is currently wedged between other divs

My goal is to move the gray rectangle (

<div class="brand"> </div>
) below the other elements automatically. Currently, it's stuck between the header and two other body divs. Being a beginner, I'm unsure how to fix this. I've tried adding clear: both, but it didn't work. I would appreciate it if someone could review my code and point out what's wrong. Apologies for the lack of structure in my code.

Thank you, Filip

:D

CODE (CSS FIRST, THEN HTML):

/* CSS code goes here */
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" href="style.css" type="text/css">
    <meta charset="utf-8">
    <script src="https://kit.fontawesome.com/908c2e5c96.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    <title>Kungsmässan — Måste upplevas!</title>
  </head>
  <body>

<header>

<div class="container">
<nav>
  <ul>
    <li><a href="#">Butiker</a></li>
    <li><a href="#">Resturang & Café</a></li>
    <li><a href="#">Utbyggnad</a></li>
    <li><a href="#">Öppetider</a></li>
    <i class="fas fa-search"></i>
    <i class="fas fa-bars"></i>
  </ul>
</nav>
</div>
</header>

<div class="wrapper">

</div>
  <div class="bild1">
  </div>
  <div class="bild2">
  </div>
  <div class="entrytext">
    <h1>Sveriges bästa <br/> <span class="citygalleria">citygalleria.</span> Mitt  <br/> i Kungsbacka.</h1>
    <h2>35 000 KVADRATMETER OCH ÖVER 100 AFFÄRER!</h2>
    <button type="LÄS MER" name="button ">LÄS MER<i class="fas fa-angle-right"></i></button>
  </div>

<div class="brand">

</div>



  </body>
</html>

Apologies for the lack of structure ;D
//Filip

htmlcss

Answer №1

body{
background: white;
font-family: 'Montserrat', sans-serif;
padding-bottom: -1px;
}
.container{
  width: 80%;
  margin: 0 auto;

}
header{
  background: #fff;
}
* {
margin:0;
padding:0;
}
header ::after {
  content: "";
  display: table;
  clear: both;
}
nav{
float: right;
padding-right: 230px;
}
nav li{
  display: inline-block;
  padding-left: 45px;
  padding-top: 20px;
  padding-bottom: 20px;
}
nav ul{
  list-style: none;
  display: inline-block;
  padding-top: 25px;

}
nav a {
  font-size: 12px;
  color: black;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
}
nav a:hover{
  color: red;
}
nav li:hover{
}
.fa-search{
  color: black;
  font-size: 14px;
  transform:scaleX(-1);
  margin-left: 50px;
}
.fa-bars{
  color: black;
  font-size: 14px;
  padding-left: 15px;
}

nav i:hover{
color: red;
cursor: pointer;
}

.package {
width: 80%;
margin: 30px auto;
}
.bild2 {
height: 350px;
width: 50%;
background-color: #3D6BB8;
float: left;
}
.entrytext {
margin-left: 30px;
float: left;
margin-bottom:70px;
}

.entrytext>h1{
  font-weight: 800;
  font-style: normal;
  font-size: 54px;
}

.entrytext>button{
border: none;
display: inline-block;
background-color: #38b272;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top:   20px;
box-shadow: 20px 15px black;
}

.entrytext>button:hover{
  border: none;
  display: inline-block;
  background-color: #c12147;
  color: white;
  padding: 8px 10px 8px 15px;
  letter-spacing: 6px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 17px;
  text-align: left;
  margin-top: 20px;
}
button:focus {outline:0;}

.fa-angle-right{
  font-size: 20px;
  padding-left: 30px;

}


.entrytext>h2{
font-size: 14px;
font-weight: 600;
margin-top: 20px;
}
.citygalleria{
  color: #CC2244;
}


.brand {
height: 100px;
background-color: gray;
clear: both;
}
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <link rel="stylesheet" href="style.css" type="text/css">
        <meta charset="utf-8">
        <script src="https://kit.fontawesome.com/908c2e5c96.js"></script>
        <link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
        <title>Kungsmässan — Måste upplevas!</title>
      </head>
      <body>

    <header>

    <div class="container">
    <nav>
      <ul>
        <li><a href="#">Butiker</a></li>
        <li><a href="#">Resturang & Café</a></li>
        <li><a href="#">Utbyggnad</a></li>
        <li><a href="#">Öppetider</a></li>
        <i class="fas fa-search"></i>
        <i class="fas fa-bars"></i>
      </ul>
    </nav>
    </div>
    </header>

    <div class="wrapper">

    </div>
      <div class="bild1">
      </div>
      <div class="package">
<div class="bild2">
      </div>
      <div class="entrytext">
        <h1>Sveriges bästa <br/> <span class="citygalleria">citygalleria.</span> Mitt  <br/> i Kungsbacka.</h1>
        <h2>35 000 KVADRATMETER OCH ÖVER 100 AFFÄRER!</h2>
        <button type="LÄS MER" name="button ">LÄS MER<i class="fas fa-angle-right"></i></button>
      </div></div>

    <div class="brand">

    </div>



      </body>
    </html>

Answer №2

Apply styling to the position and set the bottom property to 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

"The JavaScript code included in the index.html file is not functioning as expected when called in the main.js file within a

Here is the index.html code for a simple VueJS app that includes a widget from netvibes.com. The widget code is added in the html file and functioning properly. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC " ...

javascripthtmlvue.jsjspwidget

What is the best way to rerun a script without having to manually refresh the entire webpage?

If you visit greenb.byethost12.com, you can check out the progress I've made so far. Currently, when you click on the correct answer, it triggers document.location.reload(index.php), causing the entire page to refresh. What I aim for is to have only ...

javascriptjqueryhtmlcss

Toggle visibility

Seeking a unique example of a div SHOW / HIDE functionality where multiple divs are populated within the main container. Specifically looking to display new paragraphs or topics of text. I have experience with standard show/hide techniques for collapsing ...

javascripthtml

Arranging the list items in a perfectly straight vertical line

Concern: I'm struggling with alignment issues on my website. I have country flags displayed using display:inline;. The issue arises when the number next to the flag exceeds single digits (e.g., 10 or more) as it affects the alignment due to the consi ...

htmlcsslistalignment

The custom stylesheet added to index.html is not taking precedence over the Bootstrap 5 styles applied through NPM

In my Vue 2 project, I encountered an issue with Bootstrap 5.3 when installed via NPM. My custom CSS stylesheet in the index.html file was not able to override Bootstrap's CSS. Interestingly, I faced no problems when using Bootstrap from a CDN. Addit ...

cssnpmvuejs2overridingbootstrap-5

Incorporating A Full-Fledged Office Word Editor Into My Web Application

In our web project, we are looking to integrate a feature that allows users to create, edit, and save their word documents for reporting purposes. While Microsoft Office offers an online option here, it seems limited to working within the Microsoft OneDriv ...

htmlms-wordms-officetext-editorrich-text-editor

Generating dynamic content

I require assistance with a programming issue. I am working with two separate components: Stage and Executor. Within the Stage component, I am attempting to create new elements based on input parameters, while in the Executor component, I set these paramet ...

htmlangulartypescriptng-container

Alter the style of a div by clicking on a button

Can the background image of a div be changed by selecting a button outside of the div? For example: HTML <div id="change"></div> <div id="buttons"> <button class="button1">this</button> <button class="button2"> ...

javascriptjqueryhtmlcss

What is the best way to insert an image into a div?

Trying to figure out how to place a flower inside the red box in my div that is overlaid on another one with a higher z-index. The picture I added doesn't seem to show up properly. Any advice on how to make this work? ...

cssimagehtml

The hexadecimal code for the textured background color of an iOS Scroll View in CSS

Can someone share the specific CSS color code with me? I would like to apply this same color to my website. Appreciate it! ...

ioscssbackground-color

Navigating through the Jquery DOM to access a specific node

Displayed here are a list of products, presented within an unordered list: Users can express interest in specific items by clicking "I am Interested," prompting a change in background color and the appearance of a tick mark next to the selected item. To ...

javascriptjqueryhtml

pressing the button again will yield a new outcome

I am looking to disable a button (material ui) when it is clicked for the second time by setting disabled={true}. Unfortunately, I have not been able to find any examples related to this specific scenario on StackOverflow. <Button onClick={this.s ...

javascripthtmlcssreactjstypescript

Guidelines for comparing two distinct dates using jQuery

const currentDate = $("#date").text(); // the current date is set as a variable 01/06/2017 // Another date is declared as a variable let startDate = '01 / 06 / 2017'; if (currentDate == startDate) {} if (currentDate < startDate) {} <script ...

jqueryhtml

I am interested in displaying all the items on the list instead of just one

<html> <head> <link rel="stylesheet" type="text/css" href="mango.css"> <script> function showItems(){ var items = document.querySelectorAll("#main li"); items.forEach(i ...

javascripthtmlcssmenuonclick

Combining both inline and block positioning for div content

My goal with applying CSS styles is to create a visually appealing composition of content: https://i.sstatic.net/CpVXb.png After applying my styles, I received the following result: https://i.sstatic.net/Bfh5q.jpg li { position: relative; list-styl ...

htmlcsscss-positioncss-content

Guide for Displaying Three Cards Side by Side using Bootstrap Grid System

I am facing an issue while attempting to display 3 cards in a row using the Bootstrap grid system. The problem arises when I use a Django loop, as each card is being displayed in a separate row instead of side by side as intended. I have tried implementing ...

htmldjangobootstrap-4

Angular 2 communication between parent and child components

I am having trouble incorporating an action button in the child_1 component, while the event handler is located in the sub child component, child_2. Here's a snippet of the code: app.component.html (Parent HTML) <div style="text-align:center"> ...

htmlangular

Malfunctioning Line in Apple Safari Causing ReactJS Issues

I am encountering an issue with my <div className={`${classes.center} ${classes.or}`}>OR</div>. It appears that this problem is specific to Apple Safari only. The alignment on the right side seems to be broken, although it works fine on Google ...

cssreactjsmaterial-uijss

I am struggling to retrieve the text from a link element within a hover dropdown

Having trouble clicking on a dropdown menu item that appears on hover? Here is the HTML code of the website I am currently testing: <div id="header-nav" class="skip-content"> <nav id="nav"> <ol cl ...

javahtmlseleniumselenium-chromedriverwebdriver

Sticky sidebar navigation paired with a scrollable main content area and anchor links

Examining the fiddle reveals a straightforward page layout with a fixed menu on the left and scrollable content. I am looking to align the menu with the content without any blank space at the top that causes the menu to shift upwards while scrolling down. ...

jqueryhtmlcss