How to divide html page

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

I want to make a html page with three sections and inside each section divide it to left and right. In each section I have three boxes and I want to put two boxes on the left and one box on the right following is the css and html code:

.leftbox {

		width: 50%;

		padding: 5px;

		float: left;

		

	}



	.rightbox {

		width: 50%;

		padding: 5px;

		float: right;

		

	}

<div id="rotationFormPopup" class="rotationFormPopup" style="width: 900px; display: none; background: #FFF; border: 1px solid; padding: 10px; margin-top: 100px;">

	<h2 class="popup-header">Rotation Forms</h2>



	<div class="newRotation-sections">





		<h3>Details</h3>

		<div class="newRotation-section-1" style="margin-top: 10px;">



			<div class="leftbox">

				<span>Mob</span> <br />

				<input type="text" class="newRotation-mob" style="width: 100%;"><br /><br />



				<span>Paddock</span> <br />

				<input type="text" class="newRotation-paddock" style="width: 100%;"><br /><br />

			</div>

			<div class="rightbox">



				<span>Date</span> <br />

				<input type="text" class="newRotation-date" style="position: relative; display: inline-block; float: left; width: 100%; margin-top: 10px;"><br /><br />

			</div>



		</div>

		

		<h3>Fencing options</h3>

		

		<div class="newRotation-section-2" style="margin-top: 10px;">

			<div class="leftbox">



				<span>Available Today</span> <br />

				<input type="text" class="newRotation-available" style="width: 100%;"><br /><br />



				<span>Paddock Allocation %</span> <br />

				<input type="number" class="newRotation-alloc" value="50" style="width: 100%;"><br /><br />



			</div>

			<div class="rightbox">

				<span>Required Result</span> <br />

				<input type="text" class="newRotation-result" style="width: 100%;"><br /><br />

			</div>



		</div>

		<h3>Assign As Task</h3>

		  </div>

 </div>

</div>

I receive the below result, I don't know why the fencing options jump to the right side.

Here is the image of my work:
enter image description here

edited Nov 29 '18 at 5:42

Kiran Shahi

5,11441846

asked Nov 29 '18 at 1:10

Naz Davoudi

“I don't know why the fencing options jump to the right side.” - because there’s space for it there, and you did not clear the previous floats.

– misorude
Nov 29 '18 at 7:55

add a comment |

.leftbox {

		width: 50%;

		padding: 5px;

		float: left;

		

	}



	.rightbox {

		width: 50%;

		padding: 5px;

		float: right;

		

	}

<div id="rotationFormPopup" class="rotationFormPopup" style="width: 900px; display: none; background: #FFF; border: 1px solid; padding: 10px; margin-top: 100px;">

	<h2 class="popup-header">Rotation Forms</h2>



	<div class="newRotation-sections">





		<h3>Details</h3>

		<div class="newRotation-section-1" style="margin-top: 10px;">



			<div class="leftbox">

				<span>Mob</span> <br />

				<input type="text" class="newRotation-mob" style="width: 100%;"><br /><br />



				<span>Paddock</span> <br />

				<input type="text" class="newRotation-paddock" style="width: 100%;"><br /><br />

			</div>

			<div class="rightbox">



				<span>Date</span> <br />

				<input type="text" class="newRotation-date" style="position: relative; display: inline-block; float: left; width: 100%; margin-top: 10px;"><br /><br />

			</div>



		</div>

		

		<h3>Fencing options</h3>

		

		<div class="newRotation-section-2" style="margin-top: 10px;">

			<div class="leftbox">



				<span>Available Today</span> <br />

				<input type="text" class="newRotation-available" style="width: 100%;"><br /><br />



				<span>Paddock Allocation %</span> <br />

				<input type="number" class="newRotation-alloc" value="50" style="width: 100%;"><br /><br />



			</div>

			<div class="rightbox">

				<span>Required Result</span> <br />

				<input type="text" class="newRotation-result" style="width: 100%;"><br /><br />

			</div>



		</div>

		<h3>Assign As Task</h3>

		  </div>

 </div>

</div>

I receive the below result, I don't know why the fencing options jump to the right side.

Here is the image of my work:
enter image description here

edited Nov 29 '18 at 5:42

Kiran Shahi

5,11441846

asked Nov 29 '18 at 1:10

Naz Davoudi

“I don't know why the fencing options jump to the right side.” - because there’s space for it there, and you did not clear the previous floats.

– misorude
Nov 29 '18 at 7:55

add a comment |

.leftbox {

		width: 50%;

		padding: 5px;

		float: left;

		

	}



	.rightbox {

		width: 50%;

		padding: 5px;

		float: right;

		

	}

<div id="rotationFormPopup" class="rotationFormPopup" style="width: 900px; display: none; background: #FFF; border: 1px solid; padding: 10px; margin-top: 100px;">

	<h2 class="popup-header">Rotation Forms</h2>



	<div class="newRotation-sections">





		<h3>Details</h3>

		<div class="newRotation-section-1" style="margin-top: 10px;">



			<div class="leftbox">

				<span>Mob</span> <br />

				<input type="text" class="newRotation-mob" style="width: 100%;"><br /><br />



				<span>Paddock</span> <br />

				<input type="text" class="newRotation-paddock" style="width: 100%;"><br /><br />

			</div>

			<div class="rightbox">



				<span>Date</span> <br />

				<input type="text" class="newRotation-date" style="position: relative; display: inline-block; float: left; width: 100%; margin-top: 10px;"><br /><br />

			</div>



		</div>

		

		<h3>Fencing options</h3>

		

		<div class="newRotation-section-2" style="margin-top: 10px;">

			<div class="leftbox">



				<span>Available Today</span> <br />

				<input type="text" class="newRotation-available" style="width: 100%;"><br /><br />



				<span>Paddock Allocation %</span> <br />

				<input type="number" class="newRotation-alloc" value="50" style="width: 100%;"><br /><br />



			</div>

			<div class="rightbox">

				<span>Required Result</span> <br />

				<input type="text" class="newRotation-result" style="width: 100%;"><br /><br />

			</div>



		</div>

		<h3>Assign As Task</h3>

		  </div>

 </div>

</div>

I receive the below result, I don't know why the fencing options jump to the right side.

Here is the image of my work:
enter image description here

edited Nov 29 '18 at 5:42

Kiran Shahi

5,11441846

asked Nov 29 '18 at 1:10

Naz Davoudi

.leftbox {

		width: 50%;

		padding: 5px;

		float: left;

		

	}



	.rightbox {

		width: 50%;

		padding: 5px;

		float: right;

		

	}

<div id="rotationFormPopup" class="rotationFormPopup" style="width: 900px; display: none; background: #FFF; border: 1px solid; padding: 10px; margin-top: 100px;">

	<h2 class="popup-header">Rotation Forms</h2>



	<div class="newRotation-sections">





		<h3>Details</h3>

		<div class="newRotation-section-1" style="margin-top: 10px;">



			<div class="leftbox">

				<span>Mob</span> <br />

				<input type="text" class="newRotation-mob" style="width: 100%;"><br /><br />



				<span>Paddock</span> <br />

				<input type="text" class="newRotation-paddock" style="width: 100%;"><br /><br />

			</div>

			<div class="rightbox">



				<span>Date</span> <br />

				<input type="text" class="newRotation-date" style="position: relative; display: inline-block; float: left; width: 100%; margin-top: 10px;"><br /><br />

			</div>



		</div>

		

		<h3>Fencing options</h3>

		

		<div class="newRotation-section-2" style="margin-top: 10px;">

			<div class="leftbox">



				<span>Available Today</span> <br />

				<input type="text" class="newRotation-available" style="width: 100%;"><br /><br />



				<span>Paddock Allocation %</span> <br />

				<input type="number" class="newRotation-alloc" value="50" style="width: 100%;"><br /><br />



			</div>

			<div class="rightbox">

				<span>Required Result</span> <br />

				<input type="text" class="newRotation-result" style="width: 100%;"><br /><br />

			</div>



		</div>

		<h3>Assign As Task</h3>

		  </div>

 </div>

</div>

I receive the below result, I don't know why the fencing options jump to the right side.

Here is the image of my work:
enter image description here

.leftbox {

		width: 50%;

		padding: 5px;

		float: left;

		

	}



	.rightbox {

		width: 50%;

		padding: 5px;

		float: right;

		

	}

<div id="rotationFormPopup" class="rotationFormPopup" style="width: 900px; display: none; background: #FFF; border: 1px solid; padding: 10px; margin-top: 100px;">

	<h2 class="popup-header">Rotation Forms</h2>



	<div class="newRotation-sections">





		<h3>Details</h3>

		<div class="newRotation-section-1" style="margin-top: 10px;">



			<div class="leftbox">

				<span>Mob</span> <br />

				<input type="text" class="newRotation-mob" style="width: 100%;"><br /><br />



				<span>Paddock</span> <br />

				<input type="text" class="newRotation-paddock" style="width: 100%;"><br /><br />

			</div>

			<div class="rightbox">



				<span>Date</span> <br />

				<input type="text" class="newRotation-date" style="position: relative; display: inline-block; float: left; width: 100%; margin-top: 10px;"><br /><br />

			</div>



		</div>

		

		<h3>Fencing options</h3>

		

		<div class="newRotation-section-2" style="margin-top: 10px;">

			<div class="leftbox">



				<span>Available Today</span> <br />

				<input type="text" class="newRotation-available" style="width: 100%;"><br /><br />



				<span>Paddock Allocation %</span> <br />

				<input type="number" class="newRotation-alloc" value="50" style="width: 100%;"><br /><br />



			</div>

			<div class="rightbox">

				<span>Required Result</span> <br />

				<input type="text" class="newRotation-result" style="width: 100%;"><br /><br />

			</div>



		</div>

		<h3>Assign As Task</h3>

		  </div>

 </div>

</div>

.leftbox {

		width: 50%;

		padding: 5px;

		float: left;

		

	}



	.rightbox {

		width: 50%;

		padding: 5px;

		float: right;

		

	}

<div id="rotationFormPopup" class="rotationFormPopup" style="width: 900px; display: none; background: #FFF; border: 1px solid; padding: 10px; margin-top: 100px;">

	<h2 class="popup-header">Rotation Forms</h2>



	<div class="newRotation-sections">





		<h3>Details</h3>

		<div class="newRotation-section-1" style="margin-top: 10px;">



			<div class="leftbox">

				<span>Mob</span> <br />

				<input type="text" class="newRotation-mob" style="width: 100%;"><br /><br />



				<span>Paddock</span> <br />

				<input type="text" class="newRotation-paddock" style="width: 100%;"><br /><br />

			</div>

			<div class="rightbox">



				<span>Date</span> <br />

				<input type="text" class="newRotation-date" style="position: relative; display: inline-block; float: left; width: 100%; margin-top: 10px;"><br /><br />

			</div>



		</div>

		

		<h3>Fencing options</h3>

		

		<div class="newRotation-section-2" style="margin-top: 10px;">

			<div class="leftbox">



				<span>Available Today</span> <br />

				<input type="text" class="newRotation-available" style="width: 100%;"><br /><br />



				<span>Paddock Allocation %</span> <br />

				<input type="number" class="newRotation-alloc" value="50" style="width: 100%;"><br /><br />



			</div>

			<div class="rightbox">

				<span>Required Result</span> <br />

				<input type="text" class="newRotation-result" style="width: 100%;"><br /><br />

			</div>



		</div>

		<h3>Assign As Task</h3>

		  </div>

 </div>

</div>

html css

edited Nov 29 '18 at 5:42

Kiran Shahi

5,11441846

asked Nov 29 '18 at 1:10

Naz Davoudi

edited Nov 29 '18 at 5:42

Kiran Shahi

5,11441846

asked Nov 29 '18 at 1:10

Naz Davoudi

edited Nov 29 '18 at 5:42

Kiran Shahi

5,11441846

edited Nov 29 '18 at 5:42

Kiran Shahi

5,11441846

edited Nov 29 '18 at 5:42

Kiran Shahi

5,11441846

asked Nov 29 '18 at 1:10

Naz Davoudi

asked Nov 29 '18 at 1:10

Naz Davoudi

asked Nov 29 '18 at 1:10

Naz Davoudi

“I don't know why the fencing options jump to the right side.” - because there’s space for it there, and you did not clear the previous floats.

– misorude
Nov 29 '18 at 7:55

add a comment |

“I don't know why the fencing options jump to the right side.” - because there’s space for it there, and you did not clear the previous floats.

– misorude
Nov 29 '18 at 7:55

“I don't know why the fencing options jump to the right side.” - because there’s space for it there, and you did not clear the previous floats.

– misorude
Nov 29 '18 at 7:55

add a comment |

1 Answer
1

active

oldest

votes

I wrote up this using the Bootstrap Framework. It matches your image exactly.

There's a Codepen if you want to fork and play around with it. It's responsive, too.

/* Roboto Font */

@import url('https://fonts.googleapis.com/css?family=Roboto');



html, body {

  height: 100%;

}



body {

  font-family: 'Roboto', sans-serif;

}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" type="text/css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>





<div class="container p-5">

  <div class="row">

    <div class="col-sm-12">

      <h5 class="title text-uppercase bg-success text-white p-1">Rotation Forms</h5>

      <h4 class="mb-3 mt-3">Details</h4>

    </div>

    <div class="col-sm-12 col-md-6">

      <div class="form-group">

        <label for="mob">Mob</label>

        <input type="text" class="form-control" id="mob" placeholder="Enter Mob">

      </div>

      <div class="form-group">

        <label for="paddock">Paddock</label>

        <input type="text" class="form-control" id="paddock" placeholder="Enter Paddock">          

      </div>

    </div>

    <div class="col-sm-12 col-md-6">

      <div class="form-group">

        <label for="date">Date</label>

        <input type="date" class="form-control" id="date" placeholder="Enter Date">          

      </div>      

      <h4 class="mb-3 mt-3">Fencing Options</h4>

      <div class="form-group">

        <label for="avail">Available Today</label>

        <input type="text" class="form-control" id="avail" placeholder="NaN">          

      </div>

      <div class="form-group">

        <label for="allocation">Paddock Allocation %</label>

        <input type="number" class="form-control" id="allocation" placeholder="100">          

      </div>

      <div class="form-group">

        <label for="result">Required Result</label>

        <input type="text" class="form-control" id="result" placeholder="NaN">          

      </div>      

    </div>

  </div>

  <div class="row">

    <div class="col-sm-12 col-md-6">

      <h4 class="mb-3 mt-3">Assign As Task</h4>

      <div class="form-group">

        <label for="assign">Assign to</label><br>

        <button type="submit" class="btn btn-success btn-md" id="assign">Add</button>       

      </div>

      <div class="form-check">

        <input class="form-check-input" type="checkbox" value="" id="checked">

        <label class="form-check-label" for="checked">I want to see this too.</label>

      </div>

      <button type="button" class="btn btn-success btn-md">Save</button>

      <button type="button" class="btn btn-success btn-md">Cancel</button>

    </div>    

  </div>

</div>

answered Nov 29 '18 at 3:26

webfrogs

1,16832447

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53530429%2fhow-to-divide-html-page%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

I wrote up this using the Bootstrap Framework. It matches your image exactly.

There's a Codepen if you want to fork and play around with it. It's responsive, too.

/* Roboto Font */

@import url('https://fonts.googleapis.com/css?family=Roboto');



html, body {

  height: 100%;

}



body {

  font-family: 'Roboto', sans-serif;

}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" type="text/css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>





<div class="container p-5">

  <div class="row">

    <div class="col-sm-12">

      <h5 class="title text-uppercase bg-success text-white p-1">Rotation Forms</h5>

      <h4 class="mb-3 mt-3">Details</h4>

    </div>

    <div class="col-sm-12 col-md-6">

      <div class="form-group">

        <label for="mob">Mob</label>

        <input type="text" class="form-control" id="mob" placeholder="Enter Mob">

      </div>

      <div class="form-group">

        <label for="paddock">Paddock</label>

        <input type="text" class="form-control" id="paddock" placeholder="Enter Paddock">          

      </div>

    </div>

    <div class="col-sm-12 col-md-6">

      <div class="form-group">

        <label for="date">Date</label>

        <input type="date" class="form-control" id="date" placeholder="Enter Date">          

      </div>      

      <h4 class="mb-3 mt-3">Fencing Options</h4>

      <div class="form-group">

        <label for="avail">Available Today</label>

        <input type="text" class="form-control" id="avail" placeholder="NaN">          

      </div>

      <div class="form-group">

        <label for="allocation">Paddock Allocation %</label>

        <input type="number" class="form-control" id="allocation" placeholder="100">          

      </div>

      <div class="form-group">

        <label for="result">Required Result</label>

        <input type="text" class="form-control" id="result" placeholder="NaN">          

      </div>      

    </div>

  </div>

  <div class="row">

    <div class="col-sm-12 col-md-6">

      <h4 class="mb-3 mt-3">Assign As Task</h4>

      <div class="form-group">

        <label for="assign">Assign to</label><br>

        <button type="submit" class="btn btn-success btn-md" id="assign">Add</button>       

      </div>

      <div class="form-check">

        <input class="form-check-input" type="checkbox" value="" id="checked">

        <label class="form-check-label" for="checked">I want to see this too.</label>

      </div>

      <button type="button" class="btn btn-success btn-md">Save</button>

      <button type="button" class="btn btn-success btn-md">Cancel</button>

    </div>    

  </div>

</div>

answered Nov 29 '18 at 3:26

webfrogs

1,16832447

add a comment |

I wrote up this using the Bootstrap Framework. It matches your image exactly.

There's a Codepen if you want to fork and play around with it. It's responsive, too.

/* Roboto Font */

@import url('https://fonts.googleapis.com/css?family=Roboto');



html, body {

  height: 100%;

}



body {

  font-family: 'Roboto', sans-serif;

}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" type="text/css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>





<div class="container p-5">

  <div class="row">

    <div class="col-sm-12">

      <h5 class="title text-uppercase bg-success text-white p-1">Rotation Forms</h5>

      <h4 class="mb-3 mt-3">Details</h4>

    </div>

    <div class="col-sm-12 col-md-6">

      <div class="form-group">

        <label for="mob">Mob</label>

        <input type="text" class="form-control" id="mob" placeholder="Enter Mob">

      </div>

      <div class="form-group">

        <label for="paddock">Paddock</label>

        <input type="text" class="form-control" id="paddock" placeholder="Enter Paddock">          

      </div>

    </div>

    <div class="col-sm-12 col-md-6">

      <div class="form-group">

        <label for="date">Date</label>

        <input type="date" class="form-control" id="date" placeholder="Enter Date">          

      </div>      

      <h4 class="mb-3 mt-3">Fencing Options</h4>

      <div class="form-group">

        <label for="avail">Available Today</label>

        <input type="text" class="form-control" id="avail" placeholder="NaN">          

      </div>

      <div class="form-group">

        <label for="allocation">Paddock Allocation %</label>

        <input type="number" class="form-control" id="allocation" placeholder="100">          

      </div>

      <div class="form-group">

        <label for="result">Required Result</label>

        <input type="text" class="form-control" id="result" placeholder="NaN">          

      </div>      

    </div>

  </div>

  <div class="row">

    <div class="col-sm-12 col-md-6">

      <h4 class="mb-3 mt-3">Assign As Task</h4>

      <div class="form-group">

        <label for="assign">Assign to</label><br>

        <button type="submit" class="btn btn-success btn-md" id="assign">Add</button>       

      </div>

      <div class="form-check">

        <input class="form-check-input" type="checkbox" value="" id="checked">

        <label class="form-check-label" for="checked">I want to see this too.</label>

      </div>

      <button type="button" class="btn btn-success btn-md">Save</button>

      <button type="button" class="btn btn-success btn-md">Cancel</button>

    </div>    

  </div>

</div>

answered Nov 29 '18 at 3:26

webfrogs

1,16832447

add a comment |

I wrote up this using the Bootstrap Framework. It matches your image exactly.

There's a Codepen if you want to fork and play around with it. It's responsive, too.

/* Roboto Font */

@import url('https://fonts.googleapis.com/css?family=Roboto');



html, body {

  height: 100%;

}



body {

  font-family: 'Roboto', sans-serif;

}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" type="text/css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>





<div class="container p-5">

  <div class="row">

    <div class="col-sm-12">

      <h5 class="title text-uppercase bg-success text-white p-1">Rotation Forms</h5>

      <h4 class="mb-3 mt-3">Details</h4>

    </div>

    <div class="col-sm-12 col-md-6">

      <div class="form-group">

        <label for="mob">Mob</label>

        <input type="text" class="form-control" id="mob" placeholder="Enter Mob">

      </div>

      <div class="form-group">

        <label for="paddock">Paddock</label>

        <input type="text" class="form-control" id="paddock" placeholder="Enter Paddock">          

      </div>

    </div>

    <div class="col-sm-12 col-md-6">

      <div class="form-group">

        <label for="date">Date</label>

        <input type="date" class="form-control" id="date" placeholder="Enter Date">          

      </div>      

      <h4 class="mb-3 mt-3">Fencing Options</h4>

      <div class="form-group">

        <label for="avail">Available Today</label>

        <input type="text" class="form-control" id="avail" placeholder="NaN">          

      </div>

      <div class="form-group">

        <label for="allocation">Paddock Allocation %</label>

        <input type="number" class="form-control" id="allocation" placeholder="100">          

      </div>

      <div class="form-group">

        <label for="result">Required Result</label>

        <input type="text" class="form-control" id="result" placeholder="NaN">          

      </div>      

    </div>

  </div>

  <div class="row">

    <div class="col-sm-12 col-md-6">

      <h4 class="mb-3 mt-3">Assign As Task</h4>

      <div class="form-group">

        <label for="assign">Assign to</label><br>

        <button type="submit" class="btn btn-success btn-md" id="assign">Add</button>       

      </div>

      <div class="form-check">

        <input class="form-check-input" type="checkbox" value="" id="checked">

        <label class="form-check-label" for="checked">I want to see this too.</label>

      </div>

      <button type="button" class="btn btn-success btn-md">Save</button>

      <button type="button" class="btn btn-success btn-md">Cancel</button>

    </div>    

  </div>

</div>

answered Nov 29 '18 at 3:26

webfrogs

1,16832447

I wrote up this using the Bootstrap Framework. It matches your image exactly.

There's a Codepen if you want to fork and play around with it. It's responsive, too.

/* Roboto Font */

@import url('https://fonts.googleapis.com/css?family=Roboto');



html, body {

  height: 100%;

}



body {

  font-family: 'Roboto', sans-serif;

}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" type="text/css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>





<div class="container p-5">

  <div class="row">

    <div class="col-sm-12">

      <h5 class="title text-uppercase bg-success text-white p-1">Rotation Forms</h5>

      <h4 class="mb-3 mt-3">Details</h4>

    </div>

    <div class="col-sm-12 col-md-6">

      <div class="form-group">

        <label for="mob">Mob</label>

        <input type="text" class="form-control" id="mob" placeholder="Enter Mob">

      </div>

      <div class="form-group">

        <label for="paddock">Paddock</label>

        <input type="text" class="form-control" id="paddock" placeholder="Enter Paddock">          

      </div>

    </div>

    <div class="col-sm-12 col-md-6">

      <div class="form-group">

        <label for="date">Date</label>

        <input type="date" class="form-control" id="date" placeholder="Enter Date">          

      </div>      

      <h4 class="mb-3 mt-3">Fencing Options</h4>

      <div class="form-group">

        <label for="avail">Available Today</label>

        <input type="text" class="form-control" id="avail" placeholder="NaN">          

      </div>

      <div class="form-group">

        <label for="allocation">Paddock Allocation %</label>

        <input type="number" class="form-control" id="allocation" placeholder="100">          

      </div>

      <div class="form-group">

        <label for="result">Required Result</label>

        <input type="text" class="form-control" id="result" placeholder="NaN">          

      </div>      

    </div>

  </div>

  <div class="row">

    <div class="col-sm-12 col-md-6">

      <h4 class="mb-3 mt-3">Assign As Task</h4>

      <div class="form-group">

        <label for="assign">Assign to</label><br>

        <button type="submit" class="btn btn-success btn-md" id="assign">Add</button>       

      </div>

      <div class="form-check">

        <input class="form-check-input" type="checkbox" value="" id="checked">

        <label class="form-check-label" for="checked">I want to see this too.</label>

      </div>

      <button type="button" class="btn btn-success btn-md">Save</button>

      <button type="button" class="btn btn-success btn-md">Cancel</button>

    </div>    

  </div>

</div>

/* Roboto Font */

@import url('https://fonts.googleapis.com/css?family=Roboto');



html, body {

  height: 100%;

}



body {

  font-family: 'Roboto', sans-serif;

}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" type="text/css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>





<div class="container p-5">

  <div class="row">

    <div class="col-sm-12">

      <h5 class="title text-uppercase bg-success text-white p-1">Rotation Forms</h5>

      <h4 class="mb-3 mt-3">Details</h4>

    </div>

    <div class="col-sm-12 col-md-6">

      <div class="form-group">

        <label for="mob">Mob</label>

        <input type="text" class="form-control" id="mob" placeholder="Enter Mob">

      </div>

      <div class="form-group">

        <label for="paddock">Paddock</label>

        <input type="text" class="form-control" id="paddock" placeholder="Enter Paddock">          

      </div>

    </div>

    <div class="col-sm-12 col-md-6">

      <div class="form-group">

        <label for="date">Date</label>

        <input type="date" class="form-control" id="date" placeholder="Enter Date">          

      </div>      

      <h4 class="mb-3 mt-3">Fencing Options</h4>

      <div class="form-group">

        <label for="avail">Available Today</label>

        <input type="text" class="form-control" id="avail" placeholder="NaN">          

      </div>

      <div class="form-group">

        <label for="allocation">Paddock Allocation %</label>

        <input type="number" class="form-control" id="allocation" placeholder="100">          

      </div>

      <div class="form-group">

        <label for="result">Required Result</label>

        <input type="text" class="form-control" id="result" placeholder="NaN">          

      </div>      

    </div>

  </div>

  <div class="row">

    <div class="col-sm-12 col-md-6">

      <h4 class="mb-3 mt-3">Assign As Task</h4>

      <div class="form-group">

        <label for="assign">Assign to</label><br>

        <button type="submit" class="btn btn-success btn-md" id="assign">Add</button>       

      </div>

      <div class="form-check">

        <input class="form-check-input" type="checkbox" value="" id="checked">

        <label class="form-check-label" for="checked">I want to see this too.</label>

      </div>

      <button type="button" class="btn btn-success btn-md">Save</button>

      <button type="button" class="btn btn-success btn-md">Cancel</button>

    </div>    

  </div>

</div>

/* Roboto Font */

@import url('https://fonts.googleapis.com/css?family=Roboto');



html, body {

  height: 100%;

}



body {

  font-family: 'Roboto', sans-serif;

}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" type="text/css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>





<div class="container p-5">

  <div class="row">

    <div class="col-sm-12">

      <h5 class="title text-uppercase bg-success text-white p-1">Rotation Forms</h5>

      <h4 class="mb-3 mt-3">Details</h4>

    </div>

    <div class="col-sm-12 col-md-6">

      <div class="form-group">

        <label for="mob">Mob</label>

        <input type="text" class="form-control" id="mob" placeholder="Enter Mob">

      </div>

      <div class="form-group">

        <label for="paddock">Paddock</label>

        <input type="text" class="form-control" id="paddock" placeholder="Enter Paddock">          

      </div>

    </div>

    <div class="col-sm-12 col-md-6">

      <div class="form-group">

        <label for="date">Date</label>

        <input type="date" class="form-control" id="date" placeholder="Enter Date">          

      </div>      

      <h4 class="mb-3 mt-3">Fencing Options</h4>

      <div class="form-group">

        <label for="avail">Available Today</label>

        <input type="text" class="form-control" id="avail" placeholder="NaN">          

      </div>

      <div class="form-group">

        <label for="allocation">Paddock Allocation %</label>

        <input type="number" class="form-control" id="allocation" placeholder="100">          

      </div>

      <div class="form-group">

        <label for="result">Required Result</label>

        <input type="text" class="form-control" id="result" placeholder="NaN">          

      </div>      

    </div>

  </div>

  <div class="row">

    <div class="col-sm-12 col-md-6">

      <h4 class="mb-3 mt-3">Assign As Task</h4>

      <div class="form-group">

        <label for="assign">Assign to</label><br>

        <button type="submit" class="btn btn-success btn-md" id="assign">Add</button>       

      </div>

      <div class="form-check">

        <input class="form-check-input" type="checkbox" value="" id="checked">

        <label class="form-check-label" for="checked">I want to see this too.</label>

      </div>

      <button type="button" class="btn btn-success btn-md">Save</button>

      <button type="button" class="btn btn-success btn-md">Cancel</button>

    </div>    

  </div>

</div>

answered Nov 29 '18 at 3:26

webfrogs

1,16832447

answered Nov 29 '18 at 3:26

webfrogs

1,16832447

answered Nov 29 '18 at 3:26

webfrogs

1,16832447

answered Nov 29 '18 at 3:26

webfrogs

1,16832447

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl