The divs are superimposed rather than piled on top of each other

I am facing an issue with two divs, .instructions and .personal_info, that I want to be stacked one on top of the other. Currently, it seems like the two divs are being overlaid, which is not the desired outcome. Specifically, I would like .instructions to remain in its current position, while .personal_info should appear below it.

I have provided my code snippet below. Can someone please point out what I might be doing wrong here?

.instructions {
  width: 100%;
  padding: 10px;
}
.column-left {
  float: left;
  width: 33%;
  padding: 0px 10px;
}
.column-right {
  float: right;
  width: 33%;
  padding: 25px 10px 0px 10px;
}
.column-center {
  float: left;
  width: 33%;
  padding: 25px 10px 0px 10px;
}
.personal_info {
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  padding: 5px;
}
<div class="instructions">
  <div class="column-left"></div>
  <div class="column-center"></div>
  <div class="column-right"></div>
</div>

<div class="personal_info">
  <p></p>
</div>

htmlcss

Answer №1

It is recommended to utilize CSS display:flex for better layout control

<div style="display:flex;">
    <div style="width:33%; background-color:wheat;">Left</div>
    <div style="width:33%;">Center</div>
    <div style="width:33%; background-color:snow">Right</div>
</div>

Answer №2

To eliminate the floated elements, simply add overflow: hidden to the .instructions class:

.instructions {
  width: 100%;
  padding: 10px;
  overflow: hidden;
}
.column-left {
  float: left;
  width: 33%;
  padding: 0px 10px;
}
.column-right {
  float: right;
  width: 33%;
  padding: 25px 10px 0px 10px;
}
.column-center {
  float: left;
  width: 33%;
  padding: 25px 10px 0px 10px;
}
.personal_info {
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  padding: 5px;
}
<div class="instructions">
  <div class="column-left"></div>
  <div class="column-center"></div>
  <div class="column-right"></div>
</div>

<div class="personal_info">
  <p></p>
</div>

For more information on clearing floats, check out resources here, and here.

Answer №3

Check out this resource Potential Solution

.instructions {
  width: 100%;
  padding: 10px;
  background-color: blue;
}
.column-left {
  float: left;
  width: 33%;
  padding: 0px 10px;
}
.column-right {
  float: right;
  width: 33%;
  padding: 25px 10px 0px 10px;
}
.column-center {
  float: left;
  width: 33%;
  padding: 25px 10px 0px 10px;
}
.personal_info {
  position: absolute;
  top:0;
  width: 100%;
  z-index: -1;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  padding: 5px;
  background-color:red;
}

The full context might not be clear, but for the exercise mentioned above, there are a few steps you can take:

  1. Place personal_info before instructions to ensure it's drawn first and set position:absolute to instructions

    1. Set personal_info to be position:absolute, top:0, z-index:-1. This will remove personal_info from the normal HTML flow and position it directly below its sibling .instructions. Setting a lower z-index will keep it below (if its z-index is lower than instructions)

I recommend utilizing "display: flex" for positioning the "columns"

Answer №4

To solve your problem, simply include the display: flex; property in your CSS for the instructions class.

As referenced by W3Schools, setting the value to flex:

Defines an element as a block-level flex container.

While not directly addressing your specific issue, you can explore how floats impact block-level elements further through this response.

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

Establish a hyperlink using the jQuery class

Can you use JQuery to turn the text "Link" into a hyperlink in the following code? <p>Hello World! <span class="link">Link</span>.</p> ...

jqueryhtml

Optimizing text color for ultimate readability in PHP, JS, and CSS

When choosing a text color to go with an arbitrary background color A, it's important to consider which color B will be the most readable. In the past, many have used a simple solution that has become popular, but is ultimately incorrect: To determi ...

phpjavascriptcssbackground-color

Would you like to store modified CSS properties in a cookie?

Currently, I am facing a challenge while working on an ASPX page where CSS is used to define DIV properties. Although these properties can be altered on the page, they do not reflect when attempting to print them. Is there a method to modify CSS properties ...

cssasp.net

What's the best way to position a grid item so that it moves along with its fellow siblings

I am currently utilizing CSS Grids and I have a specific requirement. I need to offset an element so that it moves horizontally across the grid columns while maintaining its width. Additionally, I want the offset value to be added to the element's exi ...

htmlcsscss-grid

Is it possible to install a Chrome extension specifically for YouTube on Google Chrome?

Hey, I'm trying to eliminate thumbnail images from YouTube. The code I am currently using is: while (true) { $("ytd-thumbnail").remove() } As of now, when I input this code in the console, it successfully removes all thumbnail images. However, I ...

javascripthtmljsongoogle-chrome-extension

Guide to creating a nested list using the jQuery :header selector

Here is the structure of my html: <h1 id="header1">H1</h1> <p>Lorem ipsum</p> <h2 id="header2">H2</h2> <p>lorem ipsum</p> <h2 id="header3">H2</h2> <p>lorem upsum</p ...

javascriptjqueryhtmlcssnested

The values returned by querying the browser console and using Selenium are not consistent

I'm working on an HTML page that includes a text box: https://i.sstatic.net/rOG4X.png <h2>Step 2:</h2> <p>Enter the URL for the language here: <input type="text" size="80" name="url"></p> W ...

javascripthtmlselenium-webdriver

Determine the maximum number of children divs that can be accommodated within a parent div

I am facing a situation where I have an API that returns multiple div elements. In my user interface, there is a parent div in which these child divs need to be displayed. The challenge is that if the child divs are overflowing the parent div, they should ...

javascripthtmlcssreactjs

Rotating an HTML caret using CSS does not pivot from the center point

Is there a way to adjust my simple caret rotation to make it rotate from the center? What changes should I make? const Wrap = styled.div` width: 100px; background: grey; span { display: block; transform: ${(props) => (props.isOpen ? " ...

javascriptcssreactjs

Tips for aligning multiple apex pie charts side by side

I am currently utilizing ReactApexChart to display pie charts in a React application. I am trying to have four pie charts aligned horizontally within a single div, but by default, the charts are displayed vertically with each chart in its own separate di ...

cssreactjsapexcharts

Fade In/Out Scroll Effect

As the user scrolls down the page, I have a slider that smoothly slides from right to left. What I'm trying to achieve is for the slider to fade out when the last slide is no longer in view during downward scrolling, and fade back in as the last slid ...

javascriptcssreactjs

Is it possible to have the navigation bar (bootstrap) appear on top of my slider as the default setting, without taking up additional space?

I'm encountering a rather simple issue that's giving me some trouble. I'm currently working on a website design using Bootstrap, and initially, there were no image sliders included by default. After integrating an image slider, I noticed th ...

htmlcssbootstrap-4

Incorporating Ajax comments into an Ajax-powered status feature

I'm currently in the final phase of implementing ajax in my feed. Originally, I thought it would be a simple matter of pasting the comment input, but it turned out to be more complex than I anticipated. I placed the input below the main ajaxed status ...

phpjqueryhtmlajax

Unusual problem with table background hues in Internet Explorer 9

I am currently facing a strange issue while trying to make HTML work in an email (Outlook 2010). During my testing process, I noticed that the table with the class header does not display its background color in Outlook as expected. The background color i ...

htmlcssinternet-explorer

ways to interpret a string input within the <input class> class using selenium in C#

When trying to extract the string value from the input class using selenium, I encounter an issue. Below is the HTML code for the element I am trying to access: <input class="form-control" id="GroupName" maxlength="50" nam ...

c#htmlselenium-webdriver

The alignment of labels and text inputs using CSS flexbox is not correct

I am attempting to create a responsive layout for the labels and text inputs in my HTML code. I want them to align in a single row, with one label and one text input per row when the screen width is below a certain threshold. Once the screen width exceeds ...

htmlcss

I'm facing some issues with my initial attempt at an Angular application and it's

After diving into Angular and setting everything up, I encountered an issue where instead of seeing a name displayed, I was getting {{ name }}: https://i.sstatic.net/SXYju.png Below is the content of app.component.html: <input type="text" [(ngModel)] ...

htmlangular

Looking to create a form that automatically updates the second dropdown list when I make a selection in the main dropdown menu

<div> <label for="form-field-select-3">State : </label> <br /> <select class="chosen-select form-control" id="State" n ...

phpajaxhtmlcodeigniter

The CSS component located just below the dropzone

I've encountered an issue with my infinite horizontal scrollbar. When I drag elements to the dropzone, they appear below it instead of above. Here's the HTML markup: <div class="wrapper"> <div class="header"> Drop here ...

jqueryhtmlcss

After resolving a quirky syntax error in my ejs code, I can't help but ponder what caused the issue in the first place

For my personal web development project, I've been working on a blog webpage to enhance my skills. However, I encountered an unusual syntax error while modifying the code to display different navigation bars for logged in and logged out users. Here&ap ...

htmlnode.jssyntax-errorejs