How to create design without applying float in parent div or without adding clear both in div?

Question

We want design like #2 but we are facing #1 design issue. when we are apply float left in parent div (gray border div) then its work fine. if any one have solution without applying float in parent div or without adding clear both in div then please let me know.

For more information please check attached image.(Float.jpg)

score 0 · Answer 1 · answered Sep 20 '16 at 07:17

0

div{
  display:inline-block;
  width:100px;
  height:100px;
  border:1px solid red;
  
}

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

answered Sep 20 '16 at 07:17

Samudrala Ramu

1,918
1
12
34

With Out Floating way is Override Its Default Styles . – Samudrala Ramu Sep 20 '16 at 07:19

score 0 · Answer 2 · answered Sep 20 '16 at 07:23

0

Add overflow: hidden to the parent div.

answered Sep 20 '16 at 07:23

Safal Pillai

1,225
1
15
28

score 0 · Answer 3 · answered Sep 20 '16 at 07:28

<html>
<head>
    <style>
        .parent > div {
            margin : 10px;
            width:80px;
            height:80px;
            border:1px solid red;
    }
    </style>
</head>
<body>
<div class="parent" style="display:flex;">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
</html>

You can also use flex by adding style as display:flex in parent div

score 0 · Answer 4 · answered Sep 20 '16 at 07:29

Please follow below code

HTML

<div class="outer-div">

<div class="inner-div"></div>
<div class="inner-div"></div>
<div class="inner-div"></div>
<div class="inner-div"></div>
<div class="inner-div"></div>

</div>

CSS

body,html{
  height:100%;
  width:100%;
  background:#f1f1f1;
}


.outer-div{
  border:2px solid #ccc;
  padding:10px;
  height:auto;
  width:350px
}

.inner-div{
  display:inline-block;
  width:100px;
  height:100px;
  border:1px solid red;  
}

code pan link

http://codepen.io/santoshkhalse/pen/XjjLKz

How to create design without applying float in parent div or without adding clear both in div?

4 Answers4