CODEWITHSUNDEEP
htmlcss
Samurai Jack
Samurai Jack

Reputation: 3125

Put two divs one near the other

I have the following html code:

<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 the css/less:

.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 tried to do like this in order to show the page-icon and page-title one near the other but how it is done now they are one over the other (the icon is on top of the title)

How can I solve this? Thanks

Upvotes: 0

Views: 64

Answers (4)

Thorgeir
Thorgeir

Reputation: 4433

All the cool kids are using flex box.

display:flex; flex-direction:row; makes the child items stack in a row. (flex-direction:row is default so you can skip that)

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

then you can (if you want) center the text with

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

Fiddle

Upvotes: 1

sol
sol

Reputation: 22919

When you say "near each other" I am assuming you mean "beside each other".

You can add flexbox properties to #crumby-title. Then remove position and float properties from .page-icon and page-title. You can also remove height 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>

Upvotes: 1

Er.Er
Er.Er

Reputation: 145

I want to show u another version of ankita pantel's put them in a table and add padding-top to 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>

Upvotes: 1

ankita patel
ankita patel

Reputation: 4251

Give float:left to .page-icon instead of position:absolute and add <div class="clear"></div> after 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>

Upvotes: 1

Related Questions