Reputation: 431
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:
What went wrong and how can I fix it?
Upvotes: 3
Views: 301
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
Reputation: 431
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:
Upvotes: 0
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
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