Aligning two blocks at the same level

HTML & CSS
1

I will start explaining my problem with the help of screenshots. Basically, I am trying to display a document and list of words(under Words header as shown on the right side of document panel) below. As shown below, a document panel on the left is displayed and Words header on the right side. As can be seen, the Words header is displayed somewhere at the middle position of the document which I don’t want. I want the words heard to display at the top on the right side next to the document header as shown in Image #2 below (which is without the document panel on the left.)

IMAGE #1:

971×652 10.1 KB

IMAGE #2

1055×353 5.78 KB

Just to explain how these document panel is displaying sometime and not displaying sometime (in case of Image #2). Just above the document there are around 10 rows of something , when a user clicks on any one row (depending upon which row was clicked), document is displayed (as shown in Image #1) and not displayed if there isn’t any document associated with it ( as shown in the Image #2 above).

Could anyone please explain me what I am doing wrong in the code below? I want the Words header next to the document at the same level as it is shown in the IMAGE #2

My HTML Code is as follows:

<div class="row">
           <div id="review-document" class="span12" >

              <div class="col-xs-12">
                  <div style="position: relative;" id="doc-left" class="document_block">
                      <div style="display:none;" id="doc-view-hdr">
                          <div id="review-doc-full-screen">
                              <a id="demog-expand-doc" title="view full screen" class="link exp-doc-link" href="#">details</a>
                          </div>
                      </div>
                      <div class="pagination">
                          <ul></ul>
                      </div>
                      <div id="doc-view" data-toggle="context" data-target="#context-menu"></div>
                 </div>
                 
                   <div style="display:none;"  id="doc-right" class="word_block">
                      <div id="word-header">Words</div>
                      <div id="words-lists">
                          <ul id="list-hrec" class="word-list unstyled">
                          </ul>
                      </div>
                      
                      
                  </div>
              </div>

        </div>
            
</div>

Here is my CSS :

#review-document{
    min-height: 300px;
}
#review-document #words-selected{
    width: 200px;
}

#doc-left #doc-view-hdr #review-doc-full-screen{
    float: right;
    padding:2px 2px 0 0;
}

.word_block {
  width: 100px;
  display: inline-block;
  text-align: center;
  margin-top: 40cm;
  height:150px;
}

.document_block {
     width: 800px;
     display: inline-block;
}


.row {
  width: 100%;
}

So basically, from the above HTML code the following two divs are representing document and words header block:

Div #1 :

<div style="position: relative;" id="doc-left" class="document_block">
                      <div style="display:none;" id="doc-view-hdr">
                          <div id="review-doc-full-screen">
                              <a id="demog-expand-doc" title="view full screen" class="link exp-doc-link" href="#">details</a>
                          </div>
                      </div>
                      <div class="pagination">
                          <ul></ul>
                      </div>
                      <div id="doc-view" data-toggle="context" data-target="#context-menu"></div>
                 </div>

Div #2:

<div style="display:none;"  id="doc-right" class="word_block">
                      <div id="word-header">Words</div>
                      <div id="words-lists">
                          <ul id="list-hrec" class="word-list unstyled">
                          </ul>
                      </div>
 </div>

Any adjustments I would need to make in the CSS classes for document_block and word_block ?

2

I think those are the divs you need to target.
They are siblings in your page and they are both set to inline-block so you should be able to vertical-align them.

Try the following

.word_block {
  width: 100px;
  display: inline-block;
  vertical-align: top; /*added this*/
  text-align: center;
  margin-top: 40cm; /*may need to adjust this*/
  height:150px;
}

.document_block {
     width: 800px;
     display: inline-block;
     vertical-align: top; /*added this*/
}
3

Thanks Ray. This works like a charm.

I actually was able to fix it by doing the following :

For Words block:

width: 100px;
  text-align: center;
  margin-top: 40cm;
  height:150px;
  float:right;

And for document block

width: 800px;
    
     float:left;

But using float was pushing the word block towards somewhat extreme right which wasn’t much appealing. With your approach, it looks exactly as I expected.

4

<off topic>

@Jack_Tauson_Sr, do you plan for your page to be responsive and thereby fit on small viewports? Unless you are using a grid framework of some type, you should concentrate on minimizing the use fixed widths and heights… before you “finish” your site and return asking us to help you convert it to a responsive site!

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.