Content within the two inline divs is experiencing alignment problems?

I am experiencing alignment issues with the content inside two divs that contain multiple nested divs. The content is not properly aligned.

CSS Code:

.breadcrumb-nav{
    margin-left: 230px;
    left: 70px;
    top: 70px;
    width: 1291px;
    height: 66px;
    opacity: 100%;
    background: #EFEFEF;
}

.grid{
     margin-left: 230px;
}

/*Left Section Styling */

.left-content{
    top :104px;
    left: 151px;
    opacity: 100%;
    height: 20px;
    width: 194px;
}

.shown-device{
    line-height: 20px;
    width :147px;
    font-size: 16px;
    color :#101010;
    margin-top: 15px;
    margin-left: 40px;
}


.filter-by{
    left: 80px;
    top: 177px;
    width: 194px;
    height: 28px;
    background: #D8D8D8;
    margin-top: 6px;
}

.filter-by-heading-left{
    left: 86px;
    top: 182px;
    height: 17px;
    padding:5px 134px 6px 6px;
    font-weight: bold;
    font-size: 13px;
    line-height: 17px;
}

.filter-by-heading-right{
    left: 225px;
    top: 182px;
    height: 17px;
    padding:5px 6px 8px 133px;
    font-size: 11px;
    line-height: 17px;
}

/*Right Section Styling*/

.right-content .filter{
    margin-left: 229px;
    margin-top: 18px;
}

.filter-heading{
    width: 39px;
    height: 16px;
    font-size: 13px;
    line-height: 16px;
    color: #666666;

}

HTML Code:

<div class= "notification-content">
    <div class = "breadcrumb-nav">
        <h1>Devices</h1>
    </div>
    <div class = "grid">
        <div class = "left-content">
            <p class ="shown-device"><strong>1487</strong> device shown</p>
            <div class = "filter-by">
                <p class ="filter-by-heading-left">Filter By:</p>
                <a class =" filter-by-heading-right">Clear All</a>
            </div>
        </div>
        <div class = "right-content">
          <div class = "filter">
                <p class ="filter-heading">Filters:</p>
          </div>
<!--
            <div class = "sorting ">
                <select class = "sorting-select-box">
                    <option>Test1</option>
                    <option>Test2</option>
                    <option>Test3</option>
                </select>
            </div>
-->

        </div>
    </div>
</div>

The screenshot attached shows that Clear All should be inline with Filter By and Filter should align with Device Shown.

htmlcss

Answer №1

Check out this link for more information. It seems like a two-column layout is all you need. You can easily find plenty of examples by doing a quick Google search.

Here are the changes that I made:

.left-content{
    top :104px;
    left: 151px;
    opacity: 100%;
    float: left;
    width: 60%;
    /*height: 20px;*/
    /*width: 294px;*/
}
.shown-device{
    line-height: 20px;
    width :147px;
    font-size: 16px;
    color :#101010;
    /*margin-top: 15px;*/
    margin-left: 120px;
}
.filter-by-heading-left{
    /*left: 86px;
    top: 182px;
    height: 17px;
    padding:5px 134px 6px 6px;
    font-weight: bold;
    font-size: 13px;
    line-height: 17px;*/
}
.right-content .filter{
    float: right;
    /*margin-left: 329px;*/
    width: 40%;
    margin-top: 6px;
}


flag

If you're looking for more solutions, you might want to check out this one.

Answer №2

Check out this JSFiddle link

I've modified the code as follows. I hope this helps:

.left-content{
  top :104px;
  left: 151px;
  opacity: 100%;
  height: 20px;
  width: 0;
  float: left;
}

.right-content{
  float: right;
}

.filter-by-heading-right{
  right: 0;
  top: -35px;
  height: 17px;
  padding: 0;
  position: relative;
  font-size: 11px;
  line-height: 17px;
  display: block;
  float: right;
}

Please let me know if this is the desired outcome.

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

MailChimp consistently applies the "color: inherit !important" style to links, causing them to appear blue when viewed in Outlook

No matter how hard I try, MailChimp insists on styling any <a> tag with an href attribute to have color: inherit !important; text-decoration: inherit !important. This is causing my links to appear blue and underlined in Outlook, which is quite frustr ...

htmlemailhtml-emailmailchimp

The HTML5 audio player is experiencing technical difficulties on Internet Explorer

I'm having an issue with html5 audio not working on Internet Explorer. <audio id="beep-voice" controls autoplay style="opacity:0"></audio> Could someone please provide a solution? Thanks! ...

htmlinternet-explorerhtml5-audio

What is the best way to utilize overflow with TailwindCSS?

1. The Home Component: import React from "react"; import Title from "./Title"; import TaskInput from "./TaskInput"; import TaskList from "./TaskList"; function Home() { return ( <div className="h-scree ...

cssreactjstailwind-css

What is the procedure for eliminating an event listener that does not directly invoke a function?

I have implemented an event listener in my JS file following a successful AJAX request: var pageButtonsParentElement = document.getElementById("page-buttons"); pageButtonsParentElement.addEventListener('click', event => { ...

javascripthtmljqueryajax

Strange behavior of dropdown submenu

I've encountered an issue where my child's ul li elements are not behaving as expected, despite following advice from other sources. After days of debugging with no success, I am unable to pinpoint the problem. The image showcases the issue perfe ...

htmlcss

Modifying the color of a specific div using jQuery

I am attempting to develop a function that changes the background color of a div when a user clicks on it and then clicks on a button. The value needs to be saved as a variable, but I'm having trouble getting it to work because it keeps saying that th ...

javascriptjqueryhtml

Tips for automatically closing one element when another is clicked

My goal is to create a menu that displays when I click on a link, and if another menu is already open, it should close before displaying the new one. Essentially, I want to achieve an accordion menu where only one menu is open at a time. However, despite m ...

javascriptjqueryhtml

Why must the sidebar be displayed horizontally on the smartphone screen?

I've been struggling to make the sidebar menu on my smartphone display horizontally with icons at the top and text at the bottom. I've tried using flex and other methods, but it still doesn't work sideways. Am I missing something? const s ...

javascripthtmlcssbootstrap-5

What is the best way to incorporate one Div within another Div using JavaScript?

I have a single main div with an id, and I am looking to insert 4 additional child divs inside it. Each of these child divs will then contain 5 more divs each. The code snippet that I currently have is as follows: $( document ).ready(function() { for( ...

javascriptjqueryhtmlfunction

Choosing and adding a div to another using the select method

Can someone assist me with this task? My goal is to dynamically append a div when selecting an option from a dropdown, and hide the div when the same option is selected again. Additionally, I want the name of the selected option to be displayed on the left ...

htmljquerycssdrop-down-menubootstrap-select

Disable page scrolling after making changes to the DOM

When my JavaScript function executes on page load and at set intervals, it cycles through images supplied by another PHP script. However, every time the function manipulates the DOM, the page scrolls back to the top of the containing div, which is quite fr ...

javascripthtmldomscroll

Guide to continuously play the animation, Version 2

I have been struggling with an animation that I need to loop indefinitely. The problem arises when trying to use animation-iteration-count: infinite. It seems like no matter where I place it in the code, whether within the keyframes or normal CSS rules, it ...

htmlcssloopsanimation

Auto language-switch on page load

Wondering if using jQuery is the best approach to create a single French page on my predominantly English website. I want it to work across multiple browsers on pageload, currently using HTML replace. jQuery(function($) { $("body").children().each(funct ...

javascriptjqueryhtmlcss

Unresolved styles in React component linked to styles.css file

As I dive into creating a registration page in ReactJS, I encounter a frustrating issue with my styles not applying correctly from the styles.css file. Let's take a look at my RegisterPage.jsx component: export default function RegisterPage() { ret ...

javascripthtmlcssreactjs

Difficulty with selecting the nth-child element within an Ember application

In my current project using Ember, I am faced with the challenge of targeting nth-child elements with CSS due to the presence of Ember script tags. Is there a consistent method to achieve this in an Ember application? Instead of the conventional approach: ...

cssember.jscss-selectors

Troubleshooting the issue with reactdom.render() functionality in CodeSandbox

Having issues with ReactDom in CodeSandbox for React. The HTML file includes: <body> <div id="root"></div> </body> <script src="scr/index.js"> The JavaScript file (named index) includes: ReactDOM.rende ...

javascripthtmlreactjs

How to use Jquery to fetch the value of a td element nested inside another

After consulting the manual, I am trying to find a way to extract the value in the second column of a table when a specific span is clicked. However, the challenge is that the click event is currently being triggered by the first span cell. Here is the jQu ...

javascriptjqueryhtmljquery-ui

How can I format the input type number with a thousand separator as 123.456.789?

When entering the number 123456, I want to see 123.456 displayed in the input field. I tried using my code, but it displays 123,456 instead. Is there a way to ensure that the thousand separator is a dot and not a comma? You can view my code at this link ...

javascripthtmlnumbers

JQuery: Techniques for accessing the assigned font of an element

Can the assigned font of an element be retrieved using jQuery? For example, if there is this CSS: #element { font-family: blahblah,Arial; } In the above case, the Arial font will be assigned to #element. Is it possible to extract that information using ...

javascriptjquerycssfonts

Using jQuery to reconstruct a list from a group of div elements

Seeking advice on how to convert an HTML section of divs into list items. Here is a sample of the current HTML structure: <div> <small>2019-10-31 10:41 Customer unregistered</small> </div> <div> <small>2019 ...

jqueryhtml