I am trying to keep my banner+navbar in the center, but whenever I resize the window, the right side collapses while the left doesn't move. This results in the image+banner to be on the right side of the screen, while there is still a margin on the left. How am I able to collapse both margins equally when I resize the window so that the image+banner are able to stay in the center.  Below is my code  index  &lt;div class="box"&gt;   &lt;?php include("navigation.html");?&gt; &lt;/div&gt;   Nav    div.box {   position: relative;   margin: 0;   padding: 0;   height: auto;   width: 52%;   left: 25%;   min-width: 999px;   background-color: #555555;   z-index: -1; }  body, html {   margin: 0px;   padding: 0px; }  ul.parent {   margin: 0;   padding: 0;   border: 0;   list-style-type: none; }  div.image1 {   float: left;   height: auto; }  img.imageHome {   width: 100%;   height: auto;   position: relative; }  div.navi {   list-style-type: none;   position: absolute;   display: flex;   float: left; } &lt;body&gt;   &lt;ul class="parent"&gt;     &lt;li&gt;       &lt;div&gt;&lt;img src="Images/banner2.png" class="image1"&gt;&lt;/div&gt;     &lt;/li&gt;     &lt;li&gt;       &lt;div class="navi"&gt;         &lt;a href="Home.php"&gt;&lt;img src="Images/home.png" onMouseOver="this.src='Images/home2.png'" onMouseOut="this.src='Images/home.png'" class="imageHome"&gt;&lt;/a&gt;         &lt;div class="dropdown"&gt;           &lt;img src="Images/webtoons.png" onMouseOver="this.src='Images/webtoons2.png'" onMouseOut="this.src='Images/webtoons.png'" class="imageHome"&gt;           &lt;div class="dropdown-content"&gt;             &lt;a href="yaoi.php"&gt;&lt;img src="Images/yaoibl.png" onMouseOver="this.src='Images/yaoibl2.png'" onMouseOut="this.src='Images/yaoibl.png'" class="imageHome"&gt;&lt;/a&gt;             &lt;a href="fanfic.php"&gt;&lt;img src="Images/nonbl.png" onMouseOver="this.src='Images/nonbl2.png'" onMouseOut="this.src='Images/nonbl.png'" class="imageHome"&gt;&lt;/a&gt;           &lt;/div&gt;         &lt;/div&gt;         &lt;div class="dropdown"&gt;           &lt;img src="Images/media.png" onMouseOver="this.src='Images/media2.png'" onMouseOut="this.src='Images/media.png'" class="imageHome"&gt;           &lt;div class="dropdown-content"&gt;             &lt;a href="blcd.php"&gt;&lt;img src="Images/blcd.png" onMouseOver="this.src='Images/blcd2.png'" onMouseOut="this.src='Images/blcd.png'" class="imageHome"&gt;&lt;/a&gt;             &lt;a href="Yaoi.php"&gt;&lt;img src="Images/pictures.png" onMouseOver="this.src='Images/pictures2.png'" onMouseOut="this.src='Images/pictures.png'" class="imageHome"&gt;&lt;/a&gt;             &lt;a href="Yaoi.php"&gt;&lt;img src="Images/videos.png" onMouseOver="this.src='Images/videos2.png'" onMouseOut="this.src='Images/videos.png'" class="imageHome"&gt;&lt;/a&gt;           &lt;/div&gt;         &lt;/div&gt;         &lt;div class="dropdown"&gt;           &lt;img src="Images/scanlation.png" onMouseOver="this.src='Images/scanlation2.png'" onMouseOut="this.src='Images/scanlation.png'" class="imageHome"&gt;           &lt;div class="dropdown-content"&gt;             &lt;a href="yaoi.php"&gt;&lt;img src="Images/scanlationteam.png" onMouseOver="this.src='Images/scanlationteam2.png'" onMouseOut="this.src='Images/scanlationteam.png'" class="imageHome"&gt;&lt;/a&gt;             &lt;a href="fanfic.php"&gt;&lt;img src="Images/cbaw.png" onMouseOver="this.src='Images/cbaw2.png'" onMouseOut="this.src='Images/cbaw.png'" class="imageHome"&gt;&lt;/a&gt;           &lt;/div&gt;         &lt;/div&gt;         &lt;a href="contact.php"&gt;&lt;img src="Images/aboutus.png" onMouseOver="this.src='Images/aboutus2.png'" onMouseOut="this.src='Images/aboutus.png'" class="imageHome"&gt;&lt;/a&gt;       &lt;/div&gt;     &lt;/li&gt;   &lt;/ul&gt; &lt;/body&gt;     edit: jsfiddle:
42
How can I horizontally center a &lt;div&gt; within another &lt;div&gt; using CSS? &lt;div id=&quot;outer&quot;&gt;   &lt;div id=&quot;inner&quot;&gt;Foo foo&lt;/div&gt; &lt;/div&gt;
555
I have a div with two images and an h1. All of them need to be vertically aligned within the div, next to each other. One of the images needs to be absolute positioned within the div. What is the CSS needed for this to work on all common browsers? &lt;div id=&quot;header&quot;&gt;   &lt;img src=&quot;..&quot; &gt;&lt;/img&gt;   &lt;h1&gt;testing...&lt;/h1&gt;   &lt;img src=&quot;...&quot;&gt;&lt;/img&gt; &lt;/div&gt;
61807
Shouldn't the twoside option produce a wider margin at the binding/spine edge, rather than the other way around? I'm using \documentclass[twoside]{report}.
103725
In the new Help Center, we have a banner which is the same as the banner we already had on the homepage for users that weren't logged in. This is the homepage:    And this is the help center:    I'm going to find this banner very annoying. I'm experienced enough to know that.   Could the banner in the help center get a minify-button as well? Something that remembers that he shouldn't show the banner, for always?
81099
I am tryin to create expand and collapse functionality between pageblocks.The scenario is when i click the collapse button in one pageblock ,it should render another pageblock.How this can be achieved ? I tried using java script but the pageblock is not displaying properly. My current code is   &lt;apex:page &gt;   &lt;apex:includeScript value="{!$Resource.jqueryCollapse}"/&gt;   &lt;apex:includeScript value="{!$Resource.jqueryCollapse1}"/&gt;    &lt;apex:includeScript value="{!$Resource.jqueryCollapse2}"/&gt;    &lt;apex:form &gt;    &lt;html&gt;    &lt;head&gt;     &lt;script type="text/javascript"&gt;      $(function(){     $(".header").click(function () {        alert("Loopafe");    $header = $(this);        $content = j$header.next();         $content.slideToggle(100, function () {                 $header.text(function () {                     return $content.is(":visible") ? $(this).attr("src",      "https://c.ap1.visual.force.com/resource/1404298250000/Minus") : $(this).attr("src", "https://c.ap1.visual.force.com/resource/1404298250000/plusimg");     });  });     });  });  &lt;/script&gt;  &lt;style&gt;    .container .content {   display: none;  padding : 5px;  }  &lt;/style&gt; &lt;/head&gt; &lt;apex:pageBlock &gt; &lt;apex:pageBlockSection columns="10" collapsible="True" &gt;            &lt;div class="container"&gt;     &lt;img   src="XXg"class ="   header " /&gt;           &lt;div class="content"&gt;          &lt;apex:pageBlock &gt;            &lt;apex:pageBlockSection columns="5"  &gt;         &lt;apex:outputLabel value="Collapse"  id="theSecond1"/&gt;         &lt;apex:inputText /&gt;         &lt;/apex:pageBlockSection&gt;                     &lt;/apex:pageBlock&gt;    &lt;/div&gt;    &lt;/div&gt;         &lt;apex:outputText value="First" id="theFirst"/&gt;         &lt;apex:InputText /&gt;      &lt;/apex:pageBlockSection&gt;     &lt;/apex:pageBlock&gt; &lt;body&gt;  &lt;/body&gt;  &lt;/html&gt;    &lt;/apex:form&gt;   &lt;/apex:page&gt;
48027
I have a dual monitor setup, and I recently played around with the positioning settings, and some of my single window applications do the favour of preserving where they were last closed, and opening in the same position later. Unfortunately, that now places them out of the viewable area of my screens!  Is there some way to force a particular window into the viewable area?
41280
The following picture was taken from  on Stack Overflow.    As you can see, the 54k count fits centered in its container, but for counts greater than 99k, the count is no longer centered.  I'm requesting that div.answer-votes tags be made flexible width to allow for votes totaling 100k or greater.
44881
Update  A month Several months later, a new top bar, and the bug still exists. An answer has already been posted that would fix the bug, so is this something that the dev team plans on fixing?  There are also a host of other problems caused by this, especially on the  and . Again, this would be fixed with  html{min-width:1000px;}   There is a slight bug with small windows on both the new meta and main site(s)?, shown here. The problem is that the top bar coloring doesn't stretch across when you resize and scroll left or right.        On Meta, when a horizontal scroll bar is needed, the black background will only be as wide as the width of the viewport, but when you scroll the coloring will not shift.  To reproduce:   Make screen as large as possible, or wait until the menu bar starts expanding Make it smaller and smaller until horizontal scrollbar appears, then scroll left and right.
93953
Writing my thesis and this drives me mad. I:   place images,  add captions to them,  ..and anchor (see pink arrow) them to relevant text, see image:     (ignore here that the image falls off the page to the right)  Then I write more, and the image fall out of the text box and the page itself, like so:    (ignore here that the image falls off the page to the right)  I have fiddled endlessly with the "anchored object options" without any of that helping whatsoever.  Clearly what I want is InDesign to accept the anchor, but when the image lands between pages, to choose either. As long as the images stays on a page I am happy.   I have trawled piles of tuts, but none address this. Anyone?  (I have automatic addition of pages; there are no manual text-box connecting)  ___________________________________________________________  Edit  @CAI answer below aaaaalmost gets me there. Here is the problem now. I anchor the image – red circle is the anchor:   I then write more, above so the text and image moves down. BUT: I get text (from before the anchor) behind the image before it shifts to next page as it should.   I have changed transparency so you see:    Soo close... any suggestions?
2394
In most windows desktops the minimize, maximize and restore buttons for a window are placed in the windows decoration on the top right. However, MacOS and now Gnome in Ubuntu have placed those buttons on the left.  What is the important aspect when deciding where to place them? Is user expectation from previous experience the most important aspect, or are there other independent aspects that relate to where the user would first look automatically? Is there a difference for localizations where the letters are written from left to right, or from right to left?
1077
I have a div 200 x 200 px. I want to place a 50 x 50 px image right in the middle of the div.   How can it be done?  I am able to get it centered horizontally by using text-align: center for the div. But vertical alignment is the issue..
81769
When my browser renders the following test case, there's a gap below the image. From my understanding of CSS, the bottom of the blue box should touch the bottom of the red box. But that's not the case. Why?  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt; &lt;head&gt;&lt;title&gt;foo&lt;/title&gt;&lt;/head&gt; &lt;body&gt;   &lt;div style="border: solid blue 2px; padding: 0px;"&gt;    &lt;img alt='' style="border: solid red 2px; margin: 0px;"    src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png" /&gt;   &lt;/div&gt;  &lt;/body&gt; &lt;/html&gt;
104040
&lt;div aria-hidden="false" aura:id="newClientSectionId" role="dialog" class="slds-modal slds-modal--large slds-fade-in-open slds-hide"       style="width: 60%; margin: auto; "&gt;     &lt;div class="slds-m-bottom--xx-large"&gt;&lt;/div&gt;     &lt;div class="slds-modal__container"&gt;         &lt;div class="slds-modal__header"&gt;             &lt;button class="slds-button slds-button--icon-inverse slds-modal__close" onclick="{!c.showModalBox}"&gt;                 &lt;span class="slds-assistive-text"&gt;Close&lt;/span&gt;             &lt;/button&gt;             &lt;h2 class="slds-text-heading--medium"&gt;Create Opportunity&lt;/h2&gt;         &lt;/div&gt;         &lt;div class="slds-modal__content slds-p-around--medium"&gt;             &lt;div class="slds-m-top--xx-large"&gt;&lt;/div&gt;         &lt;/div&gt;         &lt;div class="slds-modal__footer"&gt; &lt;button class="slds-button slds-button--neutral" onclick="{!c.showModalBox}"&gt;Cancel&lt;/button&gt;             &lt;ui:button class="slds-button slds-button--brand" press="{!c.saveOpportunity}" label="Save" /&gt;         &lt;/div&gt;     &lt;/div&gt; &lt;/div&gt;  &lt;div class="slds-backdrop slds-backdrop--open slds-hide" id="backGroundSectionId"&gt;&lt;/div&gt;   Controller  //for showing modal $A.util.removeClass(component.find("newClientSectionId"), "slds-hide"); $A.util.removeClass(component.find("backGroundSectionId"), "slds-hide");   CSS  .THIS.slds-hide {    display:none; }
110120
My navigation bar at the top of each slide (that links to each section) has too many sections. I would like to keep the bar and keep each section but I would like to wrap it i.e. have it on two lines.  Is that possible?  I am using compress and I am using  as a theme.
69778
I'm designing a website for a rather unknown software company. The company likes the design but cannnot get along with our desicion to center their logo on the top of their page, although all the other elements are centered. Therefore a left aligned logo wouldn't look good. I know, it seems all UX studies prove them right, but positioning the logo in the center isn't a unpopular practice anymore.   Furthermore I think the way we read a website has adapted the last 10 years. Are there any studies about this topic that could help prove my point?  Thanks
86942
I have a container div that holds two internal divs; both should take 100% width and 100% height within the container.  I set both internal divs to 100% height. That works fine in Firefox, however in IE the divs do not stretch to 100% height but only the height of the text inside them.  The following is a simplified version of my style sheet.  #container {    height: auto;    width: 100%; }  #container #mainContentsWrapper {    float: left;     height: 100%;    width: 70%;    margin: 0;    padding: 0; }   #container #sidebarWrapper {          float: right;     height: 100%;    width: 29.7%;    margin: 0;    padding: 0; }   Is there something I am doing wrong? Or any Firefox/IE quirks I am missing out?
26936
I have a responsive blog where ads are displayed in the sidebar. On mobile devices however, the sidebar is pushed to the bottom below the posts.   So what I'd like to do is move the ads from the sidebar and insert them into the post itself on mobile devices   I do this using javascript:  &lt;div id="main"&gt;     &lt;div id="article"&gt;         &lt;div class="post"&gt;             &lt;p class="intro"&gt;&lt;/p&gt;             &lt;p class="text"&gt;&lt;/p&gt;         &lt;/div&gt;     &lt;/div&gt;     &lt;div id="sidebar"&gt;         &lt;div class="adbox-1"&gt;&lt;/div&gt;     &lt;/div&gt;     &lt;/div&gt;  &lt;script&gt;     jQuery(document).ready(function(){          // AD REPOSITION         if ($(window).width() &lt; 769) {             $('.ad-box1').insertAfter($('.intro'));                    }      }); &lt;/script&gt;   The ads are always loaded in the sidebar, but if the screen width is below 768px, they will be moved somewhere else.  I wonder if this would violate AdSense terms of service?