Create a div that contains other online Ivs

Asked

Viewed 547 times

0

I need help creating a div that can include other horizontal line Ivs. The goal is to create a space at the top of the site header. Can someone help me?

<div id="header">
        <div class="top_header">        
            <!-- SELECT YOUR LANGUAGE -->
                <div class="linguagem" onclick="abrirlayer('layer1')">
                    <h1>SELECT YOUR LANGUAGE v</h1>
                </div>
            <!-- SELECT YOUR LANGUAGE -->
            <!-- PESQUISA -->                                                                                                           
                <div class="pesquisa">
                    <form action="action_page.php">
                    <input type="text" name="pesquisa" class="caixatexto">
                    <input type="image" value="submit" src="imagens/lupa.png" alt="submit Button">  
                </div>
            <!-- PESQUISA -->

        </div>
</div>


#header .top_header{
    background-color: blue;
    width: 100%;
    height: 25%;
    position: relative;
    margin-top: -0.6em;
    white-space: nowrap;
}
.top_header .linguagem{
    background-color: green;
    height: 100%;
    width: 15%;
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.linguagem h1{
    position: relative;
    padding-top: 5%;
    padding-left: 2%;
    font-size: 1vw;
    text-align: left;
    color: rgb(225,225,225);
}
.top_header .pesquisa{
    background-color: yellow;
    height: 100%;
    width: 15%;
    margin-left: 50%;
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.top_header .pesquisa form{
    position: relative;
    height: 100%;   
}
.top_header .pesquisa img{
    position: relative;
    height: 100%;
}

inserir a descrição da imagem aqui

html css div

  • Can you explain it better? Do you have an image of what you’re looking for? Have you tried adding Ivs to this HTML and give float or display inline?

  • Already has image, thanks in advance.

1 answer

0


It wasn’t very clear your question, but I think you want something like this:

inserir a descrição da imagem aqui

To do this, just create a div inside the other with position: relative, as an example:

CSS:

#box1 {
position: relative;
width:300px;
height:110px;
margin-left: 15%;
border: 1px red solid;
top: 0px;
background-color: orange;
}

#box2 {
position: relative;
width:300px;
height:110px;
margin: 0 auto;
margin-left: 350px;
border: 1px red solid;
top: 0px;
background-color: blue;
}

#box3 {
position: relative;
width:300px;
height:110px;
margin: 0 auto;
margin-left: 350px;
border: 1px red solid;
top: 0px;
background-color: black;
}

HTML:

<html>
    <link rel="stylesheet" type="text/css" href="teste.css"> 
    <body>
    <div id="box1"> 
        <div id="box2"> 
            <div id="box3"> </div>
        </div>
    </div>
    </body>
</html>

Browser other questions tagged html css div

You are not signed in. Login or sign up in order to post.