Child Div in Parent Div, Float:Left

How to fix a parent div containing floating relative children?

For some reason adding .clearfix to #header_container (parent div) did the trick, everything else did not work for me:

Markup

<div id="header_container" class="clearfix" role="header">

Css

#header_container{
    min-width:240px;
    width:100%;
    height:auto;
}

.clearfix:after {
     display: block;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { 
    display: inline-block; 
    position:fixed; 
    min-width:240px;
    width:100%;}

.clearfix { display: block; }

#left_header{
float:left;
width:42%;
background:white;
padding:1%;
padding-left:7%;
position:relative;
}

#right_header{
float:right;
width:42%;
padding:1%;
padding-right:7%;
background:white;
text-align:right;
position:relative;
}

Child div in parent div, float:left

add overflow: hidden to parent

.parent {  background-color: gold;  border: 1px solid gold;  position: relative;  overflow: hidden}
.child {  float: left;  width: 100px;  height: 100px;  display: block;  margin: 10px;  background-color: pink;  border: 1px solid #999;}

<div class="parent">  <div class="child">div1</div>  <div class="child">div2</div>  <div class="child">div3</div>    </div>

Align divs to left and right edges of parent div using float

Well, well. No need to create an :after-property for containing the floats, just use overflow: hidden; on the container.

<head>    <style>        #container {            width: 500px;            margin: 0 auto;            border: 1px solid #000;overflow: hidden;        }
        #first {            float: left;        }
        #second {            float: right;        }    </style></head><body>    <div id="container">        <div id="first">            <p>first</p>        </div>        <div id="second">            <p>second</p>        </div>    </div></body>

How to use float and still have the child div inside the parent div?

you have to add sudo element just after your .centered div to clear the float after it.

.centered:after{
   content: "";
   display:table;
   clear:both;
}

Parent div doesn't recognise child's height if child element contains float:left

You need to clear the float element so that You can use :after & :before with clear:both

#header, #footer, #content-wapper, section {  max-width: 100%;  margin: 0 auto;  text-align: center;}#leftContent{  display: inline-block;  width: 49%;  height: auto;  float: left;}.center-content:before, .center-content:after {  content: "";  clear: both;  display: table;}
input{  width: 98%;  height: 40px;  border: solid 1px gray;  background-color: white;}
.center-content {  width: 960px;  max-width: 100%;  margin: 0 auto;  padding: 2vw 0 2vw 0;  background-color: #E8E8E8}

<section class="center-content">    <div id="leftContent">        <a><input name="income" type="text" id="income0" placeholder="Main Applicant Annual Income"></a><br>        <a><input name="income" type="text" id="income1" placeholder="Main Applicant Any-other Income"></a><br>        <a><input name="income" type="text" id="income2" placeholder="Second Applicant Annual Income"></a><br>        <a><input name="income" type="text" id="income3" placeholder="Second Applicant Any-other Income"></a><br><br>        <a><button class="btnCal" onclick="calculateMort()">Calculator</button></a>    </div></section>

making div float left and right in the parent div

Assuming you want that :

<div id="wrapper">
    <div id="wrapper-header" class="cf"> 
        <div id="wrapper-logo">
            Left
        </div>
        <div id="wrapper-navbar">
            Right
        </div>
    </div>
</div>

The css will be :

#wrapper-logo {
    float:left;
}

#wrapper-navbar {
    float:right;
}

And with a little clearfix, it'll do the trick. See here for a live example.

Second example with proper width.

Make Child Div Float Right of Parent

Since percentage-based margins are calculated against the containing block's width, you can set margin-left to 100%.

Example