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>

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>

4 reasons your z-index isn't working (and how to fix it) — Coder Coder, Z-index is a CSS property that allows you to position elements in layers Your browser does not currently recognize any of the video formats available. font- family: 'Roboto', sans-serif; line-height: 1.3; } h1, h2 { margin-top: 0; } but how do we fix the CSS so the second cat is underneath the white block? Definition and Usage. The bottom property affects the vertical position of a positioned element. This property has no effect on non-positioned elements. If position: absolute; or position: fixed; - the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor.

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!

Detailed Positioning, Detailed CSS positioning lesson discussing clearning floats and all of the The most popular problem involves a parent element that contains numerous floated elements. Should the nested elements not line up correctly, styling errors may appear. Taking a look at the demo below, the .box-set division should have a light� The reason the div is covered is because fixed position elements are removed from the document flow and do not take up any space. So your div is beginning at the top as if your header isn't there. What you have to do is use padding or margin to take up the space that would have been occupied by your header if it was in the normal flow.

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

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

Combined, I got what I want:

position, In fact they behave almost the same, only fixed positioned elements are always See the child element in the demo below and how, once you scroll, As of this writing, it is currently an experimental value, meaning it is not part of the so it remains persistently displayed like an element with a fixed value. Step 2) Add CSS: To create a fixed top menu, use position:fixed and top:0. Note that the fixed menu will overlay your other content. To fix this, add a margin-top (to the content) that is equal or larger than the height of your menu.

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>

CSS Positioned Layout Module Level 3, Fixed positioning, which absolutely positions the box and affixes it to the even if the element's nearest scrollport is currently scrolled such that the sticky rectangle spanning between the line-over/line-under sides of the line box that However, for readability, these words do not appear in all uppercase� I definitely prefer a version without magic numbers. A while back I made a pattern for this effect that I’ve used a few times now. The things I was solving for were: no magic numbers, the original element should be able to remain in the document flow, the page content shouldn’t jump when that original element is made a fixed position element, and whatever changes prevent the jump should be

Why does my header overlap other elements when i mark its , Without the position:fixed my code works as expected (where the header stays I add the position: fixed property, the header overlaps the elements below it, even CSS Code : body{ background-color: gray; } div{ border-radius: 5px; margin: Is there a way so that divs below just appear on the next line and i don't have to� The clearfix Hack. If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. Then we can add overflow: auto; to the containing element to fix this problem:

Advanced layouts with absolute and fixed positioning � WebPlatform , Elements with fixed positioning differ from this slightly—they always have the Copy the code below into your text editor and save the document as absolute. html. Next, copy the following code into a new file and save it as absolute.css. What looks like a 2px-thick red line is actually a 1px border around an element with� Positioning elements with CSS in web development isn’t as easy as it seems. Things can get quickly complicated as your project gets bigger and without having a good understanding of how CSS deals with aligning HTML elements, you won't be able to fix your alignment issues. There are different ways/methods for positioning elements with pure CSS. Using CSS float, display and position properties

line-height, The line-height CSS property sets the height of a line box. help � Join the MDN community � Report a content problem � Report an issue -moz-block-height: Sets the line height to the content height of the current block. All rules below have the same resultant line height */ div { line-height: 1.2;� Here is the CSS that creates that style (#ff0000 is a hex code for red): div.wpforms-container-full .wpforms-form .wpforms-required-label { color: #ff0000; } We want to make these asterisks appear blue instead. We could copy that full selector from the CSS above, or we could use a short selector and add an !important, as in this CSS snippet:

Comments
  • Try adding float: left; to your divs
  • Thanks @Alex. Found my solution below.
  • both width + margin (90% + 10% + 10%) > 100%. You don't need the margin-left and you need to consider the whitespace between inline block
  • @TemaniAfif, this example tells me that the second element's left margin has to be the width of the first element. It worked for me for another thing, but not quite sure how it no longer this time.
  • in that example the first element is fixed so its removed from the normal flow
  • Thank you. This is good to know. I can now delete the inline specifications in child items.
  • I set it to 0% and it works, but now I have no margin. This is a bit strange because I have it working elsewhere based on this W3S guide. Basically, the margin of the second element is the width of the first element. What happened in this case?
  • The math adds up in this solution. One thing that may be different is inline-block. That means they influence the things around them. Theyre "part of the flow". But if originally the flag was absolute, it was "out of the flow".
  • I also have to add display: flex in parent item in addition to make it work. Any idea?
  • Nope, sorry, I don't know flex :/ Try asking Sameer Khan about that
  • But if you had to change the Item as well, it's possible that making it "width:100%;padding:0;margin:0" would also work instead of flex.