Question 161242 in Html Question posted in
Some basic documentation can be found here.

How can I render a div inside another div in HTML?

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.

Tags:

3

Answers


  1. 0

    Your html structure is disturbing because you are have closing p tag with for h1 tag. Here is the updated 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</h1>
        <div class="go-button">

        </div>
    </div>
    Login or Signup to reply.
  2. 0

    In your code there is an error because you open an <h1> tag and close it with <p>

    which generates that a <p> element is created and this moves the <div> below

    I don’t know if this solves your problem because I don’t quite understand what result you want to achieve

    This answer has been translated with google because I don’t speak English well

    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search