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

Troubles with Bootstrap's navbar dropdown menu functionality

I seem to be encountering a problem with the dropdown list in my navigation bar. It was functioning correctly yesterday, but something seems to have gone awry as Bootstrap is no longer working for the dropdowns only. I'm puzzled as to why this sudden ...

htmlcss

When the specified width is reached, jQuery will reveal hidden circular text upon page load instead of keeping it hidden

My current issue involves utilizing jQuery to hide circular text when the window width is below 760px. Although the functionality works as intended, there is a minor problem when the page loads under 760px width - the text briefly shows up before hiding ag ...

javascripthtmljquerycss

What could be causing the need to restart the server every time a style change is made?

I'm currently developing a NextJS application that utilizes PurgeCSS. It's quite frustrating because every time I tweak the classname of a component, I have to restart the server. Here is a snippet from my postcss.config.js: plugins: [ [ ...

cssreactjssassnext.jscss-purge

This particular JavaScript function is only designed to operate on the initial input box in the provided

I have a question regarding echoing rows of $data inside input boxes. I am using a JavaScript function that is supposed to copy the input value to the clipboard when the input box is clicked. However, I am encountering an issue - the function only works ...

javascripthtmldom

Steps for showcasing the data entered in the input box

I am looking to enhance my skills in working with Angular and JavaScript. I would greatly appreciate any feedback on the issue I am facing here. My goal is for the text box input to display: "hello {name} , would you like to play a game? However, curr ...

javascripthtmlangularjs

The dropdown menu in codeigniter is not displaying the selected option

When using a drop-down button to select an option from the available choices, I encountered a problem where the selected option was not displayed in the box. Additionally, it only allowed me to make one selection. The data for the drop-down menu is retriev ...

htmlcodeigniter

Using z-index to overlay a background image with transparency

I'm attempting to make a partially transparent div with text on top. My approach involves creating a parent tag with relative positioning. I have one child span with transparency set using the class .body-content-background and another child containi ...

htmlz-index

The collapsible menu located beneath my navigation bar is unable to reach the correct position on the right side

I'm attempting to create a collapsible navigation bar with its contents shifting to the right side when resized to medium size, but I'm having trouble. Can someone please assist me with this? I have also included the code below. <nav class=&qu ...

htmlcssbootstrap-5

Use Jquery to revert the chosen element back to its original base state

I have implemented a select box where selecting a value in the main select box "Domains" will reveal another select box called "Types" such as Diatoms or Flagellates. I have successfully achieved this functionality, but now I am facing an issue with resett ...

javascriptjqueryhtmlcss

Need inspiration for testing web content with Protractor?

Exploring new possibilities for testing web content with Protractor. Any fresh ideas on what else can be tested? So far, I've checked links to ensure they redirect correctly. I've also verified text color and decoration changes when hovering ove ...

htmlcsstestingprotractorend-to-end

Discrepancy in CSS rendering in Chrome and Firefox

When viewing in Chrome, the stats display properly within the gray box at the bottom left corner. However, when using Firefox, the stats appear positioned much lower below the box, with the bottom half of them hidden from view. Here is my CSS code being ...

cssgoogle-chromefirefox

Ways to retrieve the parent DIV's width and adjust the child DIV's width to match

Attached is my question with the HTML and a screenshot. Within a DIV container (DIV with ID=ctl00_m_g_a788a965_7ee3_414f_bff9_2a561f8ca37d_ctl00_pnlParentContainer), there are two inner DIVs - one for the left column TITLE (DIV ID=dvTitles) and the other f ...

jqueryhtmlcss

What is the best way to insert fresh input values into a different element?

click here to view image description I am working with an input element where I take input values and store them in an element. However, I would like to know how to input new values into the next element. Any assistance would be greatly appreciated. Thank ...

javascripthtmlvisual-web-developer

Show alerts that automatically disappear after a set amount of time

I have successfully implemented code that displays alerts for a specific period of time, indicated by (alert alert-warning). Additionally, I want to display another type of alert, (alert alert-success), for a certain amount of time, after which the page sh ...

javascriptphpjqueryhtmlajax

Django was unable to load the static image

Currently, my Django application is hosted on PythonAnywhere. In order to generate a PDF, I am utilizing WeasyPrint which includes an image that should be displayed in the PDF. However, within the error log, I am encountering the message "Failed to load im ...

htmldjangodjango-staticfilespythonanywhere

Adjust the color of the entire modal

I'm working with a react native modal and encountering an issue where the backgroundColor I apply is only showing at the top of the modal. How can I ensure that the color fills the entire modal view? Any suggestions on how to fix this problem and mak ...

javascriptcsstypescriptreact-nativereact-native-modal

Various image dimensions cause divs to shift unevenly

Here is the current setup: <div class="row"> <div class="col-md-4 content-column"> <img class="btn-center btn-desktop" src="images/buttons/btn-desktop.svg" alt="desktop button"> <h2 class="btn-deskt ...

htmlcss

I'm having trouble making the colors change on my Icon font/sprite rollover

I am currently attempting to position some related icons above my main navigation menu. The goal is to change the text and icon colors when a user hovers over a specific area (the tag with large padding). Unfortunately, I am facing challenges in achieving ...

htmlcsscss-sprites

Is there a way to customize the default settings for a blueprint’s menu item?

In my react project, I implemented the Menu using MenuItem from '@blueprintjs/core'. The issue I encountered is that when hovering over a Menu item with children, they open from the right side. Is there a way to modify this behavior and have the ...

htmlcssreactjsstyled-componentsblueprint

Define the number of columns in CSS Grid and ensure that rows wrap accordingly

tag, I need to utilize CSS grid with 12 columns while ensuring that the tables stack in a column layout when the viewport size decreases. Is it possible to accomplish this using CSS grid? My research suggests that for row wrapping, I must use either ' ...

csscss-grid