CODEWITHSUNDEEP
htmlcss
IbrahimMitko
IbrahimMitko

Reputation: 1207

Div not appearing in line with paragraph

I'm trying to get a div to appear in-line with a <p> but for some reason it keeps skipping whenever it's generated. I need "Normal" to appear on the same line as "condition is:" but it's showing up on the next line.

/* CSS used here will be applied after bootstrap.css */

emergency {
  color: #1D1060;
}

.alert-color {
  color: #0F75BC;
}

.normal {
  color: #6DC2E9;
}

.sys-cond-list ul li span {
  color: #4B5D6B;
}

.sys-cond-list {
  font-size: 12px;
}

#currState {
  color: #3379A3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-sm-10" style="float: left">
    <div class="system-cond" style="position: absolute">
      <p style="text-align: left;">
        Our current<br>condition is: 
         <strong><div id="currState">Normal</div></strong>
      </p>
    
      <p></p>
    </div>
  </div>
</div>
</div>

Upvotes: 0

Views: 68

Answers (2)

cosmoonot
cosmoonot

Reputation: 2189

You could do something like below. Your elements need a float:left;.

Though there are far better ways to handle this. You should really change your HTML to use span instead of div to achieve the final solution. 

/* CSS used here will be applied after bootstrap.css */emergency{
    color: #1D1060;
}
.alert-color{
    color: #0F75BC;
}
.normal{
    color:#6DC2E9;
}
.sys-cond-list ul li span{
    color: #4B5D6B;
}
.sys-cond-list{
    font-size: 12px;
}
#currState{
    color: #3379A3;
    float:left;
    margin:24px 0 0 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

 <div class="row">
                    <div class="col-sm-10" style="float: left">
                        <div class="system-cond" style="position: absolute">

                             <p style="text-align: left;float:left;">Our current<br>condition is: <strong>
                                 </strong></p><div id="currState"><strong>Normal</strong></div><p></p>

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

Upvotes: 1

StefanBob
StefanBob

Reputation: 5128

Your <p> and #currState are block level elements, meaning they will take up the full-width of screen and so naturally "Normal" will be on next line.

A hack fix would be to set both elements to display: inline-block; but I think your code could use a restructuring. You are using inline styles and <br> when not necessary and <strong> tags when you can just modify the font-weight in css, you have empty <p> tags, etc. 

p {
  display: inline-block;
}
#currState{
  display: inline-block;
}

Upvotes: 0

Related Questions