INCONSISTENT ALIGNMENT
Why does a floating element sometimes align vertically with the adjacent non-floating element, while other times it aligns with the top border of its container? This variability seems to be influenced by the border-top-width and overflow properties. Any insights?
Exploration
While tinkering with a layout involving <img> elements, I encountered an issue with inconsistent vertical alignment between a floating element and a block-level non-floating element. As someone who just delved into HTML/CSS self-study recently, I'm open to constructive criticism in case I've missed any fundamental concepts.
Breakdown
The setup includes a floating element and a non-floating block element within a <div> container.
The floating element (p1) has fixed width and zero margin, and can float left or right. It is the first element to float alongside the containing box.
The adjacent element (p2) is a non-floating block that wraps around p1, with specified non-zero margins to illustrate misalignment scenarios.
The parent element <div> has no padding.
In this scenario, I observed two distinct ways the floating element (p1) positions itself based on border-top-width and overflow:
- The floating element (p1) aligns with the adjacent non-floating element (p2)
CSS Rules:
div {border-top-width: 0px;}
and
div {overflow: visible;}The floating element (p1) aligns with the top border of the parent element.
CSS Rules:
div {border-top-width: non-0px;}
or
div {overflow: auto/hidden/scroll/}
Note that either rule independently influences the alignment in the second scenario.
Sample Code
A simplified version of the code looks like this:
HTML
<div>
<img src="example.jpg">
<p>Random text</p>
</div>
CSS
img {
float: left;
}
/* floating element aligns with adjacent element */
div {
border: none;
overflow: visible;
}
or
/* floating element aligns with top border of container */
div {
border-top-width: 1px;
overflow: auto;
}
An example is available on jsfiddle: https://jsfiddle.net/tLumj9x7/
Alternatively, you can view the snippet below:
/* <body>, <div> margin set to 0 to avoid interference */
body {
margin: 0px;
}
div {
margin: 0px;
}
/* border drawn above the paragraphs to denote top border of 2nd <div> */
.div1 {
border-bottom: 1px solid;
}
p {
border: 1px solid;
}
/* floating paragraph: margin set to 0 to highlight unusual alignment */
.p1 {
float: left;
margin: 0px;
width: 400px;
}
/* note that a <p> element has a default margin of 1em, so this declaration is just for demonstration */
.p2 {
margin: 16px;
}
input#border:checked~div.div2 {
border-top: 0.02px solid transparent;
}
input#overflow:checked~div.div2 {
overflow: auto;
}<form>
<input type="checkbox" name="border" id="border" />container border-top-width: non-0<br />
<input type="checkbox" name="overflow" id="overflow" />container overflow: auto / hidden/ scroll<br />
<div class="div1">
</div>
<div class="div2">
<p class="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</form>Queries
What factors influence the vertical position of a starting floating element in relation to its parent element (in this case, the
<div>)?How does the
border-top-widthproperty affect the positioning of the starting floating element?Similarly, how does the
overflowproperty impact the structural integrity of the container box?Which scenario represents the default positioning for the starting floating element, if such a default exists?
A related question: When adding margins around a floating element that floats left, why does its margin collapse with the adjacent non-floating element's margin? Is this a standard behavior, considering that floating element margins are said not to collapse?
This marks my debut on stackoverflow, so thank you for engaging with my inquiry! As I navigate the realms of web development, I eagerly await your insightful responses.