CODEWITHSUNDEEP
htmlcss
Tomás Dornas Perone
Tomás Dornas Perone

Reputation: 167

Div invading other div space?

I have no idea what's going on here. I have a div with two texts on it. And another div below - that works like a button. For some reason, this is happening...

enter image description here

Here is the code...

<div id="container1" style="margin:auto;text-align:center;width:85%;">

  <span style="font-family:'Montserrat';color:white;font-size:55px;">PROFESSORES</span>

  <br>

  <p class="text" style="float:left;text-align:right;color:white;"><span style="font-weight:bold;">Xxxx Xxxxx Xxxxxx</span>
    <br>&eacute; formada em psicologia e
    <br>especializada em ensino da
    <br>l&iacute;ngua inglesa, ambos pela
    <br>XXXX; morou na Xxxxxxx por
    <br>X anos, participou de v&aacute;rios
    <br>cursos na &aacute;rea de artes e
    <br>educa&ccedil;&atilde;o, culin&aacute;ria,
    <br>taichichuan, xxxxxxx,
    <br>t&eacute;cnicas de meditaç&atilde;o e hoje
    <br>é professora e coordenadora
    <br>de ensino da Xxxxxxxx.</p>

  <p class="text" style="float:right;text-align:left;color:white;"><span style="font-weight:bold;">Xxxxxxx Xxxxx Xxxx</span>
    <br>é professora e tradutora de
    <br>espanhol e português, pós
    <br>graduanda em Gramática da
    <br>Língua Portuguesa pela XXXX,
    <br>cursos de formação para
    <br>professores de língua e formada
    <br>em Comunicação Social.
    <br>Amante do espanhol, não só
    <br>porque é a sua língua materna,
    <br>mas também porque adora
    <br>ensinar e compartilhar não só a
    <br>gramática como também
    <br>curiosidades, experiências,
    <br>cultura latino-americano e
    <br>espanhola, filmes, costumes,
    <br>expressões e receitas típicas.</p>

</div>

<br>

<div class="button">

  <span class="label">+ METODOLOGIA</span>

</div>

And this is the CSS code for the "button" class... as you see, there is apparently nothing that could interfere on the other div.

.button {

margin: auto;
background-color: #2C3254;
padding: 50px;
text-align: center;
font-size: 60px;
width: 60%; 

}

Upvotes: 2

Views: 1637

Answers (3)

kintsukuroi
kintsukuroi

Reputation: 1479

Sometimes, a div invades another div, the problem is the div above the affected div has a negative margin-bottom.

This might help other specific cases with the same title as your problem.

Upvotes: 0

outlyer
outlyer

Reputation: 3943

You need to break from the floats. Since you're floating the two p elements, 'container1' is effectively as tall as the remaining elements (span and br) and the button div starts where the br is placed, much closer to the top than you expect.

You can use the style clear: both (that disallows content to float around the element) on the button and that should do it, e.g.:

...   
<div class="button" style="clear:both">
...

Or add a new div above it to act as spacer, whatever works best for you:

...   
<div style="clear:both"></div>
<div class="button">
...

Upvotes: 4

user6005498
user6005498

Reputation:

It is difficult for me to check what is going on in the code you provided, so I have done something basic that you can add some css code, to make it look like what you are now working on.

.div1{
	width: 380px;
	text-align: center;
}

.div1 p {
	display: inline-block;
	width: 187px;
	vertical-align: top;
}

.div2 {
	width: 380px;
	text-align: center;
}
<! DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8"/>
		
		<title>Collage</title>
		
		<link rel="stylesheet" href="style.css"/>
	
	</head>
	<body>
		<div class="div1">
			<p>Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just textJust text Just text Just text Just Just text Just text  </p>
			<p>Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text Just text </p>
		</div>
		
		<div class="div2">
			<p>button</p>
		</div>
	</body>
</html>

Upvotes: 1

Related Questions