Como alinhar 2 DIV pelo HTML e CSS

HTML

CSS

HTML5

CSS3

01/06/2020

Não consigo alinhar uma DIV que criei para exibir o conteúdo da página.
Ainda estou aprendendo, por isso é um pouco complicado, mas conto com o apoio de vocês.

A DIV que criei para exibir o conteúdo da página está ficando abaixo da DIV do menu. Estou a alguns dias tentando resolver esse problema mas não consigo, por isso venho pedir a ajuda de vocês.

Segue o meu código:

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <link href="estilo.css" rel="stylesheet" type="text/css"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Template com MasterPage</title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div id="container">
        <div id="header">
            
                    <img src="img/banner.png"
        </div style="height: 100px; width: 674px">
        
         A DIV BANNER É O MENU
        <div id="banner">
            <asp:ContentPlaceHolder ID="cphLeftNavigation" runat="server" />
        </div>

        A DIV CONTENT É O ESPAÇO PARA O TEXTO DO SITE  ELA DEVE FICAR DO LADO DIREITO DO MENU
        <div id="content">
            <asp:ContentPlaceHolder ID="cphContent" runat="server" />
        </div>
        
        
        <div id="footer">
                <p>Conteúdo do Rodapé</p>
           <asp:ContentPlaceHolder ID="cphFooter" runat="server" />
        </div>
        </div>
       </form>
</body>
</html>



Já o conteúdo do meu arquivo CSS é esse:

.menu {
    width: 200px
}

.menu ul {
    list-style: none;
    padding-left: 0px; 
}

    .menu li {
        border: 1px solid black;
        padding: 5px;
        padding-left: 20px;
        font-size: 16px;
        background-color: #6f4e37
    }

.menu a {
    color: white;
    text-decoration: none;
}

.menu li:hover{
    background-color:chocolate;
}



#container {
    width: 673px;
    border-width: 1px;
    border-color: Black;
    border-style: solid;
    margin: 0px auto;
}

#header {
    color: #FFFFFF;
    width: 221px;
    height: 100px;
    background-color: #8B8970;
}

#banner {
    width: 213px;
    height: 372px;
    margin-top: 5px;
    background-color: #8B8970;
    color: #FFFFFF;
    padding: 4px;
}

#content {
    width: 446px;
    float: right;
    height: 380px;
    margin-top: 5px;
    background-color: #CDC9A5;
}

#footer {
    background-color: #EEE9BF;
    padding: 12px;
    width: 649px;
    color: #000000;
    font-size: 90%;
    text-align: center;
    clear: both;
    border-top: 5px;
    border-style: solid;
    border-color: #FFFFFF;
}

.img-index {
    width: 103px;
    height: 35px;
}
Thiago Cunha

Thiago Cunha

Curtidas 0

Respostas

Johnny-walker

Johnny-walker

01/06/2020

Este post já tem dois meses, mas você conseguiu revolver seu problema?
GOSTEI 0
POSTAR