Center div encroaching on floated left div

https://i.sstatic.net/uwyGY.pngCan someone help me align three divs horizontally? I'm having an issue where the center div is overlapping the left div. What could be causing this problem?

    <div>
      <div style={{width:"100px", border:"solid blue", float:"left"}}>Left some text some text some text</div>
      <div style={{width:"100px",  border:"solid green", float:"right"}}>Right</div>
      <div style={{border:"solid red", margin:"0 auto"}}>Center</div>
      <div style={{clear:"both"}}></div>
    </div>

In addition to cutting into the left div, the center div is also overlapping the right green box despite having the same border sizes.

htmlcssreactjscss-float

Answer №1

Set the red box's margin-left to 100px:

<div>
      <div style="width:100px;border:1px solid blue;float:left">Left some text some text some text</div>
      <div style="width:100px;border:1px solid green;float:right">Right</div>
      <div style="border:1px solid red;margin-left:100px">Center</div>
      <div style="clear:both"></div>
    </div>

Answer №2

Have you considered implementing flexbox in your design? It offers a more convenient and modern approach compared to the outdated "float" method. I highly recommend giving it a try. You can easily switch from using width to using flex properties, which are clearly documented in the CSS code below.

.wrapper {
  display: flex;
  align-items: start;
  justify-content: space-between;
  width: 100%;
  text-align: center;
}

.blue {
  width: 100px;
/*   flex: 1; */
  border:1px solid blue;
}

.green {
  width: 100px;
/*   flex: 1; */
  border:1px solid green;
}

.red {
  width: 100%;
/*   flex: 8; */
  border:1px solid red;
  margin: 0 auto;
}
<div class="wrapper">
  <div class="blue">Left some text some text some text</div>
  <div class="red">Center</div>
  <div class="green">Right</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

Why is the official website for the Apache HTTP Server httpd.apache.org when HTTPd is actually a program that can be run?

After conducting thorough research, I discovered that HTTPd (HyperText Transfer Protocol daemon) is a software program that operates in the background of a web server. My amazement and confusion peaked when I came across the webpage 'httpd.apache.org ...

htmlapachehttpwebserverhttpd.conf

Is there a way to stop Bootstrap from automatically bolding the font?

When testing this simple example without the bootstrap link, everything seems to be working correctly: Hovering over any word changes its color to red, and when hovering away it returns to black. But as soon as the bootstrap link is included, the text bec ...

javascriptjqueryhtmlcsstwitter-bootstrap

"Customizing the text color for a selected range in react-date-range: A step-by-step guide

Is it possible to customize the text color of the selected date range using properties from react-date-range? Screenshot 1 Screenshot 2 I am currently working with react-date-range and the react.js package. Although I attempted custom styling, I have not ...

reactjsreact-date-range

Craving assistance in coding permutations

Thank you for responding. I want to express my gratitude for your efforts in trying to assist me. Unfortunately, I have posted this problem on multiple websites and no one has been willing to help. Regarding my code, my objective is to count permutations. ...

javascripthtmlarrayspermutation

What is the method for accessing a selector within a foreach loop?

Whenever a user clicks on a date in the jquery datepicker, two ajax calls are triggered. The goal is for the second ajax call to populate the response/data into a paragraph with the class spots within the first ajax call, displaying available spots for th ...

javascriptjqueryhtmlajax

Making use of CSS to manipulate the placement of images within a grid

I've been struggling to insert an image into a grid, and it's causing some issues for me. Currently, the main problem I'm facing is that it's pushing another grid item down. body { padding: 0; margin: 0; } .main { wi ...

htmlcsscss-grid

Ways to clear TextField status

My question is about a Textfield. In the case where the state is null but the text field value is showing in the Textfield. <TextField style={{ width: '65%'}} id="standard-search" ...

javascriptreactjsmaterial-ui

PHP script to populate a table with images based on certain conditions

I have a table in HTML that displays results from a SQL database on the right hand side. The code snippet for populating each cell is as shown below: <tr> <td>House</td> <td><?php echo $row_buyerdetails['tod_hous ...

phphtmlsql

When using ESLint together with React, you may encounter errors related to `no-unused-vars

I've configured eslint and eslint-plugin-react. After running ESLint, I'm encountering no-unused-vars errors for all React components. It seems that the linter is not recognizing JSX or React syntax. Any solutions? For example: app.js import ...

javascriptreactjsjsxeslint

What are the reasons behind my item not triggering an alert even after I have created it, saved it, and attempted to alert it?

I am currently working on a code that allows users to input information which is then stored in an object. However, despite my efforts, when I attempt to retrieve the saved object by alerting one of its values, it indicates that the object does not exist. ...

javascripthtmlobject

Using Material-UI in React, add a clear icon card component

Is there a way to place the clear icon on the top right side of the card, overlapping it? What is the best method to achieve this? https://i.stack.imgur.com/QbkXg.png For a live demo and code example, follow this link: CODESANDBOX <Paper sx={{ p ...

reactjsmaterial-ui

Loading React router on every route page

<BrowserRouter> <div> <Route path={"/"} component={Home} /> <Route path={"/component"} component={AnotherComp} /> <Route path={"*"} component={NotFound} /> </div> </ ...

javascriptreactjsreact-router

An issue occurred while trying to establish the referrer policy

I encountered an error in my Chrome console while working on a WordPress site. The following error message showed up: "Failed to set referrer policy: The value 'http://example.com/comic/' is not one of 'always', 'default' ...

javascripthtmlwordpressmetareferrer-policy

Using Javascript to dynamically retrieve accordion content from a dynamically generated ID

I am currently working on developing a more intricate accordion feature. The accordion will consist of 4 buttons (section 0-3) with unique content (lorem ipsum 0-3). Clicking on "section 0" should reveal "lorem ipsum 0", while clicking on "section 1" shoul ...

javascripthtmlcssaccordion

Customize buttons in Material UI using the styled component API provided by MUI

I am intrigued by the Material UI Styled Component API, not to be confused with the styled-component library. However, I am facing difficulty in converting my simple button component into a linked button. Can anyone advise me on how to incorporate a react ...

reactjstypescriptmaterial-ui

Ways to retrieve an input field value without triggering form submission

I'm currently working on a payment form where users input the amount in a text field. I also have another text field on the same form that should automatically display the amount in words based on the user input. However, I'm struggling to figure ...

javascriptphphtml

Understanding JavaScript for Reading a Website's "Local Storage"

Can the local storage of one website be accessed by a different domain, or is it restricted to only the domain that saved it? ...

javascriptphphtmlcssjson

What is the best way to prevent URL modification in Angular?

Currently, I am working on a project with a specific page (let's call it localhost:XXXX/notification-page) and we want this to be the only URL that can be accessed. Any attempt to change the URL should redirect users back to the notification-page. As ...

htmlangularweb

Unique custom CSS and meta tag options for enhancing iPad/iPhone user experience

Currently, I am developing a web application that integrates Extjs components, PHP, and MySQL. My main goal is to ensure that my application looks correct on the iPad. Are there any specific CSS rules or meta tags that I should be implementing for optima ...

javascriptcssipadextjs

Issues regarding the CSS navigation bar

I'm currently working on creating a navigation bar using HTML and CSS. However, I'm facing an issue where the nav-bar doesn't extend to the full width of the page as intended. I've attempted adjusting the padding-left: 0px and padding-r ...

htmlcss