Why isn't the text vertically in line when using a float?

Question

Please see the HTML below:

#container
{
  height: 60%;
  width: 100%;
  background-color:green;
}

#floatElement
{
  top:0px;
  height: 60%;
  width: 50%;
  background-color:red;
  float:right;
}

<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="floatElement">
<h1 >this is a test inside the float element</h1>
</div>
<div id="container">
<h1>test</h1>
</div>
</body>

</html>

Here is the result.

Why is there extra space above the first line of text inside the float i.e. why is the word "text" and the words: "this is a test inside a float element" not in line?

I have looked here: https://developer.mozilla.org/en-US/docs/Web/CSS/float. The first image indicates that they should be in line. I have also Googled it and this is the closest I got: How to remove space at top of page when using float?. However, it does not answer my question.

Inspect your h1 element using your browser dev tools and you’ll know why. — Terry, Oct 09 '21 at 08:33
@Terry, the h1 element inside the float is identical to the h1 element outside the float as far as I can see in dev tools i.e. same font; margin; color etc. — w0051977, Oct 09 '21 at 08:37
@w0051977 The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow. check out my answer — Viira, Oct 09 '21 at 08:38
float create a BFC that disable margin collapsing, the one present in the first div — Temani Afif, Oct 09 '21 at 09:05

Viira · Accepted Answer · 2021-10-09T09:39:56.480

2

This is because the browser default user agent stylesheet adds style for some elements, in that case I'd recommend using a reset css.

Now back to the question, the space appears because you're using float so it will contain the default margin of the h1. According to https://developer.mozilla.org/

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow.

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/float

Whereas background color of div elements doesn't respect to the margin of its child, you have to use padding for that. Because margin applies outside of the border of the element and padding happens inside the borders.

Here's an example:

#container { height: 60%; width: 100%; background-color:green; }

#container h1 {margin: 100px 0;}

<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="container">
<h1>test</h1>
</div>
</body>

</html>

As you can see the margin is omitted by the background color of the parent, but still takes place.

Here's another scenario.

#container { height: 60%; width: 100%; background-color:green; }

#container h1 {margin: 0; padding: 100px 0;}

<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="container">
<h1>test</h1>
</div>
</body>

</html>

You can see what happens when padding is added to the h1

Here's the answer for your question, to make them both fly on the same line remove the margin for the h1

#container
{
  height: 60%;
  width: 100%;
  background-color:green;
}

#floatElement
{
  top:0px;
  height: 60%;
  width: 50%;
  background-color:red;
  float:right;
}

#floatElement h1, #container h1{
  margin-block-start: 0;
  /*you can also use margin: 0 in short */
}

<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="floatElement">
<h1 >this is a test inside the float element</h1>
</div>
<div id="container">
<h1>test</h1>
</div>
</body>

</html>

edited Oct 09 '21 at 09:39

answered Oct 09 '21 at 08:31

Viira

3,805
3
16
39

I understand what margins and padding is. I don't understand why there is a default margin in the floated div, yet there is no default margin in the other div. I think the answer is because the float is: "removed from the normal flow of the page, though still remaining a part of the flow.", however I guess I don't really understand what that means. I also cannot see the user agent styles you are referring to in Chrome Developer Tools. I am not the downvoter by the way. – w0051977 Oct 09 '21 at 09:25
I can show what the user agent style sheet is @w0051977 – Viira Oct 09 '21 at 09:27
I know what the user agent style sheet is - I just cannot see the H1 margin you are referring to when selectin the element in Chrome Developer Tools. – w0051977 Oct 09 '21 at 09:29
@w0051977 https://imgur.com/a/osnE0Ke can you see it now – Viira Oct 09 '21 at 09:29
can you see `margin-block-start` ? it is not covered by the default block element but it is wrapped by float element – Viira Oct 09 '21 at 09:31
margin-block-start is the same value for both h1 elements i.e. 0.67em. – w0051977 Oct 09 '21 at 09:32
Yes but it is wrapped by the float element, block element ignores the margin. – Viira Oct 09 '21 at 09:32
Is there any way to could include my code in your answer showing how to line the text? I think that would make it clearer. – w0051977 Oct 09 '21 at 09:34
`float` will wrap the child including the margin of the child, but default block element doesn't. – Viira Oct 09 '21 at 09:34
Yes state your desired output, I can give a solution – Viira Oct 09 '21 at 09:35
As stated in the question - "this is a test inside the float element" should be on the same horizontal line as "test". At the moment "this is a test inside the float element" is below "test". Does that make sense? – w0051977 Oct 09 '21 at 09:36
1

ok then I'll add it to my answer – Viira Oct 09 '21 at 09:37
I have added it to my answer @w0051977 – Viira Oct 09 '21 at 09:40
Thanks that does help +1. Just to be clear before I mark the answer: a block level element ignores margin-block-start and an inline element does not (a float is inline). Is that right? – w0051977 Oct 09 '21 at 10:08
partially right but what happens here is `float` is wrapping up the child with margin and block level ignores that, inline element doesn't even care about the background color itself it literally omits everything, `float`, `inline` and `inline-block` are different – Viira Oct 09 '21 at 10:11
but `inline-block` acts similar to float but it takes whitespace – Viira Oct 09 '21 at 10:12
1

Yes it did thanks. – w0051977 Oct 09 '21 at 11:24

Why isn't the text vertically in line when using a float?

1 Answers1