In CSS, display inline-block is acting like display block

Question

What I want to have is two divs side-by-side and within one of them is an image and in the other is two divs, one above the other.

This happens to be a Wordpress theme, but I'm pretty sure this is basic CSS question.
The Wordpress stack exchange told me it was off-topic.

Call the left div #divL and the right div #divR.

I found an answer on SO mentioning that I should set display of #divL and #divR to inline-block. I can get this to work on a test html file that I created in isolation but it doesn't work in the wordpress header. Specifically the divs in the wordpress header #divL and #divR act as if they had display: block rather than being positioned side-by-side.

Changing them to display: inline does put them side-by-side but then it doesn't work to stack two divs within #divR.

I'll replicate here some of the code in the Wordpress header. Note that I'm going to simplify this by omitting the stacked divs inside #divR, because the symptom is obvious without that.

the following is what I'm using to try to get #divL and #divR to display side-by-side.

#divL { display: inline-block; }
#divR { display: inline-block; }

<header class="site-header">
      <div class="wrap">
        <div class="title-area">
          <div id="divL">
            <img id="logo-img" class="attachment-full size-full">
          </div>
          <div id="divR">Some text that should go on right</div>
        </div>  
        <nav> .... </nav>
      </div>
</header>

But they display one above the other.

Note that this actually does work to get them side-by-side, but then the stacked divs inside #divR don't work as intended:

  #divL { display: inline; }
  #divR { display: inline; }

<header class="site-header">
    <div class="wrap">
      <div class="title-area">
        <div id="divL">
          <img id="logo-img" class="attachment-full size-full">
        </div>
        <div id="divR">Some text that should go on right</div>
      </div>  
      <nav> .... </nav>
    </div>
  </header>

There is a lot of CSS on these other elements but I'm not sure which of it is important to this question so I'll wait for someone to comment and tell me what I should include.

did you set a width for these two inline-block DIVs? (i.e. less than 50%) — Johannes
– Johannes, Commented Jan 7, 2019 at 21:44
Most likely the divs are working as intended by the CSS, but a property value is missing or probably set by another rule — IvanS95
– IvanS95, Commented Jan 7, 2019 at 21:45
inline-block does not "auto size" you need to specify the width. You may also want to investigate flex, css grids and css tables (NOT html tables) to see if any of those options fit your needs better. — Jon P
– Jon P, Commented Jan 7, 2019 at 21:56
@JonP is there a tutorial on CSS layout that might help me? I'm an experienced programmer and I can handle complex ideas, but I don't have much HTML/CSS experience. I'd like to go through all the layout options and possibilities in moderate depth especially covering things that are a little more complex and less obvious. — composerMike
– composerMike, Commented Jan 8, 2019 at 3:48

Johannes · Accepted Answer · 2019-01-08 00:16:55Z

As I wrote in my comment, you should set widths for those ìnline-blocks, that should basically do what you are after.

But as an alternative you can also use display: flex; on the container DIV. This can be done rather simple, but in the snippet below I added some additional settings to define a certain width for the two DIVs and to center the contents in these DIVs both horizontally and vertically (by also making the child elements flexboxes with flex-directon: column. For the rest of the settings see the code below.

.title-area {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.title-area>* {
  width: 40%;
  border: 1px solid green;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<header class="site-header">
  <div class="wrap">
    <div class="title-area">
      <div id="divL">
        <img id="logo-img" src="https://placehold.it/200x150/fa0" class="attachment-full size-full">
      </div>
      <div id="divR">Some text that should go on right</div>
    </div>
    <nav> .... </nav>
  </div>
</header>

glassblowerscat · Accepted Answer · 2019-01-07 22:05:12Z

1

Here's an example of what would work:

<header class="site-header">
  <div class="wrap">
    <div class="title-area">
      <div id="divL">
        <img id="logo-img" class="attachment-full size-full" />
      </div>
      <div id="divR">
        <div id="divTR">Some text that should go on top right</div>
        <div id="divBR">Some text that should go on bottom right</div>
      </div>
    </div>
    <nav>....</nav>
  </div>
</header>

And the CSS:

#divL {
  display: inline-block;
  width: 49%;
}

#divR {
  display: inline-block;
  width: 49%;
}

But also Jon P is right; it might be worth your while to investigate one of the newer methods for dynamically spacing and sizing content.

answered Jan 7, 2019 at 22:05

glassblowerscat

896 bronze badges

Collectives™ on Stack Overflow

In CSS, display inline-block is acting like display block

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related