Empty space

HTML & CSS
1

Hi everybody, before all… I’m brazilian then, sorry for some mistake or word spelling wrong.

Let’s go… I got this website to design:

989×580 150 KB

http://i.imgur.com/GnfPe.jpg

This is the state it currently:

1349×677 74.1 KB

http://i.imgur.com/ycjjL.jpg

First: I wanna know how can I put that box (with border 1 px) below the menu.
I tried clear and no success. :confused:

Second: All the elements are floating. Those who are on the right float right, float left who are left. This way is correct?
If I reduce the browser screen of all the elements to disengage. It is this way or missing any position to set them? If so, what would it be?

HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>L.O. Baptista</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="tudo">
  <div id="noticias" class="clear">
    <ul class="texto">
      <li class="titulo">NOTÍCIAS E EVENTOS</li>
      <li>
        <p>Título</p>
      </li>
      <li>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a magna dui, a vestibulum sem. Ut turpis orci, porta non adipiscing sit amet, porta non augue. Pellentesque quis velit et orci tincidunt vehicula. Pellentesque bibendum lacinia condimentum.</p>
      </li>
      <li>
        <p>Título</p>
      </li>
      <li>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a magna dui, a vestibulum sem. Ut turpis orci, porta non adipiscing sit amet, porta non augue. Pellentesque quis velit et orci tincidunt vehicula. Pellentesque bibendum lacinia condimentum.</p>
      </li>
      <li>
        <p>Título</p>
      </li>
      <li>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a magna dui, a vestibulum sem. Ut turpis orci, porta non adipiscing sit amet, porta non augue. Pellentesque quis velit et orci tincidunt vehicula. Pellentesque bibendum lacinia condimentum.</p>
      </li>
      <li>
        <p>Título</p>
      </li>
      <li>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a magna dui, a vestibulum sem. Ut turpis orci, porta non adipiscing sit amet, porta non augue. Pellentesque quis velit et orci tincidunt vehicula. Pellentesque bibendum lacinia condimentum.</p>
      </li>
    </ul>
  </div>
  <div id="box_principal">Imagem aqui</div>
  <div id="box_principal_inferior">
    <p><a href="">PORTUGUÊS</a> | <a href="">ENGLISH</a> | <a href="">FRANÇAIS</a> | <a href="">ESPAÑOL</a></p>
  </div>
  <div id="reconhecimentos" class="clear">
    <ul>
      <li class="titulo">RECONHECIMENTOS</li>
      <table width="500" border="0" cellspacing="2" cellpadding="0">
        <tr>
          <td><img src="images/Banner_Certific.jpg" /></td>
          <td><img src="images/Banner_Certific.jpg" /></td>
          <td><img src="images/Banner_Certific.jpg" /></td>
          <td><img src="images/Banner_Certific.jpg" /></td>
          <td><img src="images/Banner_Certific.jpg" /></td>
        </tr>
        <tr>
          <td><img src="images/Banner_Certific.jpg" /></td>
          <td><img src="images/Banner_Certific.jpg" /></td>
          <td><img src="images/Banner_Certific.jpg" /></td>
          <td><img src="images/Banner_Certific.jpg" /></td>
          <td><img src="images/Banner_Certific.jpg" /></td>
        </tr>
      </table>
    </ul>
  </div>
  <div id="menu">
  	<ul>
    	<li><a href="">INSTITUCIONAL</a></li>
        <li> | </li>
        <li><a href="">PROFISSIONAIS</a></li>
        <li> | </li>
        <li><a href="">ÁREA DE TRABALHO</a></li>
        <li> | </li>
        <li><a href="">ÁREAS DE ATUAÇÃO</a></li>
        <li> | </li>
        <li><a href="">PUBLICAÇÕES</a></li>
        <li> | </li>
        <li><a href="">CONTATO</a></li>
        <li> | </li>
        <li><a href="">ÁREA DO CLIENTE</a></li>
    </ul>
  </div>
  <div id="endereco" class="clear">
	<div id="sp">
		<ul class="texto">
			<li>SP</li>
			<li>Av. Paulista, 1294 8°</li>
			<li>São Paulo, SP, Brasil</li>
			<li>03110-100</li>
			<li>Tel: 55.11.28971234</li>
		</ul>
	</div>
	<div id="rj">
		<ul class="texto">
			<li>RJ</li>
			<li>R. da Assembléia, 66, 17°</li>
			<li>Rio de Janeiro, RJ, Brasil</li>
			<li>20011-000</li>
			<li>Tel: 55.21.21141701</li>
		</ul>
	</div>
  </div>
  <div id="imagem"></div>
</div>
</body>
</html>

CSS


/*
CSS Reset
**********/
* {
	margin: 0 auto;
	padding: 0;
	border: 0;
	list-style:none;
	text-decoration: none; 
	text-transform: none;
}

/*
Tags Globais
************/
body {min-height: 100%; min-width: 100%;}

/*
Tags do Site
**************/
#tudo {height: 100%; width: 100%; margin: 0 auto;}

/*
Esquerda
********/
#noticias {width: 500px; height: 325px; float: left; margin:15px 0 0 15px; border-bottom: 2px dotted #999;}
#noticias li {margin: 5px;}
#noticias li:first-child {margin-left: 20px;}

#reconhecimentos {width: 500px; height: 200px; float: left; margin:15px 0 0 15px; border-bottom: 2px dotted #999;}
#reconhecimentos li {margin: 5px;}
#reconhecimentos li:first-child {margin-left: 20px;}

#endereco  {width: 500px; height:auto 200px; float: left; margin:15px 0 0 15px; border-bottom: 2px dotted #999;}
#endereco li {margin: 5px;}
#sp {float: left; width: 150px;}
#sp li:first-child {font-weight: bold;}
#rj {float: left; width: 150px;}
#rj li:first-child {font-weight: bold;}

/*
Direita
*******/

#box_principal {width: 800px; height: 190px; float: right; background: #666; color: #FFF;}
#box_principal_inferior {width: 800px; height: 150px; float: right; background: #1C2C5F;}
#box_principal_inferior p {padding: 3px; color: #FFF; font: 11px Tahoma, Geneva, sans-serif;}

#menu {width: 799px; float: right; text-align: left; font: 11px Tahoma, Geneva, sans-serif; font-weight: bold; margin-top: 20px;}
#menu ul li {display: inline; padding: 2px 2px 2px 0;}
#menu ul li a {color: #999;}

#imagem {border: 1px solid #000; width: 800px; height: 190px; float: right; display: block;}


/*
Classes
*******/
.texto {font: 11px Tahoma, Geneva, sans-serif; text-align: justify;}
.titulo {list-style-type: square; font-size: 12px; font-weight: bold; color: #999;}

.clear {clear:both;}

Thanks.

2

Hi,

You are going about it the wrong way I’m afraid.Tthe design is basically a 2 column design so create 2 floated columns and then stack all the left side in one float and all the right side in the other float. That way you won’t need to clear any floats and indeed the content inside the containing parent floats would not need to be floated in most cases anyway.

You can’t really float multiple elements left and right and expect them to just fill two columns evenly because floats don’t really work like that unless they are exactly the same size.

3

Thank you.
Previously I thought about doing just two columns, but otherwise I thought this was easy.