Databases
StackOverflow2013
Postsdbo
POContent place holder on master page migrates when browser window is resized
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POContent place holder on master page migrates when browser window is resized
    text
    copied!<p>I have a content place holder on a master page set up that won't stay in its place when I resize the browser window. When I shrink the browser window, the content placeholder moves below the div it is supposed to be to the right of.</p> <p>Is this a matter of setting the position of the div in question to absolute? Or is there something I haven't taken into account?</p> <p>Thanks in advance</p> <pre><code>&lt;div class="header"&gt; &lt;h2&gt;Intranet&lt;/h2&gt; &lt;/div&gt; &lt;/div&gt; &lt;div&gt; &lt;div class="leftcontent"&gt; &lt;ul&gt; &lt;li&gt; &lt;a id="lnkbtnAddUpdate" href="javascript:__doPostBack(&amp;#39;ctl00$lnkbtnAddUpdate&amp;#39;,&amp;#39;&amp;#39;)"&gt;Add/Update Job Listing&lt;/a&gt;&lt;/li&gt; &lt;li&gt; &lt;a id="lnkbtnReview" href="javascript:__doPostBack(&amp;#39;ctl00$lnkbtnReview&amp;#39;,&amp;#39;&amp;#39;)"&gt;Review Applicants&lt;/a&gt;&lt;/li&gt; &lt;li&gt; &lt;a id="LinkButton3" href="javascript:__doPostBack(&amp;#39;ctl00$LinkButton3&amp;#39;,&amp;#39;&amp;#39;)"&gt;Interview Results&lt;/a&gt;&lt;/li&gt; &lt;li&gt; &lt;a id="LinkButton4" href="javascript:__doPostBack(&amp;#39;ctl00$LinkButton4&amp;#39;,&amp;#39;&amp;#39;)"&gt;Applicant Search&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="maincontent"&gt; &lt;div class="addupdate"&gt; &lt;div class="lbljobtitle"&gt; &lt;span id="ContentPlaceHolder1_lblJobTitle"&gt;Job Title&lt;/span&gt; &lt;/div&gt; &lt;div class="txtjobtitle"&gt; &lt;input name="ctl00$ContentPlaceHolder1$txtJobTitle" type="text" id="ContentPlaceHolder1_txtJobTitle" style="height:22px;width:250px;" /&gt; &lt;/div&gt; &lt;div class="lblemployeetype"&gt; &lt;span id="ContentPlaceHolder1_lblEmployeeType"&gt;Employee Type&lt;/span&gt; &lt;/div&gt; &lt;div class="txtemployeetype"&gt; &lt;input name="ctl00$ContentPlaceHolder1$txtEmployeeType" type="text" id="ContentPlaceHolder1_txtEmployeeType" style="height:22px;width:250px;" /&gt; &lt;/div&gt; &lt;div class="lbllocation"&gt; &lt;span id="ContentPlaceHolder1_lblLocation"&gt;Location&lt;/span&gt; &lt;/div&gt; &lt;div class="txtlocation"&gt; &lt;input name="ctl00$ContentPlaceHolder1$txtLocation" type="text" id="ContentPlaceHolder1_txtLocation" style="height:22px;width:250px;" /&gt; &lt;/div&gt; &lt;div class="lbljobdescription"&gt; &lt;span id="ContentPlaceHolder1_lblJobDescription"&gt;Job Description&lt;/span&gt; &lt;/div&gt; &lt;div class="txtjobdescription"&gt; &lt;input name="ctl00$ContentPlaceHolder1$txtJobDescription" type="text" id="ContentPlaceHolder1_txtJobDescription" style="height:160px;width:250px;" /&gt; &lt;/div&gt; &lt;div class="lblrequirements"&gt; &lt;span id="ContentPlaceHolder1_lblRequirements"&gt;Requirements&lt;/span&gt; &lt;/div&gt; &lt;div class="txtrequirements"&gt; &lt;input name="ctl00$ContentPlaceHolder1$txtRequirements" type="text" id="ContentPlaceHolder1_txtRequirements" style="height:160px;width:250px;" /&gt; &lt;/div&gt; &lt;div class="lblexperience"&gt; &lt;span id="ContentPlaceHolder1_lblExperience"&gt;Experience&lt;/span&gt; &lt;/div&gt; &lt;div class="txtexperience"&gt; &lt;input name="ctl00$ContentPlaceHolder1$txtExperience" type="text" id="ContentPlaceHolder1_txtExperience" style="height:22px;width:250px;" /&gt; &lt;/div&gt; &lt;input type="submit" name="ctl00$ContentPlaceHolder1$btnSubmit" value="Post Job" id="ContentPlaceHolder1_btnSubmit" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;div class="footer"&gt; &lt;h5&gt;Footer Goes Here&lt;/h5&gt; &lt;/div&gt; </code></pre> <p> </p> <pre><code>* { font-family: Tahoma; } .lbljobtitle, .lblemployeetype, .lbllocation, .lbljobdescription, .lblrequirements, .lblexperience { float: left; width: 200px; height: 20px; } .header { width: 100%; height: 86px; background-color: #053A54; color: #FFFFFF; } h2 { padding: 25px; float: left; margin-bottom: -20px; } h5 { text-align: right; } .leftcontent { width: 200px; height: 700px; float: left; } .leftcontent ul { list-style: none; } .leftcontent li { padding: 5px; } .leftcontent a { display: block; padding: 0.5em; border: 1px solid #CCC; color: #053A54; } .maincontent { width: 700px; } .footer { clear: both; color: #FFFFFF; background-color: #053A54; width: 100%; } .addupdate { float: left; position: absolute; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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