CODEWITHSUNDEEP
htmlcss
J. Doe
J. Doe

Reputation: 431

CSS element appears below current line. How to fix?

I am making some HTML elements as follows:

.rc-CN-Item {
  height: 4em;
  background-color: rgb(240, 240, 240);
}

.rc-CN-ItemFlagVisible {
  width: 10%;
  height: 100%;
  background-color: rgb(0, 160, 240);
  display: inline-block;
}

.rc-CN-ItemTextbox {
  margin-left: 10%;
  /* same as Flag width*/
  width: 90%;
  /* 100 - Flag width*/
  display: inline-block;
  background-color: rgb(100, 160, 240);
  font-family: Arial;
  font-size: 1.25em;
  letter-spacing: .125em;
}
<!--  Block-->
<div class="rc-CN-Block">
  <!--  Item  -->
  <div class="rc-CN-Item">
    <!--  Flag  -->
    <div class="rc-CN-ItemFlagVisible">
    </div>
    <!--  Textbox  -->
    <div class="rc-CN-ItemTextbox">Home
    </div>
  </div>
</div>

It does not come out as intended, with the textbox getting pushed to the next line as can be seen here:

img

What went wrong and how can I fix it?

Upvotes: 3

Views: 301

Answers (4)

Banzay
Banzay

Reputation: 9470

Here is a bit ancient approach that works as well.

Use float: left; and box-sizing: border-box;

.rc-CN-Item {
  height: 4em;
  background-color: rgb(240, 240, 240);
}

.rc-CN-ItemFlagVisible {
  width: 10%;
  height: 100%;
  background-color: rgb(0, 160, 240);
  float: left;
}

.rc-CN-ItemTextbox {
  /* same as Flag width*/
  width: 90%;
  height: 100%;
  /* 100 - Flag width*/
  display: inline-block;
  background-color: rgb(100, 160, 240);
  font-family: Arial;
  box-sizing: border-box;
  font-size: 1.25em;
  letter-spacing: .125em;
  padding: 5px;
}
<!--  Block-->
<div class="rc-CN-Block">
  <!--  Item  -->
  <div class="rc-CN-Item">
    <!--  Flag  -->
    <div class="rc-CN-ItemFlagVisible">
    </div>
    <!--  Textbox  -->
    <div class="rc-CN-ItemTextbox">Home
    </div>
  </div>
</div>

Upvotes: 0

J. Doe
J. Doe

Reputation: 431

Using @Sameer Khan's solution (adding display: flex to parent item) only gets me this:

aa

Using @Sydney Y's solution only gets me this:

bb

Combined, I got what I want:

cc

Upvotes: 0

Sydney Y
Sydney Y

Reputation: 3152

This line is your issue:

margin-left: 10%;  /* same as Flag width

Your flag takes 10%, your text margin takes 10%, and your text takes 90%. 110% has to wrap!

Upvotes: 0

Sameer
Sameer

Reputation: 5188

Use display: flex to make inline all child elements

.rc-CN-Item
{
    height: 4em;
    background-color: rgb(240, 240, 240);
    display: flex;
}
.rc-CN-ItemFlagVisible
{
    width: 10%;
    height: 100%;
    background-color: rgb(0, 160, 240);
    display: inline-block;
}
.rc-CN-ItemTextbox
{    
    margin-left: 10%;  /* same as Flag width*/
    width: 90%;       /* 100 - Flag width*/
    display: inline-block;
    background-color: rgb(100, 160, 240);
    /*margin: 1.25em .625em 2.5em; top, right, bottom, left */
    font-family: Arial;
    font-size: 1.25em;
    letter-spacing: .125em;
}
<!--  Block-->
<div class="rc-CN-Block">
    <!--  Item  -->
    <div class="rc-CN-Item">
        <!--  Flag  -->
        <div class="rc-CN-ItemFlagVisible">
        </div>
        <!--  Textbox  -->
        <div class="rc-CN-ItemTextbox">Home
        </div>
    </div>
</div>

Upvotes: 2

Related Questions