Databases
StackOverflow2013
Postsdbo
POBlocks in margin layout in HTML and CSS
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBlocks in margin layout in HTML and CSS
    primarykey
    data
    text
    <p>My web page is a discussion of another document, page by page. I want to follow the structure of the original document (with headings, sub headings and paragraphs), but also have the page number (or page ranges) appear in a 120px margin, just to the left of the first paragraph on that page(s) that I am discussing.</p> <p>So far, I have roughly what I want. The main discussion is inside a DIV tag, with the "description". The page number marginalia is kept inside a DIV tag with the class "page".</p> <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;HTML&gt; &lt;HEAD&gt; &lt;META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=windows-1251"&gt; &lt;TITLE&gt;Blurble Blurble Blurble Blurble&lt;/TITLE&gt; &lt;STYLE&gt; DIV.page { border-style: solid; border-width:medium; float:left; position:relative; left:-100px; width:70px; padding:2px; } DIV.description { position:relative; left:100px; } &lt;/STYLE&gt; &lt;/HEAD&gt; &lt;BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#FF00FF"&gt; &lt;H1&gt;Blurble Blurble Blurble Blurble Blurble&lt;/H1&gt; &lt;DIV CLASS="description"&gt; &lt;H2&gt;Blurble Blurble&lt;/H2&gt; &lt;P&gt; Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble . &lt;/P&gt; &lt;P&gt; Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble . &lt;/P&gt; &lt;H2&gt;Blurble Blurble&lt;/H2&gt; &lt;DIV CLASS="page"&gt;Blurble 1&lt;/DIV&gt; &lt;P&gt; Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble. &lt;/P&gt; &lt;P&gt; Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble . &lt;/P&gt; &lt;H2&gt;Blurble Blurble&lt;/H2&gt; &lt;DIV CLASS="page"&gt;Blurble 2&lt;/DIV&gt; &lt;P&gt; Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble. &lt;/P&gt; &lt;P&gt; Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble Blurble . &lt;/P&gt; &lt;/DIV&gt; &lt;/BODY&gt; &lt;/HTML&gt; </code></pre> <p>The problem here is that wherever the page DIV appears, there is a gap between that DIV element and a portion of the P element - a chunk of whitespace. It seems as if the browser thinks that the page DIV element should be sitting in that space, so it is wrapping the text around where it thinks the DIV element should be.</p> <p>Add to that, the browser always should the horizontal scroll bar to scroll through the extra 100px of extra space it thinks it should add to the window.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMark Bertenshaw
    1. USMark Bertenshaw
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POBlocks in margin layout in HTML and CSS
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POBlocks in margin layout in HTML and CSS
      1. USNix
      1. VTFavorite
    3. VO
      singulars
      1. POBlocks in margin layout in HTML and CSS
      1. USJames Coyle
      1. VTFavorite
    1. COCould you provide a jsfiddle of your code so we are able to see the reported problem?
      singulars
      1. POBlocks in margin layout in HTML and CSS
      1. USAnthony Forloney
    2. COI had never heard of jsfiddle until now :-) Anyhow, I am posting a full HTML example above.
      singulars
      1. POBlocks in margin layout in HTML and CSS
      1. USMark Bertenshaw
    3. COjsfiddle is a very resourceful tool for other people to view your code/markup to see the problem. It will definitely become handy in the future for any questions which may come up.
      singulars
      1. POBlocks in margin layout in HTML and CSS
      1. USAnthony Forloney
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload