Databases
StackOverflow2013
Postsdbo
POHow to keep div's always at full width?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to keep div's always at full width?
    primarykey
    data
    text
    <p>Is there a way to prevent a DIV from cutting out from a dynamic filed content? when content is large enough it stays full width and zooms fine but when it's small it breaks off from top group. </p> <p>Here is a copy of my html &amp; css:</p> <pre><code>&lt;style&gt; #title{ font-family: Arial; font-size: 1.5em; font-weight: bold; text-align: center; background: beige; padding: 7px 50px 7px 50px; margin: 10px 0px 0px 0px; /* L&amp;R margins need to be 0px */ } #box1{ /* Outer Box */ float: left; font-size: 1em; text-align: justify; background: beige; margin: 0px; /* L&amp;R margins need to be 0px */ padding: 0px 50px 10px 50px; } #box2{ /* Inner Box */ font-family: Arial; float: right; width: 50%; font-weight: bold; font-size: 1em; text-align: justify; background: beige; margin: 0px; /* L&amp;R margins need to be 0px */ padding: 0px 0px 0px 50px; display: block; } #box3{ /* Footnotes */ margin: 0px; float: left; font-size: 1em; text-align: justify; background: beige; padding: 0px 50px 30px 50px; border-radius: 0px 0px 15px 15px; } #footnote_columns{ display: block; overflow:hidden; /*columns: auto auto; /* column-count: auto column-width: auto; */ column-fill: balance; /* not working!!! */ column-count: 3; -moz-column-count: 3; -webkit-column-count: 3; column-width: auto; -moz-column-width: auto; -webkit-column-width: auto; column-gap: 2em; -moz-column-gap: 2em; -webkit-column-gap: 2em; } &lt;/style&gt; &lt;!-- ====================== Page Title ===================== --&gt; &lt;div id='title'&gt; &lt;HR&gt; 'Title' centered &amp; full width &lt;HR&gt; &lt;/div&gt; &lt;!-- ============ text box inside text box ================ --&gt; &lt;div id="box1"&gt; &lt;!-- Left Side --&gt; &lt;div id="box2"&gt; &lt;!-- Right Side --&gt; &lt;p&gt; INNER Box2 text: " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed nibh eu velit iaculis auctor non ac magna. In at enim quis mi aliquam vestibulum imperdiet eu magna. Ut aliquet arcu at felis dapibus euismod. Suspendisse dolor turpis, faucibus quis mollis vitae, iaculis vel urna. Integer sit amet dui malesuada justo facilisis rutrum sed vel neque. Cras condimentum est sit amet mi dapibus convallis. Donec molestie euismod velit id pharetra. Praesent sit amet eros at quam ullamcorper sodales. Aenean ligula dui, ultricies quis commodo ut, lobortis eu justo. Nulla dolor augue, vulputate at placerat in, ornare et purus. " &lt;/p&gt; &lt;HR&gt; &lt;/div&gt; &lt;p&gt; OUTER Box1 text: " Etiam at pretium urna. Morbi condimentum consequat nisi, nec pulvinar tellus fermentum at. Cras ut sodales ante. Sed feugiat sem eget eros lobortis sit amet porttitor mauris tempus. Sed eros est, placerat at sollicitudin quis, scelerisque ac dolor. Proin mollis euismod condimentum. Morbi eget tortor justo, eu vestibulum orci. Pellentesque eu ante a nunc adipiscing sodales dictum vitae eros. Sed tellus mauris, volutpat non vulputate ut, vulputate ut orci. Vivamus facilisis ipsum a tellus gravida pellentesque. Nam risus magna, eleifend dignissim porttitor et, sagittis quis nisl. Sed eget lorem magna. Sed sed imperdiet elit. Sed vulputate dapibus tellus, nec scelerisque risus hendrerit quis. Fusce aliquet erat non nibh egestas posuere. Aliquam ipsum velit, venenatis vel dictum ac, luctus nec sapien. In hac habitasse platea dictumst. Vivamus a elit augue. Integer pellentesque enim sit amet sem condimentum ut tincidunt nunc mollis. Cras in tellus eget dui pellentesque adipiscing. In varius ullamcorper felis, vitae sagittis turpis rutrum in. Aliquam consectetur consectetur erat, quis tristique magna laoreet id. Etiam orci arcu, ultricies eget interdum non, mollis quis est. Mauris odio lacus, tempus at porta quis, laoreet porta tortor. " &lt;HR&gt; &lt;/div&gt; &lt;div id='box3'&gt; &lt;div id='footnote_columns'&gt; &lt;p&gt; FOOTNOTE Box3 text: " Vivamus egestas tempor molestie. Morbi scelerisque nunc non eros ultrices volutpat. Suspendisse potenti. Sed lobortis, odio vitae pharetra dapibus, risus turpis scelerisque risus, a dapibus dui ante sed ante. " &lt;/p&gt; &lt;/div&gt; &lt;HR&gt; &lt;/div&gt; &lt;!-- ======================================================= --&gt; </code></pre> <p>Example 1 works - has plenty of txt - </p> <p>Example 2 breaks - when you zooming -</p> <p>(1) <a href="http://jsfiddle.net/NuxWD/1/" rel="nofollow">http://jsfiddle.net/NuxWD/1/</a> - full text</p> <p>(2) <a href="http://jsfiddle.net/NuxWD/2/" rel="nofollow">http://jsfiddle.net/NuxWD/2/</a> - try zooming, notice footnote</p> <p>(3) <a href="http://jsfiddle.net/NuxWD/3/" rel="nofollow">http://jsfiddle.net/NuxWD/3/</a> - small amount of txt in footnote</p> <p>(4) <a href="http://jsfiddle.net/NuxWD/4/" rel="nofollow">http://jsfiddle.net/NuxWD/4/</a> (5) <a href="http://jsfiddle.net/NuxWD/5/" rel="nofollow">http://jsfiddle.net/NuxWD/5/</a> - everything breaks!</p> <p>Need this for dynamic content. If I remove the BR in example (4) the frame stays fine;</p> <p><strong>How can frame remain in full width even when paragraphs are short?</strong></p> <ul> <li>Notice bottom row, the Footnote, try adjusting amount of txt; or zoom out</li> </ul> <p>IE does not even column footnote at all.</p> <p><strong>Why is the title not affected at all whether have smalls amount of txt or you zoom out ?</strong></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USAsh501
    1. USAsh501
    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. This table or related slice is empty.
    1. VO
      singulars
      1. POHow to keep div's always at full width?
      1. This table or related slice is empty.
      1. VTModeratorReview
    1. COPlease, see the documentation of DIV and SPAN: http://www.w3schools.com/tags/tag_span.asp and http://www.w3schools.com/tags/tag_div.asp
      singulars
      1. POHow to keep div's always at full width?
      1. USLéo Léopold Hertz 준영
    2. COYou don't have a lot of control (if any) for styling when your user uses default browsing functionality for zooming in/out.
      singulars
      1. POHow to keep div's always at full width?
      1. USChristopher Marshall
    3. COThanks for reply, it's just easy to isolate problem when zooming... the issue is that when there isn't much dynamic txt injected into div it just cuts out from the width. The title with little txt stays full width consistently. The main txt and footnote only when filled with txt? why the div's have the same settings! - I'm obviously missing something! - thanks for helping...
      singulars
      1. POHow to keep div's always at full width?
      1. USAsh501
 

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