0

Please help me to understand whats going on.

I have html - relevant code:

#sk_head {
  display: block;
}

.h_title {
  float: left;
}

.h_instr {
  float: right;
  font-size: 12px;
}

#sk_body {
  text-align: center;
  padding: 20px;
  display: block;
}

#skaiciuokle {
  text-align: left;
  display: inline-block;
}
<div id='sk_head'>
  <div class='h_title'>
    <h3>Title</h3>
    <h4>More less important title title</h4>
  </div>
  <div class="h_instr">
    <p><a href="{% url 'PGP_instrukcija' %}">Link to user guide</a></p>
  </div>
</div>

<form action="" method="post">
  <div id='sk_body'>
    <fieldset id="skaiciuokle">
      <table class="data_entry">
        /* table with form for entry data */
      </table>
    </fieldset>
  </div>

I expect page to display everything like this:

Example

But for some reason parent sk_head div is getting ignored and contend squeezes in between h_title and h_inst div's.

I am completely baffled since nearly identical (differences after <fieldset> level) set for another page is displaying everything as intended.

What I am missing here? Why parent div is getting ignored?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Gexas
  • 648
  • 4
  • 17

4 Answers4

1

Instead of float use display flex for sk_head.Element comes out of flow when float is given.

#sk_head {
    display: flex;
    justify-content: space-between;
}


.h_instr {
   
    font-size: 12px;
}

#sk_body {
    text-align: center;
    padding: 20px;
    display: block;
}

#skaiciuokle {
    text-align: left;
    display: inline-block;
}
<div id='sk_head'>
        <div class='h_title'>
            <h3>Title</h3>
            <h4>More less important title title</h4>
        </div>
        <div class="h_instr">
            <p><a href="{% url 'PGP_instrukcija' %}">Link to user guide</a></p>
        </div>
    </div>
    <form action="" method="post">
        <div id='sk_body'>
           <fieldset id="skaiciuokle">
               <table class="data_entry">
                   /* table with form for entry data */
               </table>
           </fieldset>
        </div>
tanvi korgaonkar
  • 363
  • 1
  • 6
1

You're displaying your container div as block where it should be inline-block (or even better, flex). See below for a fix:

#sk_head {
  display:inline-block;
  width:100%;
}

.h_title {
  float:left;
}

.h_instr {
  float:right;
}

#sk_form {
  display:block;
}
<div id='sk_head'>
  <div class='h_title'>
    <h3>Title</h3>
    <h4>More less important title title</h4>
  </div>

  <div class="h_instr">
    <p><a href="{% url 'PGP_instrukcija' %}">Link to user guide</a></p>
  </div>
</div>


<div id="sk_form">
  <form action="" method="post">
    <div id='sk_body'>
      <fieldset id="skaiciuokle">
        <table class="data_entry">
          /* table with form for entry data */
        </table>
      </fieldset>
    </div>
  </form>
</div>

JSFiddle

MattHamer5
  • 1,431
  • 11
  • 21
  • 1
    I don't recommend `display: inline-block;` because of it's inaccuracy. If you make 2 elements next to each other `width: 50%` and add `display: inline-block;` elements will go under each other, while with `float: left;` they will display next to each other. – Refilon Nov 25 '19 at 09:34
1

You can use flexbox as Tanvi says, but if you wish to keep the floating divs, you can add the following CSS to your file:

#sk_head::after {
  content: "";
  display: block;
  clear: both;
}
Refilon
  • 3,334
  • 1
  • 27
  • 51
1

The floating elements are not cleared before your content element. This means the space they are using is not being associated with sk_head, therefore sk_body can use it.

You could try something like this:

#sk_head::after { 
  content: "";
  display: block; 
  clear: both;
}

From: https://developer.mozilla.org/en-US/docs/Web/CSS/clear

ndresgarc
  • 142
  • 6