How can i get this div to render inside another div?

May 11, 2023

I need to get a certain div inside another div, by using HTML and CSS. I placed the div go-button in the initial-bar, but won’t work. Anyways, here’s my code.

body {
    background: #2a2a2a;
    color: white;
    font-family: sans-serif;
}
.p-title-bar {
    color: #FFFFFF;
    font-size:  32px;
    line-height: 18px;
    font-style: oblique;
}
.go-button {
    background-color: #207000;
    border-radius: 10px;
    width: 100px;
    height: 50px;
}

<div class="initial-bar" style="background-color: #1a1a1a; width: 1440px; height: 90px;">
    <div class="text-title-spacing">
        &nbsp;
    </div>
        <h1 class="p-title-bar">&nbsp;&nbsp;.HUS</p>
    <div class="go-button">

    </div>
</div>

It shows the div go-button out of the div initial-bar, How can i get the div go-button in the div initial-bar.

I tried to get it with CSS text-align in center, and align in center also. I expected the div go-button to be inside the div initial-bar. And it resulted on a green 100×50 pixels square with a border-radius of 10 pixels.

>Solution :

As noted, your h1 is being closed with a </p> which is fixed below. h1’s are typically block elements, change this one to inline or inline-block. Then change the display on the go button to inline-block.

That said, will solve your problem but a better way (IMO) is to use flexbox

body {
    background: pink;
    color: white;
    font-family: sans-serif;
}
.p-title-bar {
    color: red;
    font-size:  32px;
    line-height: 18px;
    font-style: oblique;    
    display:inline-block;
}
.go-button {
    background-color: #207000;
    border-radius: 10px;
    width: 100px;
    height: 50px;
    display:inline-block;
}

<div class="initial-bar" style="background-color: lightgreen; width: 1440px; height: 90px;">
    <div class="text-title-spacing">
        &nbsp 
    </div>
        <h1 class="p-title-bar">&nbsp;&nbsp;.HUS</h1>
    <div class="go-button">

    </div>
</div>

body {
  background: pink;
  color: white;
  font-family: sans-serif;
  
}

.p-title-bar {
  color: red;
  font-size: 32px;
  line-height: 18px;
  font-style: oblique;
  
}

.go-button {
  background-color: #207000;
  border-radius: 10px;
  width: 100px;
  height: 50px;
  
}

.initial-bar{
display:flex;
justify-content:space-between;
align-items:center;}

<div class="initial-bar" style="background-color: lightgreen;  height: 90px;">
  
  <div class="text-title-spacing">
    &nbsp
  </div>
  
  <h1 class="p-title-bar">&nbsp;&nbsp;.HUS</h1>
  
  <div class="go-button">

  </div>
</div>