Adding text to a horizontal scrolling element causes the parent div to be pushed downwards

Can anyone help me understand why inserting text into one of the divs in a horizontally scrolling div causes the parent div to move downward? Looking for suggestions!

@import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700');
.google{ font-family:'Hind', sans-serif}

a {
  color:white;
  text-decoration:none;
  font-family:'Hind';
}

#bold_avenir {
  font-family:'Hind';
  font-weight:bold;
}

#head_link{
  text-transform:uppercase;
}

body{
  background-image: url('http://via.placeholder.com/300');
  background-size:cover;
}

.project_container{
  border:purple 4px solid;
  height: 800px;
  width:100%;
  overflow:auto;
  white-space: nowrap;
}

.pjct-fat{
  display:inline-block;
  width:800px;
  height:96%;
}

.pjct-skinny{
  display:inline-block;
  width:450px;
  height:96%;
}

#project_1{
  border:red 4px solid;
}

#project_1 p{
  display:block;
  border:red 4px solid;
}

#project_2{
  border:yellow 4px solid;
}
#project_3{
  border:green 4px solid;
}
#project_4{
  border:blue 4px solid;
}
<html>
    <head>
        <meta charset="utf-8">
        <title>Paul Taylor Creates</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
        </header>
      <nav><a href="" id="head_link"><span id="bold_avenir">Paul Taylor</span> Creative Design</a>
        </nav>

      <div class="project_container"> 
        <div class="pjct-skinny" id="project_1">
          <div>First Project</div>
        </div>
        <div class="pjct-fat" id="project_2"> 
        </div>
        <div class="pjct-fat" id="project_3"> 
        </div>
        <div class="pjct-skinny" id="project_4"> 
        </div>
      </div>

        <footer>
          <a href=""><span id="bold_avenir" >Resume:</span> LinkedIn </a> 
          <a href=""><span id="bold_avenir">Contact:</span> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0f7f6e7a637b6e7663607d6c7d6a6e7b6a7c4f68626e6663216c6062">[email protected]</a></a>
        </footer>
    </body>
</html>

htmlcss

Answer №1

.pjct-skinny{
  display:inline-block;
  width:450px;
  height:96%;
  position: relative;
}

.pjct-skinny div {
  position: absolute;
}

Check out the Demo here

@import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700');
.google{ font-family:'Hind', sans-serif}

a {
  color:white;
  text-decoration:none;
  font-family:'Hind';
}

#bold_avenir {
  font-family:'Hind';
  font-weight:bold;
}

#head_link{
  text-transform:uppercase;
}

body{
  background-image: url('http://via.placeholder.com/300');
  background-size:cover;
}

.project_container{
  border:purple 4px solid;
  height: 800px;
  width:100%;
  overflow:auto;
  white-space: nowrap;
}

.pjct-fat{
  display:inline-block;
  width:800px;
  height:96%;
}

.pjct-skinny{
  display:inline-block;
  width:450px;
  height:96%;
  position: relative;
}

.pjct-skinny div {
    position: absolute;
}

#project_1{
  border:red 4px solid;
}

#project_1 p{
  display:block;
  border:red 4px solid;
}

#project_2{
  border:yellow 4px solid;
}
#project_3{
  border:green 4px solid;
}
#project_4{
  border:blue 4px solid;
}
<html>
    <head>
        <meta charset="utf-8">
        <title>Paul Taylor Creates</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
        </header>
      <nav><a href="" id="head_link"><span id="bold_avenir">Paul Taylor</span> Creative Design</a>
        </nav>

      <div class="project_container"> 
        <div class="pjct-skinny" id="project_1">
          <div>First Project</div>
        </div>
        <div class="pjct-fat" id="project_2"> 
        </div>
        <div class="pjct-fat" id="project_3"> 
        </div>
        <div class="pjct-skinny" id="project_4"> 
        </div>
      </div>

        <footer>
          <a href=""><span id="bold_avenir" >Resume:</span> LinkedIn </a> 
          <a href=""><span id="bold_avenir">Contact:</span> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5a5b4a0b9a1b4acb9baa7b6a7b0b4a1b0a695b2b8b4bcb9fbb6bab8">[email protected]</a></a>
        </footer>
    </body>
</html>

Answer №2

Is this meeting your criteria?

@import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700');
.google{ font-family:'Hind', sans-serif}
//custom code by naren
body{
  overflow:hidden;
}
footer{
    height: 50px;
    bottom: 0px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}
.project_container {
    border: purple 4px solid;
    height: auto;
    width: auto;
    overflow: auto;
    white-space: nowrap;
    position: absolute;
    overflow-x: hidden;
    top: 50px;
    bottom: 50px;
    left: 0px;
    right: 0px;
}
header{
    position: absolute !important;
    top: 0px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
//custom code by naren
a {
  color:white;
  text-decoration:none;
  font-family:'Hind';
}

#bold_avenir {
  font-family:'Hind';
  font-weight:bold;
}

#head_link{
  text-transform:uppercase;
}

body{
  background-image: url('http://via.placeholder.com/300');
  background-size:cover;
}

.project_container{
  border:purple 4px solid;
  white-space: nowrap;
}

.pjct-fat{
  display:inline-block;
  width:800px;
  height:96%;
}

.pjct-skinny{
  display:inline-block;
  width:450px;
  height:96%;
}

#project_1{
  border:red 4px solid;
}

#project_1 p{
  display:block;
  border:red 4px solid;
}

#project_2{
  border:yellow 4px solid;
}
#project_3{
  border:green 4px solid;
}
#project_4{
  border:blue 4px solid;
}
<html>
    <head>
        <meta charset="utf-8">
        <title>Paul Taylor Creates</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
      <nav><a href="" id="head_link"><span id="bold_avenir">Paul Taylor</span> Creative Design</a>
        </nav>
        </header>

      <div class="project_container"> 
        <div class="pjct-skinny" id="project_1">
          <div>First Project</div>
        </div>
        <div class="pjct-fat" id="project_2"> 
        </div>
        <div class="pjct-fat" id="project_3"> 
        </div>
        <div class="pjct-skinny" id="project_4"> 
        </div>
      </div>

        <footer class="footer">
          <a href=""><span id="bold_avenir" >Resume:</span> LinkedIn </a> 
          <a href=""><span id="bold_avenir">Contact:</span> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5a5b4a0b9a1b4acb9baa7b6a7b0b4a1b0a695b2b8b4bcb9fbb6bab8">[email protected]</a></a>
        </footer>
    </body>
</html>

In addition, check out the JSFiddle below:

https://jsfiddle.net/Kai_Draord/kz4uap1t/

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 navigation pills in Bootstrap 5 are experiencing functionality issues

Hey everyone, I'm currently tackling a new project and running into an issue with Bootstrap 5 nav pills. I need them to toggle between column and grid view, but they aren't behaving as expected (content displays fine on the first pill, but nothin ...

htmlcssbootstrap-4bootstrap-5cdn

Transform text that represents a numerical value in any base into an actual number

Looking to convert a base36 string back to a double value. The original double is 0.3128540377812142. When converting it to base 36: (0.3128540377812142).toString(36); The results are : Chrome: 0.b9ginb6s73gd1bfel7npv0wwmi Firefox: 0.b9ginb6s73e Now, h ...

javascriptjqueryajaxhtml

Conceal particular table cells through jQuery

I am a beginner in the world of jQuery. My goal is to hide certain cells in a row when clicked, and have them displayed again when clicked once more. I've searched high and low for a solution, but all I find is how to hide entire rows. Here's an ...

javascriptjqueryhtml

Tips for creating a responsive <hr> tag

Help needed with adjusting the horizontal line tag on a webpage created using HTML, CSS, and Bootstrap. The issue arises when the window size changes to extra small. Initially, the hr tag was set to 400px, which looked great on full-screen view. However, ...

htmlcssresponsive-designbootstrap-4

How can you trigger a 'hashchange' event regardless of whether the hash is the same or different?

Having a challenge with my event listener setup: window.addEventListener('hashchange', () => setTimeout(() => this.handleHashChange(), 0)); Within the handleHashChange function, I implemented logic for scrolling to an on-page element whil ...

javascriptjqueryhtmltypescript

I'm having trouble retrieving a list of elements from a Python class in order to showcase them in an HTML file

I've written a snippet of code in my views.py file where I defined a class called Pizza. from django.shortcuts import render from .models import Pizza def index(request): pizzas = Pizza.objects.all() return render(request, 'menu/index. ...

htmldjangodjango-viewsdjango-templatespycharm

What is the default DTD used if it is not specified in the doctype declaration?

On my webpage, the doctype is specified as: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> No DTD is explicitly set. I'm curious which DTD will be defaulted in IE? It seems that it doesn't function the same way as "http ...

html

Showing php outputs within a container

I want to outline my goal in detail. I have a setup with 3 pages: index.html, form.html, and result.php. By using jQuery, when the button on index.html is clicked, form.html is loaded inside a div within index.html. Upon submitting form.html, it calls resu ...

phpjqueryhtmlajax

Opera browser fails to render CSS3 box shadow effect

My menu features CSS3 effects on hover and active states, giving it a unique appearance. Below is the CSS3 styling I have implemented: #Menu a:active, #Menu a.active:before,#Menu a:hover:before { Content: ' '; position:absolute; z-i ...

cssopera

Binding iframes in Angular 6

Is there a way to display iframe code stored in a variable within a div? Here's the HTML code: <div class="top-image" [innerHTML]="yt"></div> And here's the TypeScript code: yt = '<iframe class="w-100" src="https://www.you ...

htmlangulartypescriptiframe

Issues with overlapping floating labels in Bootstrap 5

Is there a way to display longer text without it being cut off or truncated, especially in input fields where the full content is necessary for clarity? It can be frustrating when only part of the text is visible. This issue arises from the Bootstrap 5 e ...

csstwitter-bootstrapflexboxbootstrap-5floating-labels

Setting up VideoJS Flash backup

Due to Firefox's restriction on using an .mp4 file in the <video> tag, I am required to utilize the Flash fallback option on my VideoJS player. When it comes to Chrome, Safari, and IE, I can customize my VideoJS player via JavaScript to perform ...

javascripthtmlfirefoxmp4video.js

Place unchangeable elements both preceding and following an input field

At first glance, this question bears a striking resemblance to this specific one. However, the original poster indicated that it remains unanswered, prompting me to inquire about its feasibility and implementation. Here is what I aim to achieve: I am seek ...

htmlcssreactjsjsx

The customary scroll bar located to the right side of the screen

I'm struggling to create a common scrollbar for both the left navigation div and right content div on a simple page, but all my attempts have failed. No matter what I try, the scrollbar only works for the content div. Is there any way to make them sha ...

htmlcss

Include new items in the li tag using JavaScript

Hello, I am looking to dynamically add elements to an LI element when a link is clicked. I have successfully added elements to a DIV using the following code snippet: I came across a similar question on Which "href" value should I use for JavaScript links ...

javascripthtml

What is the best way to align elements in a div or navigation section?

Behold, my masterpiece navigation bar: #main-nav-bar .nav-item { display: inline-block; padding: 0.5%; border-right: 1px solid white; } #main-nav-bar a { text-decoration: none; color: #CFCFE0; } <nav id="main-nav-bar"> <a href="#Ser ...

htmlcss

Using HTML5 to play video from a stored binary string

I have been attempting to extract the data from a video file in binary format using the FileReader.readAsBinaryString(Blob|File) method, as demonstrated in this example http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files. My intention i ...

javascripthtmlhtml5-video

Flexible layout of perfectly square elements

I am currently working on creating a responsive grid layout consisting of squares that are positioned absolutely within their parent element. The goal is to ensure that when the page is resized, the squares scale proportionally with their parent container ...

javascripthtmlcss

Having trouble retrieving the routeName as it consistently returns empty

I attempted to extract the routeName from the URL in order to apply a different class to the body's layout when on the /Category page. https://i.stack.imgur.com/J0hsp.png @{string classContent = Request.QueryString["routeName"] != "/ ...

htmlcssasp.net

The locator for the span class cannot be found or interacted with in Selenium

Here is the HTML code snippet for a span element: <td class="header-logout-btn"> <a href="logout.htm" class="btn switch-btn"> <i class="fa fa-times"></i><span class="hidden-xs">Home</span> </a> </td> I ...

javahtmlseleniumselenium-webdriver