Position two div elements side by side

Here is the HTML code snippet that I am working with:

<div class="demand page">
    <div id="crumby-title">
            <div class="page-icon">
                <i class="fa fa-line-chart"></i>
            </div>
            <div class="page-title">
                Demand 
            </div>
    </div>   
    <div id="chart" class="demand-chart">
    </div>
</div>

and this is my CSS/Less code:

.rtm {
    .app__header {
        background-color: #ffffff;
        box-shadow: 1px 2px 2px rgba(1, 1, 1, 0.15);
    }
    .app__inner-content {
        background-color: #ffffff;
    }

    .demand-chart{
        padding-top: 50px;
    }
    #crumby-title {
        display: block;
        border-bottom: 1px solid #eee;
    }
    .page-icon {
        font-size: 20px;
        position: absolute;
        padding: 14px 18px;
        background: #e7e7e7;
    }
    .page-title {
        float: left;
        font-size: 20px;
        font-weight: 5px 10px 10px 75px;
        height: 55px;
    }
}

I intended to display the page-icon and page-title side by side, but currently, they are stacked on top of each other (the icon above the title). How can I adjust my code to achieve the desired layout? Thank you.

htmlcss

Answer №1

When you mention "near each other" I am assuming you are referring to being "beside each other".

To achieve this layout, you can incorporate flexbox properties into #crumby-title. Next, remove the position and float properties from both .page-icon and page-title. Additionally, you should eliminate the height property from .page-title.

.app__header {
  background-color: #ffffff;
  box-shadow: 1px 2px 2px rgba(1, 1, 1, 0.15);
}

.app__inner-content {
  background-color: #ffffff;
}

.demand-chart {
  padding-top: 50px;
}

#crumby-title {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
}

.page-icon {
  font-size: 20px;
  padding: 14px 18px;
  background: #e7e7e7;
}

.page-title {
  font-size: 20px;
  font-weight: 5px 10px 10px 75px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="demand page">
  <div id="crumby-title">
    <div class="page-icon">
      <i class="fa fa-line-chart"></i>
    </div>
    <div class="page-title">
      Demand
    </div>
  </div>
  <div id="chart" class="demand-chart">
  </div>
</div>

Answer №2

Modify the CSS for .page-icon by setting float:left instead of position:absolute. Insert a 

<div class="clear"></div>
after the page-title.

.app__header {
  background-color: #ffffff;
  box-shadow: 1px 2px 2px rgba(1, 1, 1, 0.15);
}
.app__inner-content {
  background-color: #ffffff;
}
.demand-chart{
  padding-top: 50px;
}
#crumby-title {
  display: block;
  border-bottom: 1px solid #eee;    
}
.page-icon {
  font-size: 20px;
  float: left;
  padding: 14px 18px;
  background: #e7e7e7;
}
.page-title {
  float: left;
  font-size: 20px;
  font-weight: 5px 10px 10px 75px;
  height: 55px;
}
.clear{
  clear:both;
}
<div class="demand page">
  <div id="crumby-title">
    <div class="page-icon">
        <i class="fa fa-line-chart"></i>
    </div>
    <div class="page-title">
        Demand 
    </div>
    <div class="clear"></div>
  </div>   
  <div id="chart" class="demand-chart">
  </div>
</div>

Answer №3

Let me present to you an alternative rendition of Ankita Pantel's work by organizing them in a table and including padding-top for Demand

    .app__header {
    background-color: #ffffff;
    box-shadow: 1px 2px 2px rgba(1, 1, 1, 0.15);
}
.app__inner-content {
    background-color: #ffffff;
}

.demand-chart{
    padding-top: 50px;
}
#crumby-title {
    display: block;
    border-bottom: 1px solid #eee;
}
.page-icon {
    font-size: 20px;
    padding: 14px 18px;
    background: #e7e7e7;
}
.page-title {
    padding-top: 30px;
    float: left;
    font-size: 20px;
    font-weight: 5px 10px 10px 75px;
    height: 55px;
}
    <div class="demand page">
    <div id="crumby-title">
        <table>
            <tr>
            <td>
            <div class="page-icon">
                <i class="fa fa-line-chart"></i>
            </div>
            </td>
            <td>
            <div class="page-title">
                Demand 
            </div>
            </td>
            </tr>
        </table>
    </div>   
    <div id="chart" class="demand-chart">
    </div>
</div>

Answer №4

Flex box is the trend among all the hip and stylish individuals.

To make child items stack in a row, use display:flex; flex-direction:row; (flex-direction:row is default so you can skip that)

#crumby-title {
    ...
    display: flex;
    flex-direction:row;
}

If desired, you can center the text with

.page-title {
    ....
    display: flex;
    align-items: center;
}

Fiddle

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

Modifying SVG gradients with JavaScript

My goal is to modify the stop color of a gradient displayed in an SVG element. I've been trying to adjust the stop-color attribute, but so far, my attempts have not been successful: <svg><defs> <linearGradient gradientTransform="rotat ...

javascripthtmlsvggradient

Personalized modify and remove elements on a row of the DataGrid material-ui version 5 component when hovered over

In my React Js app, I am utilizing Material UI components or MUI v5 as the UI library for my project. Within the DataGrid/DataGridPro component, I am implementing a custom edit and delete row feature. The requirement is to display edit and delete icons w ...

javascriptcssreactjsmaterial-ui

HTML set hover & active states to remain active indefinitely

NOTE: My project utilizes Angular, so Angular may offer a solution to this issue as well I am in the process of creating a page where I can preview and test out various styles that I have designed. In order to achieve this, I need to somehow activate both ...

htmlcssangular

Node.js and Express.js fails to transmit files to clients

Attempting to send a gif to the client for future use in CSS, but encountering a 404 error in the console log. The gif is located within the public directory. Server: var app = require('express')(); var http = require('http').Server(a ...

javascriptcssnode.jsexpress

Aligning the navigation links vertically

I am working on aligning my navigation bar vertically, even when I scroll the page. I found a method in another thread which suggests using the following CSS code for vertical alignment: #container { position: absolute; top: 50%; height: 400p ...

htmlcssalignment

Obtain the option tag's name

One of my challenges is working with a dynamically created dropdown in HTML and having a dictionary in the back-end to retrieve keys. As users keep adding options to the dropdown, I face the issue of not having a value attribute like this: <option valu ...

javascripthtml

What are some effective strategies for preventing CSS duplication?

What is the best way to prevent repeating CSS code like this: div#logo div:nth-child(1) div { width: 30%; height: 30%; background-color: white; } div#logo div:nth-child(3) div { width: 30%; height: 30%; background-color: white; ...

htmlcss

Challenges arise when utilizing CSS3 animations in conjunction with transitions triggered by toggling a JavaScript class

Struggling to activate an animation while updating a class using JavaScript for a PhoneGap app. Planning on utilizing -webkit- prefixes for compatibility. However, the animations are currently unresponsive in Chrome during testing, both when applied to th ...

javascripthtmlcsscordova

Issue when attempting to animate an SVG point using translateX transformation

I am attempting to create a basic animation using the translate X property on a section of my svg when hovering over the element. Here is the code I have so far: <html> <style> .big-dot:hover { transform: translateX(20px); animat ...

javascriptcsssvgnext.js

"Resolving the duplication issue of a textbox in Phonegap app

I encountered a strange issue recently. While trying to focus on the textbox in my PhoneGap application using touch, I noticed that there are actually 2 textboxes appearing. Please refer to the attached image: ...

androidhtmlcsscordova

The dark mode class in Next.js/React does not take effect until a local change is made

I've been diving into a helpful tutorial on implementing dark mode toggle in my project. The tutorial uses react-toggle and can be found here. Everything seems to be working fine except for one issue that arises on the initial page load. When the bro ...

htmlcssreactjsnext.js

What is the best way to contain my content within a bordered box?

As a beginner in HTML and CSS, I have successfully created a basic website with a simple menu at the top that includes links to different pages like "Home," "About," and "Contact." The website will mainly feature information and images, but I believe it wo ...

htmlcss

Angular 2 Login Component Featuring Customizable Templates

Currently, I have set up an AppModule with a variety of components, including the AppComponent which serves as the template component with the router-outlet directive. I am looking to create an AuthModule that includes its own template AuthComponent situa ...

htmlangulartypescriptangular2-routingangular2-template

Error alert: $.simpleWeather function not found

Currently, I am attempting to incorporate simpleWeather.js from the website simpleweatherjs.com into my own website. However, upon inserting the html code onto my website, an error message pops up: Uncaught TypeError: $.simpleWeather is not a function ...

javascriptjqueryhtmlfunctionreference

Troubleshooting Dynamic Input Issue - Incorrect Appending Behaviour - Image Attached

I am working on a project that involves adding input fields dynamically using JavaScript. However, I've encountered an issue where the styling of the first input field is not applied correctly when it is clicked for the first time. You can see the dif ...

javascriptphpjqueryhtmldynamic

Ways to style a div element in CSS to achieve a unique shape

Hello there! I'm looking to achieve a tilted background div effect. Anyone have any tips or ideas on how I can do this? I'm new to web development and would appreciate the guidance. https://i.stack.imgur.com/wyj1X.png ...

javascripthtmlcssreactjs

Change the code from a for-loop to use the Array#map method

I have been working on a simple JavaScript function and attempting to convert the code from using a for-loop to Array#map. I'm sharing my code in the following fiddle as I am currently learning about array map: http://jsfiddle.net/newtdms2/. function ...

javascriptjqueryhtmlangularjsbackbone.js

Adjust the regular expression to accommodate uppercase letters and incorporate numerical values

I've been using this regex expression for an input pattern in HTML that covers a range of URLs and IP addresses: ^(https?://)?[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}/?$|^(https?://)?([a-z][a-z]+\.)+[a-z][a-z]+/? This regex ...

htmlregex

SVG set to fill currentColor but does not dynamically change in high contrast mode

I'm currently working with in-line SVGs on my website. Here's an example: svg { fill: currentColor; } <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" height="25px" viewBox="-13 0 120 30" width="74px"> < ...

htmlcsssvghigh-contrast

Tips for successfully sending hidden values along with an ajax file upload form

Currently, I am working on sending some values of hidden input using an ajax form. Despite trying several methods, it seems like the values are not being successfully transmitted. HTML <form id="upload_form" enctype="multipart/form-data" method="post" ...

htmlajaxuploader