Inner div floating to next line
I was experimenting with div and trying to create a composite control using
- Label
- Text field
Html
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-control {
background-color: yellow;
margin: 0;
padding: 0;
}
.form-control[data-layoutOrder=horizontal] div[data-section=title] {
display: inline-block;
background-color: red;
width: 50%;
margin: 0;
padding: 0;
}
.form-control div[data-section=data] {
background-color: green;
display: inline-block;
width: 50%;
margin: 0;
padding: 0;
}
<div class="form-control" data-layoutOrder="horizontal">
<div data-section="title">
<label for="firstName">First Name</label>
</div>
<div data-section="data">
<input type="text" placeholder="First Name" id="firstName">
</div>
</div>
The output of the above code is expected to be labeled with a label and the input to be adjacent to each other, but this is not the case. The wrapping div textbox actually flows smoothly to the next line, although I have set the width of the div div and textbox to 50% with CSS.
I tried adjusting padding, margin, etc. to 0, but none of them worked. Which makes the div textbox float to the next line. When I changed one of the div width to 49%, both divs were aligned on the same line. I don’t understand why he behaves this way?
Note. I could get both of them next to each other using the float property - float:left
for the label div property and float:right
for the textbox div. But I want to know why setting 50% width didn't work without a float. Do I really need to use float or am I missing something.
EDIT 1: I found another solution using attribute white-space
like
.form-control {
background-color: yellow;
margin:0;
padding:0;
white-space:nowrap;
}
.form-control div[data-section=data] {
background-color : green;
display: inline-block;
width: 50%;
margin:0;
padding:0;
white-space:normal;
}
EDIT 2: Using the style flex
also has the desired effect. When looking for more, I also came across achieving the same effect using style flex
. Please note that it is not supported in IE 10 and below. See caniuse .
.form-control {
background-color: yellow;
margin: 0;
padding: 0;
display: flex;
display: -webkit-flex;
}
.form-control[data-layoutOrder=horizontal] div[data-section=title] {
display: inline-block;
background-color: red;
width: 50%;
margin: 0;
padding: 0;
flex:1;
}
.form-control div[data-section=data] {
background-color: green;
display: inline-block;
width: 50%;
margin: 0;
padding: 0;
flex:1;
}
source to share
This is a tricky thing. Inline-block elements will count the number of lines in your HTML as space, adding width to the total width of the elements. To fix this, add an empty HTML comment like this:
<div class="form-control" data-layoutOrder="horizontal">
<div data-section="title">
<label for="firstName">First Name</label>
</div><!--
--><div data-section="data">
<input type="text" placeholder="First Name" id="firstName">
</div>
</div>
Example: http://jsfiddle.net/humwrgnj/
source to share
Just write the tags on one line
<div class="form-control" data-layoutOrder="horizontal">
<div data-section="title">
<label for="firstName">First Name</label>
</div><div data-section="data">
<input type="text" placeholder="First Name" id="firstName">
</div>
</div>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-control {
background-color: yellow;
margin:0;
padding:0;
}
.form-control[data-layoutOrder=horizontal] div[data-section=title]{
display:inline-block;
background-color : red;
width: 50%;
margin:0;
padding:0;
}
.form-control div[data-section=data] {
background-color : green;
display: inline-block;
width: 50%;
margin:0;
padding:0;
<div class="form-control" data-layoutOrder="horizontal">
<div data-section="title">
<label for="firstName">First Name</label>
</div><div data-section="data">
<input type="text" placeholder="First Name" id="firstName">
</div>
</div>
source to share
This is a well known issue with inline-block elements. The trick here is to use font-size:0;
in your container element and then override that in your children withfont-size:initial;
Here's a quick demo:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-control {
background-color: yellow;
margin: 0;
padding: 0;
font-size:0;
}
.form-control[data-layoutOrder=horizontal] div[data-section=title] {
display: inline-block;
background-color: red;
width: 50%;
margin: 0;
padding: 0;
font-size:initial;
}
.form-control div[data-section=data] {
background-color: green;
display: inline-block;
width: 50%;
margin: 0;
padding: 0;
font-size:initial;
}
<div class="form-control" data-layoutOrder="horizontal">
<div data-section="title">
<label for="firstName">First Name</label>
</div>
<div data-section="data">
<input type="text" placeholder="First Name" id="firstName">
</div>
</div>
An alternative would be to use positioning if the element will always be 50% wide:
html,
body {
margin: 0;
padding: 0;
}
.parent {
position: relative;
min-height: 50px;
width: 100%;
background: rgba(0, 0, 0, 0.2);
}
.child {
position: absolute;
top: 0;
width: 50%;
height: 100%;
background: tomato;
}
.childone {
left: 0;
}
.childtwo {
lefT: 50%;
background: cornflowerblue;
<div class="parent">
<div class="child childone"></div>
<div class="child childtwo"></div>
</div>
source to share
Add CSS float: left; property of this class.form-control[data-layoutOrder=horizontal] div[data-section=title]
source to share