Home/ Questions/Q 7615939
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T02:46:00+00:00

I bet this is probably basic stuff, I’ve just never come across it before.

  • 0

I bet this is probably basic stuff, I’ve just never come across it before. So, the code:

  • I’ve got a h1 followed by a p, followed by the same thing twice. So it goes h1 + p + h1 + p + h1 + p ;
  • I’ve floated the h1’s to the left, with a 29% width ;
  • I’ve floated the p’s to the right, width a 69% width ;

My question:

Why are the h1’s not stacking up together? I notice the first two are. Why isn’t the third one doing the same? Why is it top-aligned with the second paragraph (notice that if you change the p’s bottom margin, the h1 follows it)? What am I missing about float behavior?

Here’s the example at tinkerbin : http://tinkerbin.com/IUVovfjM

Here’s the code:

<head>
<style>
h1, p, body{
  margin: 0;
  padding: 0;
  line-height: 1.4;
  font: inherit;
}

h1{
   float: right; 
   width: 29%; 
   background-color: lightblue;
   }

p{
   float: left; 
   width: 69%; 
   background-color: indianred;
   } 
</style>
</head>

<body>
<h1>This Is The Title</h1>
<p>Lorem Ipsum badum badum baei.A primeira exposição apresenta, através de elementos       multimédia, a evolução do dinheiro, com especial referência ao espaço que hoje é Portugal. A   exposição termina com um núcleo dedicado à produção das notas, em que materiais e máquinas ilustram as diferentes fases da vida da nota, desde a sua concepção artística até à sua impressão, assim como os principais elementos de segurança que lhe estão associados.</p>
<h1>This Is The Title</h1>
<p>Lorem Ipsum badum badum baei.A primeira exposição apresenta, através de elementos multimédia, a evolução do dinheiro, com especial referência ao espaço que hoje é Portugal. A exposição termina com um núcleo dedicado à produção das notas, em que materiais e máquinas ilustram as diferentes fases da vida da nota, desde a sua concepção artística até à sua impressão, assim como os principais elementos de segurança que lhe estão associados.</p>
<h1>This Is The Title</h1>
<p>Lorem Ipsum badum badum baei.A primeira exposição apresenta, através de elementos multimédia, a evolução do dinheiro, com especial referência ao espaço que hoje é Portugal. A exposição termina com um núcleo dedicado à produção das notas, em que materiais e máquinas ilustram as diferentes fases da vida da nota, desde a sua concepção artística até à sua impressão, assim como os principais elementos de segurança que lhe estão associados.</p>
</body>

Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Why?

    Taken from CSS specification:

    1. “A float is a box that is shifted to the left or right on the current line.” – http://www.w3.org/TR/CSS2/visuren.html#floats
    2. “The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.” – item #5 at http://www.w3.org/TR/CSS2/visuren.html#float-position

    So, it is the order of your HTML elements which is doing this.

    Don’t change your CSS, play only with the headers and paragraphs, and you will get the “why”: http://tinkerbin.com/xex2Pykn

    To achieve the stacking you want, without changing the CSS, you may try this:

    <p>Lorem Ipsum badum badum baei.A primeira exposição apresenta, através de elementos multimédia, a evolução do dinheiro, com especial referência ao espaço que hoje é Portugal. A exposição termina com um núcleo dedicado à produção das notas, em que materiais e máquinas ilustram as diferentes fases da vida da nota, desde a sua concepção artística até à sua impressão, assim como os principais elementos de segurança que lhe estão associados.</p>
<h1>This Is The Title</h1>
<h1>This Is The Title</h1>
<h1>This Is The Title</h1>
<p>Lorem Ipsum badum badum baei.A primeira exposição apresenta, através de elementos multimédia, a evolução do dinheiro, com especial referência ao espaço que hoje é Portugal. A exposição termina com um núcleo dedicado à produção das notas, em que materiais e máquinas ilustram as diferentes fases da vida da nota, desde a sua concepção artística até à sua impressão, assim como os principais elementos de segurança que lhe estão associados.</p>
<p>Lorem Ipsum badum badum baei.A primeira exposição apresenta, através de elementos multimédia, a evolução do dinheiro, com especial referência ao espaço que hoje é Portugal. A exposição termina com um núcleo dedicado à produção das notas, em que materiais e máquinas ilustram as diferentes fases da vida da nota, desde a sua concepção artística até à sua impressão, assim como os principais elementos de segurança que lhe estão associados.</p>

    There are several other possible solutions, changing the CSS and/or the HTML structure.

    • 0