CODEWITHSUNDEEP
htmlcss
Rajorshi Roy
Rajorshi Roy

Reputation: 632

How to keep two input box side by side in html using CSS?

Hi I am new in Html & Css. I want to keep two input box side by side. Just like below picture

my expected html look

But unable to so, and don't have no idea how to achive this.

so far my code is

html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="myCss.css">
<head>
<body>

<div>
  <div id="leftDiv">
    <input type="text" name="firstName" value=""/>
  </div>
  <div id="rightDiv">
    <input type="text" name="lastName" value=""/>
  </div>
</div>

</body>
</html>

and css 

body {
  background-color:#CCFFCC;
}

#leftDiv{
  float:left;
  padding:38px;
  margin-left: 370px;
  padding-right: 0px;
  margin-right: 0px;
}

#rightDiv{
  float:right;
  padding:38px;
  margin-right: 482px;
  padding-left: 0px;
  margin-left: 0px;
}

Please help me. Also if someone can provide me some book or tutorial reference where I can get some practical examples that will be great. I tried to find books or tutorials with practical example which can be used in actual application but did not find any. Please suggest me. Thanks for your time.

Upvotes: 1

Views: 3715

Answers (2)

Ramtin Gh
Ramtin Gh

Reputation: 1050

First you need to get rid of those extra margins, then, we give a name to our parent div, set a with (big enough for both #leftDiv & #rightDiv), then only by floating them, you can get what you are looking for:

body {
  background-color:#CCFFCC;
}
#parentDiv{
width:263px;
  margin:auto;
}
#leftDiv{
  float:left;
}

#rightDiv{
  float:right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="myCss.css">
<head>
<body>

<div id="parentDiv">
  <div id="leftDiv">
    <input type="text" name="firstName" value=""/>
  </div>
  <div id="rightDiv">
    <input type="text" name="lastName" value=""/>
  </div>
</div>

</body>
</html>

Upvotes: 1

Jianov
Jianov

Reputation: 41

Use this css and you will accomplish what you need very easy without margins or floats

Check it here: http://jsfiddle.net/w95yseee/

body {
  background-color:#CCFFCC;
}
body > div{
    display:table;
    width:100%;
    text-align:center;
}

#leftDiv{
  padding:38px;
  padding-right: 0px;
    display:table-cell;
  margin-right: 0px;
}

#rightDiv{
  padding:38px;
  padding-left: 0px;
    display:table-cell;
  margin-left: 0px;
}

Upvotes: 0

Related Questions