I don't know what i'm missing here but i can't seem to center my div under a section. Whenever i try to put a margin on the div alone, it also applies a margin to the section tag. What i want to do is very simple. Put &lt;div class=&quot;container&quot;&gt; on the center of the &lt;section id=&quot;main&quot;&gt;, so the &lt;div class=&quot;container&quot;&gt; has space at every side. Here is my HTML code: &lt;body&gt; &lt;section id=&quot;main&quot;&gt;         &lt;div class=&quot;container&quot;&gt;        &lt;nav&gt;&lt;h2&gt;ALEX\ALBARAN&lt;/h2&gt;&lt;img src=&quot;icon_back.png&quot;&gt;&lt;/nav&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;          &lt;div class=&quot;box-1&quot;&gt;             &lt;h1&gt; HELLO! I'M ALEX&lt;/h1&gt;         &lt;/div&gt; &lt;br&gt;&lt;br&gt;          &lt;div class=&quot;box-2&quot;&gt;             &lt;h3&gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique inventore ipsa optio velit, neque, itaque quasi fugiat impedit libero, vitae temporibus? Quisquam libero voluptas, excepturi non fugiat, perferendis laborum magni!&lt;/h3&gt;&lt;br&gt;&lt;br&gt;         &lt;/div&gt;         &lt;div class=box-3&gt;         &lt;i class=&quot;fas fa-arrow-circle-down&quot;&gt;&lt;/i&gt;         &lt;/div&gt;     &lt;/div&gt; &lt;/section&gt;    and here is my CSS code: nav {     display: flex;     justify-content: space-between;  } h2 {     font-family: 'Questrial', sans-serif;     font-weight: 200;     font-size: 15px;     color: white; }  img {     width:40px;     height: 40px;     align-items: flex-end; }  #main {     background-color: aqua;     font-family: 'Roboto', sans-serif;     font-weight: 100;      } .container {     background-image:url(bg1.png);     background-repeat: no-repeat;     background-size: cover;     width: 80%;     justify-content: center;     text-align: center;     margin: 10% 10%; }  .box-1 {     border: 3px solid white;     background-color: transparent;     color: white;     width: 50%;     padding: auto;     margin: auto;     text-align: center; }  .box-2 {     font-size: 10px;     font-weight: 100;     color: white;     background-color: transparent;     width: 50%;     padding:auto;     margin:auto;     text-align: center;      }  .box-3 {     text-align: center;     color: white;     padding-bottom: 20px; }
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;
94642
I have already asked this question but I have not received answers. I tried to find a solution but I still have problems.  I want to make a document in which all the sections appear with a style and only one section appear with different style, for that I realized two styles of section but my problem is that I do not arrive to put it in the same document.  Here is the code of my section that appear with different style (section two):  \documentclass{book} \usepackage{lipsum} \usepackage{xcolor} \usepackage[explicit]{titlesec} \definecolor{myBlue}{HTML}{0088FF} \begin{document}     \chapter{CHAP 1}     \section{Section one}     \titleformat{\section}[hang]{\Large\bfseries\sffamily\fontfamily{pag}\selectfont}%     {\rlap{\color{myBlue}\rule[-6pt]{\textwidth}{1.2pt}}\colorbox{myBlue}{%             \raisebox{0pt}[13pt][3pt]{ \makebox[70pt]{% height, width                     \fontfamily{pag}\selectfont\color{white}{\thesection}}     }}}%     {15pt}%     { \color{myBlue}#1         %     }     \section{Section two}     \lipsum[2]     \lipsum[1]     \titleformat{\section}[block]     {\normalfont\large\bfseries}     {\thesection}     {1em}{#1}     {}     \section{Section three}     \section{Section four} \end{document}      for the sections one, three and four i want use this code :  \renewcommand{\section}{\@startsection{section}{1}{\z@} {-12pt \@plus -1ex \@minus -.4ex} {2ex \@plus.2ex } {\normalfont\fontsize{14pt}{16pt}\fontfamily{pag}\bfseries\color{myBlue}}}     I want the final result to be like this picture :
32505
After reading this question , I want to know the answer of the following.  When should we use \begin{center} instead of \centering?  For example, should we use this one?  {% \centering &lt;other contents&gt; }   or this one?  \begin{center} &lt;other contents&gt; \end{center}
100723
I am building an application where I want to be able to click a rectangle represented by a DIV, and then use the keyboard to move that DIV by listing for keyboard events.  Rather than using an event listener for those keyboard events at the document level, can I listen for keyboard events at the DIV level, perhaps by giving it keyboard focus?  Here's a simplified sample to illustrate the problem:  &lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt;  &lt;div id="outer" style="background-color:#eeeeee;padding:10px"&gt; outer     &lt;div id="inner" style="background-color:#bbbbbb;width:50%;margin:10px;padding:10px;"&gt;    want to be able to focus this element and pick up keypresses    &lt;/div&gt; &lt;/div&gt;  &lt;script language="Javascript"&gt;  function onClick() {     document.getElementById('inner').innerHTML="clicked";     document.getElementById('inner').focus();  }  //this handler is never called function onKeypressDiv() {     document.getElementById('inner').innerHTML="keypress on div"; }  function onKeypressDoc() {     document.getElementById('inner').innerHTML="keypress on doc"; }  //install event handlers document.getElementById('inner').addEventListener("click", onClick, false); document.getElementById('inner').addEventListener("keypress", onKeypressDiv, false); document.addEventListener("keypress", onKeypressDoc, false);  &lt;/script&gt;  &lt;/body&gt; &lt;/html&gt;   On clicking the inner DIV I try to give it focus, but subsequent keyboard events are always picked up at the document level, not my DIV level event listener.  Do I simply need to implement an application-specific notion of keyboard focus?  I should add I only need this to work in Firefox.
29285
What's the difference between &lt;div class=""&gt; and &lt;div id=""&gt; when it comes to CSS? Is it alright to use &lt;div id=""&gt;?  I see different developers doing this in both ways, and since I'm self taught, I've never really figured it out.
60624
In the markup shown below, I'm trying to get the content div to stretch all the way to the bottom of the page but it's only stretching if there's content to display. The reason I want to do this is so the vertical border still appears down the page even if there isn't any content to display. Here is my DEMO:   body {     font-family: Trebuchet MS, Verdana, MS Sans Serif;     font-size:0.9em;     margin:0;     padding:0; } div#header {     width: 100%;     height: 100px; } #header a {     background-position: 100px 30px;     background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;     height: 80px;     display: block; } #header, #menuwrapper {     background-repeat: repeat;     background-image: url(site-style-images/darkblue_background_color.jpg); } #menu #menuwrapper {     height:25px; } div#menuwrapper {     width:100% } #menu, #content {     width:1024px;     margin: 0 auto; } div#menu {     height: 25px;     background-color:#50657a; } &lt;form id="form1"&gt;   &lt;div id="header"&gt;       &lt;a title="Home" href="index.html" /&gt;   &lt;/div&gt;    &lt;div id="menuwrapper"&gt;       &lt;div id="menu"&gt;       &lt;/div&gt;   &lt;/div&gt;    &lt;div id="content"&gt;   &lt;/div&gt; &lt;/form&gt;
35
Why won't vertical-align: middle work?  And yet, vertical-align: top does work.   span{   vertical-align: middle; } &lt;div&gt;   &lt;img src="https://via.placeholder.com/30" alt="small img" /&gt;   &lt;span&gt;Doesn't work.&lt;/span&gt; &lt;/div&gt;
81779
I'm using minipages to keep related questions together on a test that I'm writing. When I make a 2-sided document some of my spacing gets messed up before the section break. It works fine if I leave out the twoside option. What's going on here?  \documentclass[12pt,twoside]{article}   \begin{document}  \section{test} asdf  \section{More test}  \begin{minipage}{\textwidth} text \vspace{7in} \end{minipage}  \end{document}
14781
Say I have the following CSS and HTML code:    #header {   height: 150px; } &lt;div id="header"&gt;   &lt;h1&gt;Header title&lt;/h1&gt;   Header content (one or multiple lines) &lt;/div&gt;     The header section is fixed height, but the header content may change.  I would like the content of the header to be vertically aligned to the bottom of the header section, so the last line of text "sticks" to the bottom of the header section.  So if there is only one line of text, it would be like:   ----------------------------- | Header title | | | | header content (resulting in one line) -----------------------------   And if there were three lines:   ----------------------------- | Header title | | header content (which is so | much stuff that it perfectly | spans over three lines) -----------------------------   How can this be done in CSS?
86984
I can't put my equation in the center, i don't know if is related to be using the srcbook package.    I tried using the amsmath package, the nccmath package and fleqn command, also i used the align* command, but the equation is always as you can see in the image.  What can i do?
36354
I'm trying to have pageBlockSection under pageBlockSection but as shown in the picture the sub-section of pageBlockSection is all the way to right side, how can I have pageBlockSection under pageBlockSection?  Visualforce page:  &lt;apex:actionRegion &gt;  &lt;apex:pageBlockSection title="Employee" id="pbs0" columns="2"   &gt;                &lt;apex:inputField value="{!employee__c.Is_active__c}"&gt;       &lt;apex:actionSupport event="onclick" reRender="pbs1,pbs2" /&gt;    &lt;/apex:inputField&gt;  &lt;/apex:pageBlockSection&gt;   &lt;/apex:actionRegion&gt;  &lt;apex:pageBlockSection id="pbs1" columns="2" &gt;   &lt;apex:inputField value="{!Employee__c.Start_Date__c}" /&gt;   &lt;apex:inputField value="{!Employee__c.End_Date__c}" /&gt;   ........  &lt;apex:pageBlockSection id="pbs2" columns="2" title="Related List"&gt;     &lt;/apex:pageBlockSection&gt;  &lt;/apex:pageBlockSection&gt;   Screen shot:
82032
I'm having a play with SVG and am having a few problems with positioning. I have a series of shapes which are contained in the g group tag. I was hoping to use it like a container, so I could set its x position and then all the elements in that group would also move. But that doesn't seem to be possible.   How do most people go about positioning a group of elements which you wish to move in tandem? Is there any concept of relative positioning? e.g. relative to its parent
66335
(clickable)  Mainad has a valid height and width, however it isn't shown like subad1/subad2. Which are in essence exactly the same! (just a different background image).  Firebug shows my div as greyed out for some weird reason. Replacing the contents of mainad with just some text doesn't solve the problem (problem isn't related to inner elements)..   What's going on?! :(
56181
I have the following type of code in my document:  \begin{align*}        (-m)+m &amp; \stackrel{\mathrm{Ax 1.1 (i)}}{=}  m+(-m)\\   &amp;\stackrel{\mathrm{Ax 1.4}}{=}  0 \   I want to align on the = but that is complicated by the fact that there is something hovering over it.  It would seem to be easier to align their centers (no matter what, that is where the = will be).  How can I center a column in align (or align* to be honest, I am not that clear on the difference)
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; }
34246
I have a layout similar to this:  &lt;div id="..."&gt;&lt;img src="..."&gt;&lt;/div&gt;   and would like to use a jQuery selector to select the child img inside the div on click.  To get the div, I've got this selector:  $(this)   How can I get the child img using a selector?
100316
I have the following problem. I want to center a listing, I tried this approach:   It works but when I try to set frame or numbers specifically for each listing I get errors. Here´s the M(Not)WE:  \documentclass{article} \usepackage[utf8]{inputenc} \usepackage{listings} \begin{document}  \begin{figure}[thp]  \begin{tabular}{c}   \begin{lstlisting}[numbers=left] % Here lies the problem without the numbers=left it works    My Code   \end{lstlisting}  \end{tabular}  \centering  \caption{Bla} \end{figure}  \end{document}   Is there another way to center the listings and captions or how could I fix this approach?