salini salini - 6 months ago 8
CSS Question

Css code why the div class going down?

I have posted the question..but nobody answered the question..My code is:



* {
margin: 0;
padding: 0;
}

body {
width: 100%;
font-family: 'Cabin', sans-serif;
background-color: #333;
}

.firstnav {
margin:auto;
height: 1500px;
display: block;
width: 70%;
-webkit-flex: 3 1 60%;
flex: 3 1 60%;
-webkit-order: 2;
order: 2;
}

#third {
background: #f00;
position:relative;
display:inline-block;
width: 30%;
margin-left:auto;
margin-right:auto;
height: 500px;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 3;
order: 3;
}

#second {
background: #fff;
position:relative;
display:inline-block;
margin-left:auto;
margin-right:auto;
width: 67%;
height: 1500px;

-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 3;
order: 3;
}

#registration-form {
font-family:'Open Sans Condensed', sans-serif;
width: 100%;
margin: 20px auto;
position: relative;
display:block;
position:absolute;
}

#registration-form .fieldset {
background-color:#d5d5d5;

border-radius: 3px;

}

#registration-form legend {
text-align: center;
background: #364351;
width: 100%;
padding: 30px 0;
border-radius: 3px 3px 0 0;
color: white;
font-size:2em;
}

.fieldset form{
border:1px solid #2f2f2f;
margin:0 auto;
display:block;
width:100%;
padding:30px 20px;
box-sizing:border-box;
border-radius:0 0 3px 3px;
}

<div class="firstnav">

<div id="second"><p>second<p></div>
<div id="third">

<div id="registration-form">
<div class='fieldset'>
<legend>Todays news
</legend>
<form action="#" method="post" data-validate="parsley">

</form>
</div>
</div>

</div>





here,you can see the second content is going down..why it is happening??I want the two container side by side..I have changed the "#second" code but still it is not coming to the side..

Answer

It looks like one line is missing. The elements are not being floated. Try adding float: left; to #second.

Play with it on JSFiddle. I've already made the change for you. Is that what you're looking for? https://jsfiddle.net/jr0gpaqg/