HTML / CSS - Misaligned columns

Question

HTML / CSS - Misaligned columns

Navigation

#1 by (0 votes)

0

Why are the columns misaligned? I used the same properties.

/*ESTRUTURA DO SITE*/
*{
	margin: 0;
	padding: 0;
}

body{
	font-family: 'Open Sans Condensed', sans-serif;
	background: #fff url(../img/header2.jpg) repeat-x;
	background-size:500px 300px;
}


#container{
	width: 960px;
	margin: 0 auto;
}
#Topo{
	height: 250px;
	border: 2px solid blue;
}

.logo{
	width: 300px;
	height: 300px;
	background: url(../img/logobranco1.png) no-repeat;
	text-indent: -3000px; /*escondendo do usuario*/
}


/*Barra de navegaão*/
ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
li a {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*Configurando Layout*/
#conteudo{
	margin-top: 100px;
	background: #f5f5f5;
}
#Primario{
	width: 720px;
	float: right;
	margin: 0 0 30px 15px;
	background: blue;
}
#Lateral{
	width: 210px;
	margin: 0 0 30px 0px;
	float: right;
	
}

/*CAIXA*/
.caixa{
	margin: 10px 0; /*formatação espaçamento caixa*/
	background: #fff;
}

.caixa-conteudo{
	background: #ffff;
	padding: 5px;
	margin-top: 5px;
}

.caixa-conteudo2{
	background: #ffff;
	padding: 5px;
	margin-top: 5px;
}

/*FORMATAÇÃO MENUS LATERAIS*/

ul a{

	font-size: 1em;
 	padding: 3px;
 	display: block;
 	line-height: 30px;
 	color: #000;
 	text-decoration: none;
 	border-bottom: 1px solid #fff

}

ul a:hover{
	background: #f9f9f9;
 	padding-left: 5px;
 	color: #a1a1a1;
}

h2{
	font-family: 1em;
	background: #FFF;
	color: #81142b;
	padding: 5px;
}






/*RODAPE*/
#container-rodape{
	background: #81142b;
	padding: 20px;
}

#rodape{
	width: 750px;
	margin: 0 auto;
	color: #fff;
}


##HTML

   <!DOCTYPE html>
<html>
   <head>
  <meta property="creator.productor" content="http://estruturaorganizacional.dados.gov.br/id/unidade-organizacional/NUMERO">
  <meta name="viewport" content="width=device-whidth, inital-scale=1">
  <!--Altura da pagina = largura do dispositivo -->
  <title>Editora UFPB</title>
  <meta charset="utf-8">
  <meta name="description" content="Editora UFPB especializada em publicações e submições de livros.">
  <meta name="keywords" content="Editora, UFPB, Editora UFPB, Publicações">
  <!--Palavras chaves-->
  <meta name="robots" content="index, follow">
  <!--Robo para busca-->
  <meta name="author" content="Editora UFPB - Lucas Aragão">
  <link rel="stylesheet" type="text/css" href="css/estilo.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet">
  <!-- <link rel="icon" href="img/icon.png"> -->
   </head>
   <body>
  <header>
  <!-- barra do goveno começo -->
  <div id="barra-brasil" style="background:#7F7F7F; height: 20px; padding:0 0 0 10px;display:block;">
     <ul id="menu-barra-temp" style="list-style:none;">
        <li style="display:inline; float:left;padding-right:10px; margin-right:10px; border-right:1px solid #EDEDED"><a href="http://brasil.gov.br" style="font-family:sans,sans-serif; text-decoration:none; color:white;">Portal do Governo Brasileiro</a></li>
        <li><a style="font-family:sans,sans-serif; text-decoration:none; color:white;" href="http://epwg.governoeletronico.gov.br/barra/atualize.html">Atualize sua Barra de Governo</a></li>
     </ul>
  </div>
  <!-- barra do goveno FINAL -->
  <div id="container">
     <div id="Topo">
        <h1 class="logo"> Editora UFPB </h1>
     </div>
     <!--Inicio do conteudo-->
     <div id="conteudo">
        <div id="Primario">
           <h1>Teste</h1>
        </div>
        <div id="Lateral">
           <div class="caixa">
              <h2>Menu</h2>
              <div class="caixa-conteudo">
                 <ul>
                    <li><a href="">A Editora UFPB</a></li>
                    <li><a href="">Ponto de Vendas</a></li>
                    <li><a href="">Clube da Leitura</a></li>
                    <li><a href="">Fale Conosco</a></li>
                    <li><a href="">Equipe Editorial</a></li>
                 </ul>
              </div>
           </div>
        </div>
        <div class="caixa">
           <h2>Livros</h2>
           <div class="caixa-conteudo2">
              <ul>
                 <li><a href="">Catálogo</a></li>
                 <li><a href="">Dowload Ebooks</a></li>
                 <li><a href="">Editais</a></li>
              </ul>
           </div>
        </div>
        <div class="caixa">
           <h2>Entre em Contato</h2>
           <div class="caixa-conteudo">
              <form>
                 <div>
                    <label>Email: </label>
                    <input type="text" name="email" id="email" placeholder="Digite seu e-mail">
                 </div>
                 <div>
                    <input type="submit" name="Enviar">
                 </div>
              </form>
           </div>
        </div>
     </div>
     <!--Final do conteudo-->
  </div>
  <dir id="container-rodape" style="clear: both;">
     <div id="rodape">
        <strong>&copy; Copyright 2000-2018 EDITORA UFPB</strong>
     </div>
  </dir>
   </body>
</html>

html css webdesign

asked by anonymous 16.07.2018 / 18:33

1 answer

$ rootScope emit needs $ timeout, why? problems in add and update button are not working on a crud in data_table in php, my functions seem to be wrong

score 0 · Answer 1

Because you've positioned them outside <div id="Lateral"> .

/*ESTRUTURA DO SITE*/

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Open Sans Condensed', sans-serif;
  background: #fff url(../img/header2.jpg) repeat-x;
  background-size: 500px 300px;
}

#container {
  width: 960px;
  margin: 0 auto;
}

#Topo {
  height: 250px;
  border: 2px solid blue;
}

.logo {
  width: 300px;
  height: 300px;
  background: url(../img/logobranco1.png) no-repeat;
  text-indent: -3000px;
  /*escondendo do usuario*/
}


/*Barra de navegaão*/

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li a {
  margin: 0;
  padding: 0;
  list-style: none;
}


/*Configurando Layout*/

#conteudo {
  margin-top: 100px;
  background: #f5f5f5;
}

#Primario {
  width: 720px;
  float: right;
  margin: 0 0 30px 15px;
  background: blue;
}

#Lateral {
  width: 210px;
  margin: 0 0 30px 0px;
  float: right;
}


/*CAIXA*/

.caixa {
  margin: 10px 0;
  /*formatação espaçamento caixa*/
  background: #fff;
}

.caixa-conteudo {
  background: #ffff;
  padding: 5px;
  margin-top: 5px;
}

.caixa-conteudo2 {
  background: #ffff;
  padding: 5px;
  margin-top: 5px;
}


/*FORMATAÇÃO MENUS LATERAIS*/

ul a {
  font-size: 1em;
  padding: 3px;
  display: block;
  line-height: 30px;
  color: #000;
  text-decoration: none;
  border-bottom: 1px solid #fff
}

ul a:hover {
  background: #f9f9f9;
  padding-left: 5px;
  color: #a1a1a1;
}

h2 {
  font-family: 1em;
  background: #FFF;
  color: #81142b;
  padding: 5px;
}


/*RODAPE*/

#container-rodape {
  background: #81142b;
  padding: 20px;
}

#rodape {
  width: 750px;
  margin: 0 auto;
  color: #fff;
}

<!DOCTYPE html>
<html>

<head>

  <meta property="creator.productor" content="http://estruturaorganizacional.dados.gov.br/id/unidade-organizacional/NUMERO">

  <meta name="viewport" content="width=device-whidth, inital-scale=1">
  <!--Altura da pagina = largura do dispositivo -->
  <title>Editora UFPB</title>
  <meta charset="utf-8">
  <meta name="description" content="Editora UFPB especializada em publicações e submições de livros.">
  <meta name="keywords" content="Editora, UFPB, Editora UFPB, Publicações">
  <!--Palavras chaves-->
  <meta name="robots" content="index, follow">
  <!--Robo para busca-->
  <meta name="author" content="Editora UFPB - Lucas Aragão">
  <link rel="stylesheet" type="text/css" href="css/estilo.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet">
  <!-- <link rel="icon" href="img/icon.png"> -->

</head>

<body>
  <header>
    <!-- barra do goveno começo -->
    <div id="barra-brasil" style="background:#7F7F7F; height: 20px; padding:0 0 0 10px;display:block;">
      <ul id="menu-barra-temp" style="list-style:none;">
        <li style="display:inline; float:left;padding-right:10px; margin-right:10px; border-right:1px solid #EDEDED"><a href="http://brasil.gov.br" style="font-family:sans,sans-serif; text-decoration:none; color:white;">Portal do Governo Brasileiro</a></li>
        <li><a style="font-family:sans,sans-serif; text-decoration:none; color:white;" href="http://epwg.governoeletronico.gov.br/barra/atualize.html">Atualize sua Barra de Governo</a></li>
      </ul>
    </div>
    <!-- barra do goveno FINAL -->
    <div id="container">
      <div id="Topo">
        <h1 class="logo"> Editora UFPB </h1>
      </div>

      <!--Inicio do conteudo-->
      <div id="conteudo">
        <div id="Primario">
          <h1>Teste</h1>


        </div>


        <div id="Lateral">
          <div class="caixa">
            <h2>Menu</h2>
            <div class="caixa-conteudo">
              <ul>
                <li><a href="">A Editora UFPB</a></li>
                <li><a href="">Ponto de Vendas</a></li>
                <li><a href="">Clube da Leitura</a></li>
                <li><a href="">Fale Conosco</a></li>
                <li><a href="">Equipe Editorial</a></li>
              </ul>
            </div>
          </div>
          <div class="caixa">
            <h2>Livros</h2>
            <div class="caixa-conteudo2">
              <ul>
                <li><a href="">Catálogo</a></li>
                <li><a href="">Dowload Ebooks</a></li>
                <li><a href="">Editais</a></li>
              </ul>
            </div>
          </div>

          <div class="caixa">
            <h2>Entre em Contato</h2>
            <div class="caixa-conteudo">
              <form>
                <div>
                  <label>Email: </label>
                  <input type="text" name="email" id="email" placeholder="Digite seu e-mail">
                </div>
                <div>
                  <input type="submit" name="Enviar">
                </div>
              </form>
            </div>
          </div>

        </div>



      </div>
      <!--Final do conteudo-->


    </div>

    <dir id="container-rodape" style="clear: both;">
      <div id="rodape">
        <strong>&copy; Copyright 2000-2018 EDITORA UFPB</strong>
      </div>

    </dir>



</body>

</html>