muthu32/side_by_side_Elem_css.html

## side_by_side_Elem_css.html
<html>
<head>
<title>Side by Side Element</title>
<style>
/*---------White space: no wrap Method---------*/
.parent {
     white-space: nowrap;
  width: 400px;
}

.child-left {
    background-color: orange;
    display:inline-block;
}

.child-right {
    background-color: yellow;
    display:inline-block;
  white-space: normal;
}
</style>

<!---
/*----- Float with min width Method --------*/

.parent {
min-width:100px; width: auto !important; width: 100px;
}

.child-left {
    background-color: orange;
    float: left;
}

.child-right {
  background-color: yellow;
  margin-left: 14px;
  float: left;
}
---->

</head>
<body>
<div class="parent">
<div class="child-left">
  child-left
</div>
<div class="child-right">
  child-right
</div>
</div>
</body>
</html>
	<html>
	<head>
	<title>Side by Side Element</title>
	<style>
	/---------White space: no wrap Method---------/
	.parent {
	white-space: nowrap;
	width: 400px;
	}

	.child-left {
	background-color: orange;
	display:inline-block;
	}

	.child-right {
	background-color: yellow;
	display:inline-block;
	white-space: normal;
	}
	</style>

	<!---
	/----- Float with min width Method --------/

	.parent {
	min-width:100px; width: auto !important; width: 100px;
	}

	.child-left {
	background-color: orange;
	float: left;
	}

	.child-right {
	background-color: yellow;
	margin-left: 14px;
	float: left;
	}
	---->

	</head>
	<body>
	<div class="parent">
	<div class="child-left">
	child-left
	</div>
	<div class="child-right">
	child-right
	</div>
	</div>
	</body>
	</html>