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:
IMAGE #2
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 div
s 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
?