First Project: Float Problem

Question

Having a float problem here

http://empres.arq.br/

in the "about" section i want to display the text "Especialidade e Nicho de mercado" on the left (75%), and the text "Jorgina Nello Barbosa" with the avatar on the right(24%)

i can't figure out what's wrong

Answer 1 · 2015-04-15T03:15:04Z

April 15, 2015 3:15am

You also have to target the div with the class "sobre" and float it left.

Answer 2 · 2015-04-15T01:50:17Z

April 15, 2015 1:50am

<!DOCTYPE html>
<meta charset="UTF-8">
<head>
    <title>empresARQ | Arquitetura para negócios</title>
    <link rel="stylesheet" type="text/css" href="../css/main.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,800,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
 </head>
<header class="header">
        <a href="index.html"><img class="logo" src="../img/empresarq.png" width="250px" height="50px"></a>
    <div class="nav"><ul>
        <a href="#contato"><li>Contato</li></a>
        <a href="#projetos"><li>Projetos</li></a>
        <a href="sobre"><li>Sobre</li></a>
        <a href="maisarq"><li>+ARQ</li></ul></a>
    <br><h1>Arquitetura também é planejamento.</h1><h2>E empreender também é arquitetar!</h2>
    </div>
</header>
<body>
    <section id="maisarq" class="maisarq">
        <h1>+ARQ</h1>
        <h2>Como a arquitetura pode ajudar no planejamento estratégico da sua empresa?</h2>
        <ul>
        <a href="planejamento+arq.html"><li class="plan">PLANEJAMENTO+ARQ</li></a>
        <a href=""><li class="cult">CULTURA+ARQ</li></a>
        <a href=""><li class="sust">SUSTENTABILIDADE+ARQ</li></a>
        <a href=""><li class="aces">ACESSIBILIDADE+ARQ</li></ul></a>
    </div></section>
    <section><div class="projetos"><h1>projetos</h1>
        <ul>
            <li>Pizzaria Macedo</li>
            <li>Livraria Papiro </li>
            <li>Parque linear das corujas</li>
            <li>Equipotel 2011</li>
        </ul>
        </div></section><section>
    <section><div class="sobre">
        <h1>SOBRE</h1>
        <div clas="empresarq"></div>
        <h2>Especialidade e Nicho de mercado</h2> 
        <p class="bio">Entender as necessidades do cliente.
            Adequar respostas técnicas e legais a estas necessidades.
            Resolver utilizando o menor tempo e o menor investimento.<br><br>

            O nosso negócio é construir e construir com metas à sustentabilidade.
            A sociedade não entendeu ainda o montante da “conta ambiental”.
            Faz-se necessário um exercício para que a conta do tripé da sustentabilidade 
            (ambiental, econômica e sócio cultural), seja um número positivo e para todos.<br><br>

            A indústria de hotéis já saiu na frente (Graças à Deus!) porque é bastante pressionada 
            pela opinião do hóspede. Com caneta e questionário, dá ao hoteleiro, dicas claras do caminho
            a seguir. Tornou-se um mensageiro de mudanças.<br><br>

            Hoje não pensamos mais como ontem e devemos também atualizar nossa maneira de agir e trabalhar,
            porque em nosso negócio as regras devem continuar as mesmas?<br><br>

            A experiência mostra o caminho, mas o presente dita as regras para o futuro.<br><br>
            Os cinco RS
            Repensar, Reduzir, Reutilizar, Reusar e Reciclar</p></div>

        <div class="jorgina-bio"><p class="jorgina"><img src="img/jorgina.jpg" class="avatar"><h2>Jorgina Nello Barbosa</h2>
            A Suíte Universal, projetada por Jorgina Nello Barbosa, além de se preocupar com as questões ecologicamente corretas foi desenvolvida             para pessoas com necessidades especiais. O projeto prevê, por exemplo, poltronas da mesa de café com apoio central que evitam quedas              e esbarrões. Outra novidade é o uso de objetos táteis e cores que traduzem a alegria de viver. A arquiteta desenvolve trabalhos na              área de alimentação, projetando cozinhas industriais e comerciais, e projetos de arquitetura de interiores voltados,                               principalmente, para hotéis e restaurantes. Está envolvida em trabalhos comunitários desde a juventude e hoje é membro do Green                   Building Council Brasil, além de estar se especializando em construções sustentáveis.</div>    
        </p>

             </div>
         <section>
    <section><div class="contato"><h2>Vamos tomar um café?</h2><p>+55 11 981 281 258<br>Rua Cristiano Viana, 855 - Casa 35<br>contato@empres.arq.br</p><div class="google-maps">
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d58491.95002720096!2d-46.635813150000004!3d-23.61340925!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1spt-BR!2sbr!4v1429061731152" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div></div><section>
</body>

/* ------------------------------------------------------ UNIVERSAL ------------------------------- */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* ------------------------------------------------------ GERAL ------------------------------- */
body {
    font-family: 'Exo', sans-serif;
    background: white;
    margin; -50px auto 0;
}

a {
    font-weight: bold;
    text-decoration: none;
    color: #003D3D;
}

ul {
    list-style: none;
    padding; 5em;
    text-align: center;
}


@import url(http://fonts.googleapis.com/css?family=Exo:200,300,400,500,600,700,800,600italic,500italic,400italic,700italic,300italic,200italic);

/* ------------------------------------------------------ HEADER ------------------------------- */

.header {
    min-height: cover;
    min-height: cover;
    margin-bottom: auto;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    border: 0;
    background: linear-gradient(#eff, transparent 90%),
                url('../img/header-bg.jpg') no-repeat center;
    background-size: cover;  

}

.header h1 {
    font-family: 'Open Sans', sans-serif;
    color: #fff;
    font-size: 4em;
    text-align: center;
    padding-top: 5em;
    padding-bottom: .2em;
    background-color: rgba (255 255 255 0.1);
    margin-left: auto;
    margin-right: auto;
    font-kerning: none;
}

.header h2 {
    font-family: 'Open Sans', sans-serif;
    color: #fff;
    font-size: 3em;
    text-align: center;
    padding-top: 0em;
    padding-bottom: 5em;
    height: 100vh;
    margin-left: auto;
    margin-right: auto;
}

.logo {
    float: left;
    display: inline-block;
    max-height: 100%;
    max-width: 100%;
    margin-left: 1.5em;
    margin-top: 1em;
    background-color: background-color:rgba(255,255,255, 0.9);
}

/* ------------------------------------------------------ NAVIGATION ------------------------------- */

.nav li {
    text-decoration: none;
    float: right;
    font-family: 'Open Sans', sans-serif;
    display: block;
    text-transform: uppercase;
    margin-right: 1em;
    margin-top: 1em;
    border: 1px solid #197575;
    border-radius: .5em;
    color: #197575;
    padding: .5em;
    background-color: rgba(255, 255, 255, 0.3);
}

.nav li:hover {
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid #66A3A3;
    border-radius: .5em;
    color: #66A3A3;
}

/* ------------------------------------------------------ +ARQ ------------------------------- */

.maisarq {
    min-width: 100%;
    align-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3em;
}

.maisarq ul {
    align-content: center;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Open Sans', sans-serif;
}

.maisarq li {
    max-height: 65%;
    max-width: 100%;
    text-decoration: none;
    list-style: none;
    padding: 10px 10px 10px 5px;
    margin-bottom: .5em;
    margin-top: .5em;
    margin-left: .5em;
    color: #fff;
    background-color: #006666; 
    display: inline-block;
    padding: 3em;
    font-family: 'Open Sans', sans-serif;
    border-radius: .5em;
}

.maisarq h1 {
    padding: .5em;
    text-align: center;
    display: block;
    color: #006666;
    font-family: 'Open Sans', sans-serif;
    font-size: 3em;
}

.maisarq h2 {
    padding: 1em;
    text-align: center;
    display: block;
    color: #000;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.5em;     
}

.maisarq li:hover {
    background-color: #197575;
}

.maisarq {
    display: inline-block;
    max-width: 100%;
    margin-left: .5em;
    margin-right: .5em;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    border-top: .2em solid #003D3D;
    height: 100vh;
}

/* ------------------------------------------------------ PROJETOS ------------------------------- */

.projetos {
    font-family: 'Open Sans', sans-serif;
    color: white;
    display: inline-block;
    border-top: 1px solid #ccc;
    min-width: 100%;
    min-height: 100%;
    height: 100vh;

}

 .projetos h1 {
    padding: .5em;
    text-align: center;
    text-transform: uppercase;
    display: block;
    color: #006666;
    font-family: 'Open Sans', sans-serif;
    font-size: 3em;
    margin-bottom: 2em;
}

.projetos li {    
    max-width: 25%;
    max-height: 25%;
    text-decoration: none;
    list-style: none;
    border: 3px solid #4D9494;
    padding: 10px 10px 10px 5px;
    margin-bottom: 5em;
    margin-top: 5em;
    color: #fff;
    background-color: #4D9494;
    text-decoration: none;
    border-radius: .5em;
    align-content: center;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
}

.projetos li {
    display: inline;
    text-align: center;
    margin: 0.2em;
}
/* ------------------------------------------------------ SOBRE ------------------------------- */

.sobre {
    /*margin-top: 3em;
    margin-bottom: 3em;
    padding: 0 4em 0 4em;*/
    border-top: 0.1em solid #ccc;
    height: 100vh;
}

.sobre h1 {
    padding: .5em;
    text-align: center;
    display: block;
    color: #006666;
    font-family: 'Open Sans', sans-serif;
    font-size: 3em;
}

.sobre h2 {
    padding: 1em;
    text-align: center;
    display: block;
    color: #006666;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.5em;   
}

.sobre bio {
    text-align: justify;
    font-size: 4em;
    color: #006666;
    /*margin-left: 10em;
    margin-right: 10em;*/
}

.sobre-jorgina {
    bortder-top: .2em solid #ccc;
    text-align: justify;
    font-size: 2em;
    color: #006666;
    /*margin-left: 10em;
    margin-right: 10em;*/
}

.avatar {
    border-radius: 50%;
    resize: both 50%;
    max-width: 12em;
    display: block;
    margin-left: auto;
    margin-right: auto;
    /*margin-top:2em;*/
}

.empresarq {
    float: left;
    max-width: 15%;
    display: inline-block;
}

.jorgina-bio {
    float: right;
    max-width: 25%;
}


/* ------------------------------------------------------ CONTATO ------------------------------- */

.contato {
    border-top: 0.2em solid #B2D1D1;
    min-width: 100%;
    max-width: 100%;
    background-color: #003D3D;
    color: white;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    padding: 5em 0 5em 0;
    margin-top: 10em;
    line-height: 1.5;
    height: 100vh;
}
.contato h2 { 
    text-align: center;
    margin-left: auto;
    text-transform: uppercase;
    font-size: 2em;
}

.contato p {
    font-size: 1em;
    max-width: 100%;
    display: inline-block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 1em 2em 1em 2em;
    border-radius: 1em;
    text-align: center;
    text-shadow: 1em;
    font-family: 'Open Sans', sans-serif;
}

.contato h2:hover {
    color:ghostwhite;
}

.contato p:hover {
    color:ghostwhite;

}

/* ------------------------------------------------------ PLAN ------------------------------- */

produto {
    min-height: cover;
    min-height: cover;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 2em;
    background-image: url('img/header-bg.jpg');
    background-color: #E6F0F0;
    height: 100vh;
}

tituloplanarq1 {
    margin-left: 15%;
    font-family: 'Exo', sans-serif;
    color: #197575;
    font-size: 3em;
    text-align: center;
    padding-top: 5em;
    padding-bottom: .2em;
}

produto h2 {
    margin-left: 15%;
    font-family: 'Open Sans', sans-serif;
    color: #197575;
    font-size: 2em;
    text-align: center;
    padding-top: 0em;
    padding-bottom: 5em;

    /*  ------------------------------------------------------ MAPA ------------------------------- */

    .google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

Answer 3 · 2015-04-15T01:55:33Z

April 15, 2015 1:55am

<div clas="empresarq"></div>

See if changing that spelling to "class" fixes your issue.

Also it looks like you have max-width on this set to 15% instead of 75% like you were wanting to do

Answer 4 · 2015-04-15T02:12:31Z

April 15, 2015 2:12am

ok gavin! thanks for the attention!

i'll try it and tell yo

Answer 5 · 2015-04-15T02:53:50Z

April 15, 2015 2:53am

still the same :(

Welcome to the Treehouse Community

Looking to learn something new?

André Felipe

André Felipe

First Project: Float Problem

5 Answers

Gavin Ralston

Gavin Ralston

Gavin Ralston

Gavin Ralston

André Felipe

André Felipe

Gavin Ralston

Gavin Ralston

André Felipe

André Felipe

André Felipe

André Felipe