CSS Troubleshooting: Misaligned Divs

I'm struggling to properly align two divs within my footer.

Within the footer, I have two paragraphs that need to be placed on the same line - one hugging the left border and the other hugging the right border of the footer div.

Despite trying various methods such as floating and setting widths, the divs are not behaving as expected and the paragraphs are stacking on top of each other.

Can anyone provide guidance on how to successfully position these two paragraphs on the same line while aligning them with opposite borders?

HTML: 

<div id='container'>
   <div id='footer'>
        <div id="errors">
          <p>paragraph 1</p>
        </div>
        <div id="other">
          <p>paragraph 2</p>
        </div>
    </div>
</div>

CSS:

#container
{
   width:90%;
   margin:auto;
   background-color:#F6F4F1;
   border: 5px solid #00b4b4;
   padding:0;
   border-radius: 25px;
}

#footer
{
   width:100%;
   bottom:0;
   color:#838B8B;
   font-family:verdana;
}

#errors
{
   margin-left:4.5%;
   text-align:left;
   color:red;
}

#other
{
   text-align:right;
   margin-right:3%;
   display:inline-block;
}

JS FIDDLE demonstrates the unexpected behavior of my code.

htmlcss

Answer №1

I've just made some updates to your code snippet on this fiddle

In order for the layout to work correctly, you'll need to float the errors div to the left and the other div to the right. Don't forget to add a clear after closing the container around them.

If you're unsure why the clear property is important in this context, I recommend checking out this explanation

Answer №2

Does this meet your requirements :

#wrapper
{
width:85%;
margin:auto;
background-color:#EDEADB;
border: 4px solid #00aabb;
padding:0;
border-radius: 20px;
}

#footer-content
{
width:100%;
bottom:0;
color:#666666;
font-family:arial;
}

#error-messages
{
margin-left:3.5%;
text-align:left;
color:red;
display:inline-block;
float:left;
}

#other-content
{
text-align:right;
margin-right:2%;
display:inline-block;
float:right;
}
<div id="wrapper">

<div id='footer-content'>

   <div id="error-messages">
       <p>Message 1</p>
   </div>
   <div id="other-content">
       <p>Message 2</p>
   </div>
    <div style="clear:both;"></div>
   </div>
    
</div>

Make sure to include display:inline-block; for the error class, and use the float property with values of left for error and right for other. Finally, add one more div after other that includes clear:both; to clear any floated elements above it.

Answer №3

Utilize float and position attributes in the following way...

 #container
    {
    width:80%;
    margin:auto;
    background-color:#EAE7E4;
    border: 2px solid #1A535C;
    padding:0;
    border-radius: 20px;
    }

    #footer
    {
    width:100%;
    bottom:0;
    color:#6B737C;
    font-family:arial;
    }

    #errors
    {
    margin-left:5%;
    text-align:left;
    color:red;
    float:left;
    position:absolute;
    left:0px;
    }

    #other
    {
    text-align:right;
    margin-right:4%;
    display:inline-block;
    float:right;
    position:absolute;
    right:0px;
    }

Answer №4

Check out this code, it might be what you're looking for:

#footer
{
height: 100px;
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}

#errors
{
float: left;
margin-left:4.5%;
text-align:left;
color:red;
}

#other
{
    float: right;
text-align:right;
margin-right:3%;
display:inline-block;
}

https://jsfiddle.net/4vuywmn2/5/

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

Utilize Bootstrap to switch between 'collapse' and 'collapse in' depending on the device being used

I have a collapsible panel set to default "expand" (collapse in) and it is working well. However, I would like to make it "collapse" (shrink) for mobile and tablet devices. Is there any built-in feature in Bootstrap that can help me achieve this? <div ...

jqueryhtmlcsstwitter-bootstrap-3

What causes jquery height and javascript height to both be returned as 0?

I'm facing an issue with a visible div on my screen - despite being visible, its height always returns as 0. I've attempted various jQuery and JavaScript methods to retrieve the height, but it consistently shows as 0. Here's the structure of ...

javascriptjqueryhtmlcss

How can JavaScript be used to remove HTML tags from text while preserving a space between each line?

I found a helpful solution on Stack Overflow for removing HTML from text content. This is the method it suggests: function strip(html){ let doc = new DOMParser().parseFromString(html, 'text/html'); return doc.body.textContent || "&quo ...

javascripthtml

What is the Significance of the Height in This Sample Menu?

I came across this interesting menu sample on W3Schools while working on my MVC layout page. My menu was looking messy, and I really liked the clean look of this one. When I pasted it into my website, it worked perfectly, but I'm puzzled about how it& ...

htmlcss

Streaming HTTP content on a domain secured with HTTPS using HTML5

Is it possible to stream HTTP on an HTTPS domain without triggering browser security errors? By default, the browser tends to block such requests. I rely on the hls.js library for desktop support with .m3u8 files. When I play content directly (on mobile o ...

javascripthtmlvideobrowserhttps

html form-- assistance required in making new input area appear upon clicking radio button

Currently, I am in the process of creating a basic customer database using mysql and php. My goal is to have extra input fields appear for mailing address when users click on the radio button labeled "different mailing address". However, I'm unsure ab ...

phpjqueryhtmlmysql

Limiting keyboard input with a phone number in a gridcolumn tag: A step-by-step guide

I have a query regarding a code line that is used to input a phone number into a designated box. <GridColumn field="phoneNumber" title="Phone Number" editor="text"/> Currently, I am able to enter any text using the key ...

htmlreactjs

Having difficulty viewing the images clearly

My JavaScript codes for scrolling images are not displaying all the images when viewed on Google Chrome. Is there a solution available? Below is the included JS code and CSS. data=[ [" images/img1.jpg"," Image1","pic01.jpg"], [" images/img2.jpg","Image2 " ...

javascriptcss

What is the best way to remove margin on the first child element in a right-to-left (

Seeking advice on how to remove the margin from the first child of four progress bars arranged vertically in a right-to-left (rtl) form. I attempted using the "first-child" property without success. Any suggestions? .progress-bar-vertical:first-child { ...

cssscss-lint

Unable to render Material Icons on Vue/Quasar web app hosted on Azure

I am facing an issue with my webapp built using Vue and Quasar. I added the necessary icon imports to my quasar-user-options.js file. import '@quasar/extras/material-icons/material-icons.css' import "@quasar/extras/material-icons-outlined/ma ...

cssvue.jsazure-web-app-servicequasar-frameworkmaterial-icons

Creating a connection between a secondary jQuery anything slider and a distinct CSS style on a webpage

Currently, I am attempting to incorporate two anything sliders within the same webpage. My goal is to apply unique styling to each slider. Despite my efforts, I am encountering difficulties in calling upon a second style sheet without it completely overr ...

jquerycssanythingslider

Organize divs sequentially according to their text content using JQuery

Having encountered limitations in the functionality of a particular Wordpress plugin I am utilizing, I find myself faced with the challenge of sorting a customized dropdown in a specific sequence. Is there a way to employ jQuery to target these divs and ar ...

javascriptjqueryhtmlwordpress

Using $.get inside of a .click event handler

I'm a bit confused about what's happening with this particular piece of code. I have a button element that in theory should trigger the script below when clicked. When I try it in Chrome, everything seems fine - the button works, but the file isn ...

javascriptjqueryhtmlajax

Discover the following input

Can someone assist me? I am looking for a way to automatically move the cursor to the next input field after filling out the first one. Here is the code snippet I have been working with: jQuery: $('input').keyup(function(){ if($(this).val().m ...

jqueryhtmlhtml-lists

Maintaining the active status of section 1 after the page is refreshed using Javascript and CSS

I have a total of 3 buttons and 3 hidden sections available, which can be seen in the image below: click here for image description Whenever one of the buttons is clicked, the respective section transitions from being hidden to becoming visible: click he ...

javascripthtmlcss

Filling a text field using data from two dropdown menus using Jquery

Currently, I have a single input field that is being populated using a drop-down menu. I am successful in achieving this with one drop-down, but I am facing difficulty doing the same with two separate drop-downs. Let me illustrate what I am trying to accom ...

javascriptjqueryhtmlforms

Adjusting the placement of elements according to the size of the screen?

I'm facing a very specific issue with my web page design and I need some ideas on how to solve it. The current structure of the page looks like this: <div class="row"> <div id="home-img" class="col-6"> ******An Image Goes He ...

htmlcssbootstrap-4flexbox

What could be causing the malfunction of the Carousel Slide feature in my code?

I have encountered an issue while trying to implement the Bootstrap code below. It seems to only display the first slide and does not progress to the next one. I am unsure of what might be causing this problem. Can anyone help me troubleshoot? <secti ...

htmlbootstrap-5

iPad screen not displaying overflow for x and y axis

I'm encountering an issue with displaying the scrollbar on a div while using an iPad device. Currently, I am utilizing: -webkit-overflow-scrolling: touch; Although this is functioning properly, my goal is to have the scrollbar visible without the ...

jqueryhtmlioscssoverflow

Is there a way to trigger an image flash by hovering over a button using the mouseover feature in AngularJS2?

When I hover over the 'click me' button, I want an image to appear on the webpage. When I stop hovering, the image should disappear using the mouseover option. This is what I attempted in my app.component.ts and my.component.ts files: Here is t ...

htmlcssangulartypescript