The alignment of my divs is completely off

While working on my website, I've encountered a bit of a snag.

I'm having trouble getting my divs to line up correctly for events, news, and three middle descriptions. Here's the code (please excuse any messiness...I'm in the process of cleaning it up). Unfortunately, I can't post the code for the EVENTS & NEWS right now.

Here are the details of the three description divs:

<div class="mainall">

 <div class="descc1">
 <div class="deschead1"></div>
 <div class="thumb1"></div>
 <div class="head1"></div>
 <div class="headbg1"></div>
 <div class="descsep1"></div>
 <div class="desc1">
     <p></p>
 </div>
 </div>

 <div class="descc2">
 <div class="deschead2"></div>
 <div class="thumb2"></div>
 <div class="head2"></div>
 <div class="headbg2"></div>
 <div class="descsep2"></div>
 <div class="desc2">
     <p></p>
 </div>
 </div>

 <div class="descc3">
 <div class="deschead3"></div>
 <div class="thumb3"></div>
 <div class="head3"></div>
 <div class="headbg3"></div>
 <div class="descsep3"></div>
 <div class="desc3">
     <p></p>
 </div>
 </div>
</div>

CSS - http://pastebin.com/HPSikFjM

Mainall =

.mainall {
 display: block;
 margin-top: 25px;
 overflow: hidden; }
htmlcssalignment

Answer №1

Alright, I understand your goal now. To achieve it, you'll need to float each column to the left and then apply a clear fix to the last element.

<div id="container-div-expands-full-width">
   <div class="third">First</div>
   <div class="third">Second</div>
   <div class="third">Third</div>
   <div class="clear"></div>
</div>

Here's the corresponding CSS:

.clear { clear:both; }

Does this give you the desired outcome? http://jsfiddle.net/HPY2X/1/

Answer №2

This solution is extremely effective - I have personally tested it on your live website:

CSS Code:

.descc1{
margin-right: 2.1275%;
float: left;
margin-top: 10px;
width: 31.914893617021%;
}

.descc2 {
float: left;
margin-top: 10px;
width: 31.914893617021%;
margin-right: 2.127659574468%;
}

.descc3 {
float: left;
margin-top: 10px;
width: 31.914893617021%;
}

.mainbox {
margin-left: auto;
margin-right: auto;
overflow: hidden;
display: block;
float: left;
width: 100%;
}

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

Mastering CSS Positioning for Navbars

Displayed below is an interesting combination of elements - an image, textbox, and a css menu image. I have managed to perfect my CSS menu. However, I am facing a challenge. I need the textbox to be centered within the navigation bar, with the image posit ...

css

Angular.js: Oops! Looks like the 'MyApp' module is missing

Can anyone help me with using this plunk locally on my machine? I've been trying to run it with the local Python server or http-server, but I keep encountering this Error message: Uncaught Error: [$injector:modulerr] Failed to instantiate module myAp ...

javascripthtmlangularjsmodule

Displaying the Ionic loading spinner on the entire page rather than a restricted small box

Right now, I'm able to implement a basic loading effect, but it appears as a small box. presentCustomLoading() { let loading = this.loadingCtrl.create({ content: 'Loading Please Wait...' }); loading.present(); } However, I ...

htmlcssangularionic-frameworkionic3

What is the proper way to target a div element that has the class of "name1 name2"?

Currently, I am learning CSS through a tutorial and there is a div with the class: <div class="related products"> I am curious, how do I target this specific div in my stylesheet? ...

csscss-selectors

When I scroll, changing the position from fixed to absolute causes my image to jump

My goal is to implement a unique visual effect where a background image, initially positioned as "fixed", gradually moves towards the top of the webpage and then disappears as if it were absolutely positioned. However, this movement should only occur after ...

javascriptjquerycsscss-positionpositioning

Prioritize loading images over loading any HTML elements

My goal is to ensure that my background images are loaded before the HTML content is displayed. However, I've noticed that certain elements such as input fields are being rendered before the background images finish loading. I've researched vari ...

javascriptjqueryhtmlimage-preloader

The screen reader is failing to interpret the status of the main element

Here is the HTML code I am working with: https://codepen.io/erperejildo/pen/KKGjWMN With jQuery, when I click on this div, I toggle the .selected class (which gives it a green background) and change the value of aria-selected. Using this screen reader: ...

javascripthtmljqueryaccessibility

Guide on importing a CSS/SCSS file into a class from a node_module in order to modify the theme of a component

I am utilizing syncfusion components in my project. My goal is to have a specific component switch to Dark theme when the app-dark class is applied to the containing div element. In order to achieve this, I need to import two themes as shown below: @impor ...

cssangularsasssyncfusion

Navigate through PNG image - proceed only if the clicked area is transparent

Imagine having an image that looks like this: https://i.sstatic.net/Ab6aW.jpg I am looking to make it so that when I click on the transparent areas of the image, the click should pass through to the element below. However, if I click on a non-transparent ...

javascripthtmljquerycss

What is the method for delivering a FastAPI response without causing the user to be directed to a different page?

I have developed an API using FastAPI that receives form-data from an HTML page, processes the data, and then returns a completion message after a short moment. Below is my backend code: from cgi import test from fastapi import FastAPI, Form, Request from ...

pythonhtmlformsfastapi

Steps for adding information to a sub tag within an XML document

Imagine having this example tag <root> <foo> </foo> </root> with the following html form <form action="foo.php method="post"> <input type="text" name="something"> <input type=" ...

phphtmlxml

My website appears distorted when the browser is zoomed out. What could be causing this issue?

Whenever I try to zoom out using Internet Explorer, the page doesn't zoom uniformly and ends up looking messy. Can someone please help me understand why this is happening? Here's how the page looks after zooming out (take a look at the three box ...

htmlcss

What could be causing my <UL> to not properly expand around the <LI> items inside of it?

I am currently working with WordPress and have created a menu using a list structure. Here is an example of how it looks: <ul> <li>Home</li> <li>About</li> <li>ParentItem <ul> <--- The heig ...

htmlcsswordpresshtml-lists

The function Document.Open() is not functioning correctly

As I work on my webpage, I am having an issue with a button. This button should notify the user if their username and password are correct, and then redirect them to another page. However, while the notification works fine, the redirection does not happen ...

javascriptjqueryhtmlcssjquery-mobile

Error: html2canvas encountered an uncaught undefined promise

Currently, I am working with an HTML canvas tag: <canvas id="myCanvas"></canvas> I have successfully created a drawing on this canvas, and it looks exactly how I wanted it to. However, when trying to convert it to a PNG file using html2canvas ...

javascripthtmlcanvashtml2canvas

What is the best way to deactivate the onclick event after it has been triggered?

There was an image that triggered the add_cart() JavaScript function when clicked using onclick() <img src="images/add.png" onclick="add_cart()"> The goal is to limit the user to clicking the image only once. Upon the first click, the add_cart func ...

javascripthtmlcsseventsonclick

Are you familiar with PowerShell and its innovative modular GUI capabilities?

One challenge I face is assisting clients who constantly monitor the performance of their servers, services, and network. Utilizing PowerShell, I envisioned creating a unified GUI interface for all these tasks, including remote log tailing capabilities. B ...

c#htmlpowershelluser-interface

Ways to eliminate hover effect in CSS

I have a text that is currently displayed as a hyperlink, and some CSS code is causing it to underline and become bold when hovered over. I want to remove the hyperlink, but still keep this style by default without needing to hover over the text. Here is m ...

htmlcssclass

The deletion by index feature seems to be malfunctioning in Angular

Is there a way to delete an item by its ID instead of just deleting the last element using this code? I want to create input fields with a delete button next to each one simultaneously. TS: public inputs: boolean[] = []; public addNew(): void { this ...

htmlangulartypescript

Styling the tab view in PrimeFaces

I am currently working with the tab view feature in primefaces and I have encountered a couple of issues. 1) When using Internet Explorer, the tabs are displayed vertically instead of horizontally. However, it works fine in Firefox. FireFox : Internet E ...

cssprimefacestabview