CODEWITHSUNDEEP
htmlcss
Ray
Ray

Reputation: 6105

css margin operation with floated element

In the following trivial html code:

<body>
   <div style="float:left">text 1</div>
   <div style="margin-left:10px">text 2</div>
</body>

why does this not separate "text 1" from "text 2"? I.e. this ends up producing "text 1text 2". Apparently the margin is taken against the body, not the first div. So, if I put do "margin-left:100px", then they show separation, because text1 is less than 100px wide.

Thanks

Upvotes: 0

Views: 71

Answers (1)

Burak Erdem
Burak Erdem

Reputation: 19969

First try the following as you will see that 100px is not enough, because you just float the first div but the second div will append right next to the first one.

<div style="float:left">text 1 text 1 text 1 text 1 text 1 text 1 text 1</div>
<div style="margin-left:100px">text 2</div>

You have to float the second div, too.

<div style="float:left">text 1</div>
<div style="float:left;margin-left:10px">text 2</div>

Upvotes: 2

Related Questions