Ways to keep two left floating divs from overlapping?

My main div covers the entire website. Within it, there are two smaller divs, both with the CSS property float: left. The left div is shorter in height than the right one, causing the content of the right div to overlap onto the left div when its length exceeds the height of the left div. I attempted using position: absolute, but it did not solve the issue. For more clarity on my problem and desired outcome, please refer to the image provided here.

.left-div {
          margin: 25px;
          float: left;
        }

        .right-div {
           float: left;
           margin: 25px;
           justify-content: center;
         }
<div className="main-container">
          <div className="left-div" /> content of left div
       </div>
       <div className="right-div">
          content of right div
       </div>
    </div>

htmlcss

Answer №1

Implement Flexbox for Layout

.main-container {
  display: flex;
  flex-direction: row;
}
.left-div {
  flex:1
}
.right-div {
  flex:1
}
<div class="main-container">
  <div class="left-div" > content of left div
</div>
<div class="right-div">
  content of right div
</div>
</div>

Answer №2

Avoid using float as it can disrupt the order of elements on the page. Instead, consider using display flex for the main container. Alternatively, you can use display inline-block for your divs if you prefer not to use flex.

.main-container{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
}

.left-div {
  margin: 25px;
  border: 1px solid #a5a5a5;
  padding: 5px;
  height: 100px;
  width: 40%;
  margin: 0 5px;
}

.right-div {
  margin: 0 5px;
  justify-content: center;
  border: 1px solid red;
  padding: 5px;
  height: 250px;
  width: 60%;
}
<div class="main-container">
  <div class="left-div"> content of left div </div>
  <div class="right-div">
    content of right div
  </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

Switch between visibility of objects with toggle button

I have set a background image on the body, and positioned a large box, footer, navigation bar, and header above it. In order to add functionality to slide these elements up and down, I've created two buttons with classes 'slideUp' and &apos ...

javascriptjqueryhtmlcss

Tips for integrating elements within React Components to create a Container-like structure

I am looking to create a component similar to the following: class MyContainer extends React.Component { render(){ return <div width="1000">{xxx }</div> } } and it should be used in this way: <MyContainer><xxx>&l ...

htmlreactjsjsx

Clicking is not causing the Simple Modal to appear

I'm facing an issue with the modal on my website. Initially, it was working fine and showing up when I clicked the button. But now, for some reason (which I can't figure out), the modal box refuses to open. The layout of my page consists of an i ...

javascripthtmlcsssimplemodal

Spaces ahead and beneath the text

I'm struggling to style a small block of text within its element perfectly. Despite my efforts, there always seems to be unnecessary space in front and below the words. One workaround I found was adjusting the line height to remove the bottom gap, but ...

htmlcss

Including an image side by side with clickable text within a list

Check out my progress here: http://jsfiddle.net/dDK6z/ I've experimented with using display:inline(-block), as well as adjusting margins, padding, and more, but I can't seem to get the image to move down or the text to move up. Does anyone have ...

htmlcss

Unable to extend the data-toggle dropdown to the entire width of the screen

Is there a way to make my navbar dropdown menu expand to the full width of the screen without leaving white space on the left side? I am using Bootstrap and have included a media query in my CSS as shown below. https://i.sstatic.net/US3ce.png <nav clas ...

htmlcsstwitter-bootstrapbootstrap-5

Insert text within the switch component using Material-UI

Looking to customize Material UI's Switch component with text inside? Check out the image below for an idea of what I'm going for. https://i.stack.imgur.com/KadRZ.png Take a look at my code snippet: import React from 'react'; import S ...

javascripthtmlreactjsmaterial-ui

Creating a triangle with SVG polygon: A step-by-step guide

I'm attempting to create a bottom triangle using SVG polygons, similar to the image below: https://i.stack.imgur.com/571FM.png Here is what I have tried so far: <svg xmlns="http://www.w3.org/2000/svg" height="150px" width="100%" viewBox="0 0 ...

htmlsvgpolygonclip-path

Creating a unique CSS grid layout with custom borders

Just a quick question, I'm wondering how you would approach creating this type of effect using CSS? https://i.sstatic.net/rYCJn.png The concept revolves around building the grid using bootstrap. As the screen size decreases, the grid transitions to ...

htmlcssdrupalbootstrap-4

Modify border color of vuetify v-card upon clicking a button

How can I update the border color of the v-card element from vuetify when the user clicks the showError button associated with the limited-products id? I want the border color to change to red. Additionally, when the user clicks the removeError button, I ...

htmlcssvue.jsvuetify.js

What is the method for aligning a button label to the left and an icon to the right?

I have a list of items and I want to display label text on the left and a check icon on the right. This works fine when the text is short, but when I added the textOverflow property, the icon gets hidden along with the rest of the text. Here is my list ...

htmlcssreactjs

Make sure the div is positioned at the center of the screen with a set width, and ensure that

Is there a way to have three divs align next to each other, with the side divs filling up the remaining space equally? <div class="second_bar"> <div class="status_border_left"> </div><div class="nav_bar"> ...

htmlcsslayout

What is the best way to hide only the rows in a table when it is clicked using JavaScript?

Is there a way to hide rows in these tables by clicking on the table head? I'm currently using bootstrap 5 so JQuery is not an option. <table class="table table-info table-bordered"> <thead id="tablea"> ...

javascriptcssdom-eventsbootstrap-5

Tips for removing borders around a textbox with a background image: When incorporating a background image into a

After removing the default borders on a textbox using outline:none;, I noticed that adding a background image caused the border to reappear, and I couldn't get rid of it! How can I solve this issue? Here is the code for the textbox: <input type = ...

htmlcss

The issue of multiple clicks being triggered when opening a dialog box: comparing the trigger and the click events

When I right-click on a jTree list item, a dialog box pops up for editing. The dialog box has a table with a list of items similar to the original one selected. The first time I open the dialog box, the selected item is highlighted and its information popu ...

javascriptjqueryhtml

Using jQuery to dynamically swap out <tr> tags and all the elements inside of them

In order to enhance user experience, I am looking to automatically fill in certain form elements within a table when a link is clicked. The intention is for the fields to populate with predefined values and then convert into HTML paragraph elements, preven ...

javascriptjqueryhtml

Deactivate the Autofill feature on Google Toolbar

Dealing with the Google Toolbar's autofill feature has been a constant frustration in my web development journey over the years. I have resorted to creating a timer control to monitor changes, as the developers overlooked firing change events on contr ...

asp.netjavascripthtmlcss

Toggle Canvas Visibility with Radio Button

As I immerse myself in learning Javascript and Canvas, the plethora of resources available has left me feeling a bit overwhelmed. Currently, I am working on a dress customization project using Canvas. // Here is a snippet of my HTML code <input type=" ...

javascripthtmlcanvas

The options that are not selected in a dropdown menu will not be added to a different dropdown menu

In my application, I have 2 select boxes. When the user submits the page, only the selected students in the first select box #studentadd are appended to the second select box #studentselect. However, the unselected options from #studentadd do not get appen ...

phpjqueryhtmlajaxmysqli

Is there a way to modify the header color in LESS? I attempted to do so, but unfortunately, my changes were unsuccessful

I have encountered an issue with my HTML code. Here's a snippet of it: <html> <head> <link rel="less/less.js" href="css/style.less"> </head> <header> This is a header. </header> </html> Within style.less ...

htmlcssless