Register now or log in to join your professional community.
I have a requirement to show2-3 DIVs side by side. For this purpose I usually use float:left but now there is a requirement for not using float.
with flexbox property
You can use flexbox
display:flex;
or as others have mentioned
display:inline-block;
div {
display:inline-block;
}
use this attribute display:inline
OCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.di{
display: inline-block;
width: 200px;
height: 200px;
border: 2px;
background: red;
}
</style>
</head>
<body>
<!-- <input type="text" id="myInput" oninput="myFunction()"> -->
<!-- <button id="button"> show </button> -->
<!-- <iframe src="https://www.w3schools.com" id="load" width="100%" height="590"></iframe> -->
<input type="text" id="in" onchange=" myname()" >
<!-- <button onclick="click() "> </button> -->
<p id="demo"></p>
<!-- <input type="text" id="demo" value=" 5"> -->
<div class="di">
alaa tabash
</div>
<div class="di">
alaa tabash
</div>
<div class="di">
alaa tabash
</div>
<div class="di">
alaa tabash
</div>
<script type="text/javascript" src="alaa.js"> </script>
</body>
</html>
I normally use display:flex; for this purpose but that's the whole another level. Check out this
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
by using display: inline-block
The usual method when not using floats is to use display: inline-block:
