The div elements are not aligning correctly

Struggling to align the divs correctly in the container? They keep jumping out or overlapping, despite your efforts to space them equally. Each div is named according to its position, and you've tinkered with clear and float settings to no avail.

Here's your HTML:

 <div class="triplecontainer">

<div class="leftbox">
<p> LEFT </p>
</div>


<div class="middlebox">
<P> MIDDLE </P>
</div>


<div class"rightbox">
<P> RIGHT</P>
</div>



</div>

Your CSS:

.triplecontainer {
height: 200px;
width: 950px;   
margin-right:auto;
margin-left:auto;
margin-top:10px;

}

.leftbox {
height: 180px;
width: 250px;
margin-top: 10px;
margin-left: 10px;
clear: none;
float: left;

}

.middlebox {
height: 180px;
width: 250px;
margin-top: 10px;
margin-left: 10px;
float:none;
clear:left

}

.rightbox {
height: 180px;
width: 250px;
margin-top: 10px;
margin-left: 10px;
float:none;
clear:both;

}
htmlcss

Answer №1

Try using inline-block instead of block for better alignment.

Don't forget to include a clear strategy to prevent any unexpected layout issues.

clear: none;

Keep experimenting with different values until you find the perfect fit for your design.

Answer №2

Consider implementing a fixed table layout instead:

.triplegrid {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.triplegrid > div {
    display: table-cell;
}

Check out the JSFiddle demo here!.

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

having trouble getting javascript animations to work on html code

I've been experimenting with adding a typing animation to my current HTML document as part of a project I'm working on. Despite following tutorials and guides, the animation is successful when created in separate HTML/CSS documents, but integrati ...

javascripthtmlcss

JavaScript or jQuery can be used to rearrange the position of child divs within parent divs with a single action

I am facing a dilemma with 5 identical divs, each containing text and an image. My goal is to rearrange the child divs so that the text comes after the image in each article. Put simply, I want the image to be displayed above the text in all instances. Al ...

javascripthtmljquerycss

The fixed background-attachment feature does not function properly in Chrome when it is contained within a scrolling div

Essentially, if a background image is placed within a scrolling div, it will no longer remain fixed and will revert back to scrolling: CSS: <div class="wrapper"> <span></span> </div> HTML: html, body{ width: 100%; height: ...

cssgoogle-chromebackground-imagebackground-position

Media publications do not conform to the current trends

I'm currently utilizing the HTML-to-paper plugin to print my content on a printer. However, I've encountered an issue where it doesn't seem to apply any of the styles I've defined within @media print. The challenges I'm encounteri ...

javascriptcssvue.jsmedia-queries

Is it possible to update the text in a select input from a dropdown menu within

In my example modal, I have included two components: a dropdown and an input text field. <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Test Modal</button> ...

javascripthtmlmodal-dialogbootstrap-modal

Modifying CSS to ensure compatibility with various browsers

I am curious if it is possible to modify some CSS when viewed in a different browser. For instance, I have this CSS for a flexbox div: .wdFlex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit- ...

htmlcssbrowserinternet-explorer-9flexbox

Utilizing Angular2 to name dynamically generated sets of radio buttons

As a novice in web development and Angular2, I am facing an issue with an Angular2 component tasked with creating a tree view on a webpage using the angular-tree-component library. In this tree, each node is associated with a popover HTML template containi ...

htmlangularradio-buttonradio-group

Choose from a variety of components within a cell using xPath

Currently utilizing Behat to interact with form elements on a webpage. The structure of my HTML is as follows - I have a table with two required fields, one being an input, the other a textarea, and a checkbox. <table class="table"> <thead&g ...

phphtmlformsxpathbehat

Ensuring stackable columns are centrally aligned using justify-content-center

My goal is to create a responsive layout with x columns that display 3 columns per row on lg screen sizes, aligned using justify-content-between. When the screen size is smaller than lg, all x columns should stack vertically and be aligned using justify-co ...

htmlcsstwitter-bootstrapbootstrap-4

Combining Text and Images with a Background Video using CSS

I need help replicating a unique design I came across in a graphic design mockup. It involves a background video with a transparent green overlay, an image of a man fixed to the right side, and text flowing over it. I've managed to recreate most of it ...

cssbootstrap-4

What is the process for adding a new item each time the button is clicked?

I am working on an application that includes two select dropdowns followed by a button below them. .component.html <div class="row"> <div class="col-sm-5"> <select class="form-control whenI&quo ...

javascripthtmlangulartypescriptappend

Query in MySQL to select distinct rows and non-distinct rows

Looking to run a query on a table where the names are distinct and the emails are not Here is how my database is structured: Name Email john <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfdad2ded68effd2c6c8daddccd6cbd ...

phphtmlmysql

Guide to using Python and Selenium to automate clicking the "Load More" button on the webpage "https://github.com/topics"

With just one click of the load more button, I can uncover a plethora of information and scrape additional HTML content beyond what is initially shown. In this scenario, the task at hand involves navigating to github.com/topics and locating the singular b ...

pythonhtmlseleniumweb-scrapingselenium-edgedriver

Change the background color according to the user's input text

I want to create a text box where users can input color keywords like blue, lime, or black. When they click submit, I want the background color of the page to change accordingly. This is what I have so far: <label for="color">Color: </label> ...

javascripthtmlcss

Rendering Django models in HTML may present difficulties

I am having an issue with rendering some of the models I've created in my template. Some are working fine when I try to use the same method to create other models, but they don't render properly. I have tried running manage.py runserver, as well ...

pythonhtmldjangomodel

Aligning text in a div with bootstrap

Trying to get the hang of Bootstrap and its grid system. Here's my attempt at creating a footer using only some of the columns available. I'm having trouble centering the list items within the div, despite styling the elements. Can't figure ...

htmlcsstwitter-bootstrap

Modify background image upon hovering using AngularJS

I cannot seem to make the background images of my divs change. Despite trying various options, none of them have been successful. Here's an example of my code: <div ng-controller="mainController" class="main"> <div ng-repeat="land in lan ...

javascripthtmlangularjs

Tips for shifting the cursor slightly to the right within an Input field

I created a div with an input field inside. I set the input field to autofocus, so when the page loads, the cursor is automatically focused on the input field. However, the cursor is touching the border of the input field, making it hard to see clearly. ...

htmlcss

Creating a vertical line before the boxes in VueJS to label them using HTML and CSS

I am trying to implement a feature where there is a vertical line just before the boxes in order to label those boxes on the y-axis. Here is the code snippet I have written: <div class="rows" v-if="this.system == 'cpu'"> ...

htmlcssvue.jsbox

When making an asynchronous call, only the initial character is shown in the (HTML) listbox elements

I have a query regarding AngularJS compatibility with IE9. My issue is with a modal window containing a patient list. <div class="modal-header"> <h3 class="modal-title">Patient list</h3> </div> <div class="m ...

javascripthtmlajaxangularjsinternet-explorer-9