CODEWITHSUNDEEP
htmlcss
Enguias
Enguias

Reputation: 73

Move a div inside a div with another div already in it

I hope it didn't sound too confusing, but basically what I want is to move that div with the buttons, highlighted in green, to the place highlighted in red, with the image on the left and the buttons on the center:

enter image description here

I searched in every place on the internet and all the solutions don't put me the div in the center, only on the far right or in any other place where is not supposed to be, so I'm hoping someone here could help me with this!

This is the HTML I have on that top part:

<body>
    <div id="topback">
        <div class="caixa_botoes">
            <button id="bot1" type="button">Resultados</button>
            <button id="bot1" type="button">Rankings</button>
            <button id="bot1" type="button">Partidas</button>
            <button id="bot1" type="button">Noticias</button>
        </div>
        <img class="logo" src="logo.png">

    </div>

And this is the CSS i have:

#topback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10%;
  background-color: #2a4158; 
  z-index: 100;
}

.logo{
  margin-top: 0.3%;
  height: 80%;
  width: 4.5%;
  border: 4px solid #22272c;
  margin-left: 5%;
}

.caixa_botoes{
  margin-top: 0.3%;
  display: block;
}

#bot1{
  border: none;
  color: #2a4158;
  background-color: #8c9ea3;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

I hope that someone can help me, thank you all in advance!

Upvotes: 0

Views: 158

Answers (3)

tord-s
tord-s

Reputation: 26

I suggest you to add the following:

.caixa_botoes{
  width: 60%;
  margin-left: 20%;
}

and

#bot1{
  padding: 15px 1.5%;
  margin: 1% 1%;
  width: 21%;
}

Upvotes: 1

Lime
Lime

Reputation: 276

You should probably start by adjusting the order of your HTML elements if that's an option:

<div id="topback">
   <img class="logo" src="logo.png">
   <div class="caixa_botoes">
      <button id="bot1" type="button">Resultados</button>
      <button id="bot1" type="button">Rankings</button>
      <button id="bot1" type="button">Partidas</button>
      <button id="bot1" type="button">Noticias</button>
   </div>
</div>

Those elements will appear in order so the image should be to the left (above in the the HTML) anyway. And then there are a lot of ways to proceed.

Does the #topback need to be position: absolute? That may be complicating things a bit.

Upvotes: 1

BennKingy
BennKingy

Reputation: 1593

This is what you want to use on the parent div:

display: flex

https://flexboxfroggy.com/ < Learn how to use flexbox here using this fun game, and you will be able to create any layout you want then :)

Upvotes: 1

Related Questions