CODEWITHSUNDEEP
htmlcsscss-float
Paulo R.
Paulo R.

Reputation: 15619

Why aren't the right and left floats stacking together? Where does the space between them come from?

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

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.

Upvotes: 1

Views: 101

Answers (2)

J. Bruni
J. Bruni

Reputation: 20490

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.

Upvotes: 3

Malitta N
Malitta N

Reputation: 3423

http://tinkerbin.com/wMLrXlfQ

Add clear: both; to the h1 and it would appear properly.

Upvotes: 0

Related Questions