I need to horizontally center the child element of an inline block. The issue is that the child sub menu is variable width and can be wider than its parent. My initial solution was to set the child element a left &amp; right of -50px but this is not really a variable width and instead statically sets it to be 100px wider than its parent.    .main-menu {     text-align: left;     margin: 0;     padding: 0;     font-size: 0px;     font-size: 0rem; } .main-menu li {     font-size: 18px;     font-size: 1.8rem;     line-height: 1em;     list-style-type: none;     text-align: center;     display: inline-block;     zoom: 1;     padding: 0 25px;     position: relative; } li &gt; a {     display: inline-block;     zoom: 1;     padding: 21px 0 19px;     font-family: "Open Sans", sans-serif;     font-weight: 400;     color: #282828;     font-size: 16px;     font-size: 1.6rem;     line-height: 1.2em;     text-decoration: none;     -webkit-transition: all .25s ease-in-out, background-image 0s, background-position 0s;     transition: all .25s ease-in-out, background-image 0s, background-position 0s; } .sub-menu {     position: absolute;     top: 100%;     left: -50px;     right: -50px;     max-width: 250px;     margin-left: auto;     margin-right: auto;     margin-bottom: 0;     min-width: 150px;     background-color: white;     text-align: left;     padding: 17px 0;     box-shadow: 0 2px 5px #dcdcdc inset;     border-top: 18px solid #ffdd00;   } &lt;ul class="main-menu clearfix"&gt;&lt;li id="menu-item-657" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children first menu-item-657"&gt; &lt;li id="menu-item-657" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children first menu-item-657"&gt;&lt;a href="link"&gt;Solutions&lt;/a&gt; &lt;ul class="sub-menu"&gt;  &lt;li id="menu-item-220469" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-220469"&gt;&lt;a href="link"&gt;Solutions&lt;/a&gt;&lt;/li&gt;  &lt;li id="menu-item-18009" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18009"&gt;&lt;a href="link"&gt;How It Works&lt;/a&gt;&lt;/li&gt;  &lt;li id="menu-item-10344" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10344"&gt;&lt;a href="link"&gt;Why Use It&lt;/a&gt;&lt;/li&gt;  &lt;li id="menu-item-3375" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3375"&gt;&lt;a href="link"&gt;Products&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt;  &lt;/ul&gt;
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;
7820
I have a layout similar to:  &lt;div&gt;     &lt;table&gt;     &lt;/table&gt; &lt;/div&gt;   I would like for the div to only expand to as wide as my table becomes.
37744
I have a container div with a fixed width and height, with overflow: hidden.  I want a horizontal row of float: left divs within this container. Divs which are floated left will naturally push onto the 'line' below after they read the right bound of their parent. This will happen even if the height of the parent should not allow this. This is how this looks:  ![Wrong][1] - removed image shack image that had been replaced by an advert  How I would like it to look:  ![Right][2] - removed image shack image that had been replaced by an advert  Note: the effect I want can be achieved by using inline elements &amp; white-space: no-wrap (that is how I did it in the image shown). This, however, is no good to me (for reasons too lengthy to explain here), as the child divs need to be floated block level elements.
120595
I'm having this problem, same as ever, but never try to find the right solution  code:   &lt;div id="ListOfTextAndPhotos"&gt;       &lt;div style="border-bottom: solid 1px silver;"&gt;           &lt;img src="photo.jpg" style="float: left"&gt;           Some text about the photo       &lt;/div&gt;       &lt;div style="border-bottom: solid 1px silver;"&gt;           &lt;img src="photo2.jpg" style="float: left"&gt;           Some text about the photo2       &lt;/div&gt;       &lt;div style="border-bottom: solid 1px silver;"&gt;           &lt;img src="photo3.jpg" style="float: left"&gt;           Some text about the photo3       &lt;/div&gt;   &lt;/div&gt;   Question: How do I to keep the photo inside the DIV? with the separator line under the photo
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..
42629
For instance in the snippet below - how do I access the h1 element knowing the ID of parent element (header-inner div)?  &lt;div id='header-inner'&gt;     &lt;div class='titlewrapper'&gt;        &lt;h1 class='title'&gt;        Some text I want to change       &lt;/h1&gt;     &lt;/div&gt;  &lt;/div&gt;   Thanks!
95168
Problem:  I am trying to align three figures next to each other with text centered to each figure. This is going well until the box for the third box does not adjust after the text width.  Minimal Working Example (MWE):  \documentclass{article} \usepackage{graphicx} \usepackage{caption}  \begin{document}  \begin{figure}[!tbp]   \centering   \begin{minipage}[b]{0.2\textwidth}     \includegraphics[width=\textwidth]{icon-password.eps}     \caption*{Login system}   \end{minipage}   \hfill   \begin{minipage}[b]{0.2\textwidth}     \includegraphics[width=\textwidth]{icon-shopping.eps}     \caption*{Shopping cart}   \end{minipage}   \hfill   \begin{minipage}[b]{0.2\textwidth}     \includegraphics[width=\textwidth]{icon-clock.eps}     \caption*{Temporary information}   \end{minipage} \end{figure}  \end{document}   Outputs:   Desired outcome:  To get the width to adjust after the text so that "Temporary information" can be written out in one line instead of two.
112335
Lets say I have a text box that I want to fill a whole line. I would give it a style like this:  input.wide {display:block; width: 100%}   This causes problems because the width is based on the content of the text box. Text boxes have margin, borders, &amp; padding by default, which makes a 100% width text box larger than its container.  For example, here on the right:    Is there any way to make a text box fill the width of its container without expanding beyond it?  Here is some example HTML to show what I mean:  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt; &lt;head&gt;     &lt;title&gt;Untitled Page&lt;/title&gt;     &lt;style type="text/css"&gt;         #outer{border: 1px solid #000; width: 320px; margin: 0px;padding:0px}         #inner{margin: 20px; padding: 20px; background: #999;border: 1px solid #000;}         input.wide {display:block; margin: 0px}         input.normal {display:block; float: right}     &lt;/style&gt; &lt;/head&gt; &lt;body&gt;     &lt;div id="outer"&gt;         &lt;div id="inner"&gt;             &lt;input type="text" class="wide" /&gt;             &lt;input type="text" class="normal" /&gt;             &lt;div style="clear:both;"&gt;&lt;/div&gt;         &lt;/div&gt;     &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;   If this is run, you can see by looking at the "normal" text box that the "wide" text box is sticking out beyond the container. The "normal" text box floats to the actual edge of the container. I'm trying to make the "wide" text box fill its container, without expanding beyond edge like the "normal" text box is.
14681
I want to insert a paragraph or possibly even a box with a background color into a list that uses the whole \textwidth. Something like this:  1st item     a subitem 1    b subitem 2  2nd item    a subitee  \begin{use the full width}    [ Here the text should use the full text width ignoring the list indent] \end{use the full width}    b subitem 3rd item   The list is a normal enumerate.
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?
61949
Is there a way to select a parent element based on the class of a child element in the class?  The example that is relevant to me relating to HTML output by a nice menu plugin for .  The output renders like this:    &lt;ul class="menu"&gt;       &lt;li&gt;           &lt;a class="active"&gt;Active Page&lt;/a&gt;       &lt;/li&gt;       &lt;li&gt;             &lt;a&gt;Some Other Page&lt;/a&gt;       &lt;/li&gt;   &lt;/ul&gt;     My question is whether or not it is possible to apply a style to the list item that contains the anchor with the active class on it.  Obviously, I'd prefer that the list item be marked as active, but I don't have control of the code that gets produced.  I could perform this sort of thing using javascript (JQuery springs to mind), but I was wondering if there is a way to do this using CSS selectors.  Just to be clear, I want to apply a style to the list item, not the anchor.
2807
Given a template where the HTML cannot be modified because of other requirements, how is it possible to display (rearrange) a div above another div when they are not in that order in the HTML? Both divs contain data that varies in height and width.  &lt;div id="wrapper"&gt;     &lt;div id="firstDiv"&gt;         Content to be below in this situation     &lt;/div&gt;     &lt;div id="secondDiv"&gt;         Content to be above in this situation     &lt;/div&gt; &lt;/div&gt; Other elements   Hopefully it is obvious that the desired result is:  Content to be above in this situation Content to be below in this situation Other elements   When the dimensions are fixed it easy to position them where needed, but I need some ideas for when the content is variable. For the sake of this scenario, please just consider the width to be 100% on both.  I am specifically looking for a CSS-only solution (and it will probably have to be met with other solutions if that doesn't pan out).   There are other elements following this. A good suggestion was mentioned given the limited scenario I demonstrated&mdash;given that it might be the best answer, but I am looking to also make sure elements following this aren't impacted.
72481
Here's a problem (at least it seems like a problem) I noticed in the first couple revisions of . Based on experiments shown below, when I include within a &lt;pre&gt; block lines that start with one or more spaces, they appear as a nested pre-area in the question, and if there are enough of these lines, I get two scrollbars, one for the nested &lt;pre&gt; (which seems to be created by the Markdown parser) and one for the outer &lt;pre&gt; (which is explicitly given in the question). I'd expect to get only one &lt;pre&gt; in the rendered question, the one that I explicitly include.  Example:   line of code  line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code line of code   line of code line of code
23467
I'm looking for a way in Plain TeX to make a continuous vertical rule along the left side of a paragraph (or arbitrary block of text), such that it observes normal page-break rules. I started with the following, which looks exactly how I want, except of course it has the undesirable side-effect of preventing page breaks for large runs of text, since it uses \vbox:  % Definition \def\codeblock#1{%   \hbox{%     {\vrule width .6pt}%     \hskip 1em%     \vbox{\tt #1}%   }% }  % Example \codeblock{% \hbox{void main(int argc, char *argv[]) \char123}% \hbox{{\ }{\ }printf("Hello, world!{\char92}n");}% \hbox{\char125}% }   As a workaround, I'm currently resorting to breaking things into separate lines and a series of kludged non-continous-but-overlapping vertical rule segments:  % Definition \def\codeline#1{%   \hbox{%     \vrule width .6pt height .85em depth .46em%     \hskip 1em%     \tt #1%   }%   \vskip -.11em% }  % Example \codeline{void main(int argc, char *argv[]) \char123} \codeline{{\ }{\ }printf("Hello, world!{\char92}n");} \codeline{\char125}   In a perfect world, I'd like to simply pass an arbitrary block of text to a macro and have it apply normal pagination rules to the block of text, while at the same time making a vertical rule down the left. I don't have much experience with TeX but I suspect the answer is that it's not trivial?  While typing this question,  appeared in the margin. I will definitely give that a try — and it looks really powerful and well thought out — but it also seems quite heavyweight for something that I would think ought to be reasonably straightforward. Also, not that I have anything against LaTeX, but I'd prefer to use a solution as close to Plain TeX as possible, so that I can have some hope of understanding it.
31813
Although elements like &lt;div&gt;s normally grow to fit their contents, using the float property can cause a startling problem for CSS newbies: If floated elements have non-floated parent elements, the parent will collapse. For example:   &lt;div&gt;   &lt;div style="float: left;"&gt;Div 1&lt;/div&gt;   &lt;div style="float: left;"&gt;Div 2&lt;/div&gt; &lt;/div&gt;    The parent div in this example will not expand to contain its floated children - it will appear to have height: 0. How do you solve this problem? I would like to create an exhaustive list of solutions here. If you're aware of cross-browser compatibility issues, please point them out. Solution 1 Float the parent.   &lt;div style="float: left;"&gt;   &lt;div style="float: left;"&gt;Div 1&lt;/div&gt;   &lt;div style="float: left;"&gt;Div 2&lt;/div&gt; &lt;/div&gt;    Pros: Semantic code. Cons: You may not always want the parent floated. Even if you do, do you float the parents' parent, and so on? Must you float every ancestor element? Solution 2 Give the parent an explicit height.   &lt;div style="height: 300px;"&gt;   &lt;div style="float: left;"&gt;Div 1&lt;/div&gt;   &lt;div style="float: left;"&gt;Div 2&lt;/div&gt; &lt;/div&gt;    Pros: Semantic code. Cons: Not flexible - if the content changes or the browser is resized, the layout will break. Solution 3 Append a &quot;spacer&quot; element inside the parent element, like this:   &lt;div&gt;   &lt;div style="float: left;"&gt;Div 1&lt;/div&gt;   &lt;div style="float: left;"&gt;Div 2&lt;/div&gt;   &lt;div class="spacer" style="clear: both;"&gt;&lt;/div&gt; &lt;/div&gt;    Pros: Straightforward to code. Cons: Not semantic; the spacer div exists only as a layout hack. Solution 4 Set parent to overflow: auto.   &lt;div style="overflow: auto;"&gt;   &lt;div style="float: left;"&gt;Div 1&lt;/div&gt;   &lt;div style="float: left;"&gt;Div 2&lt;/div&gt; &lt;/div&gt;    Pros: Doesn't require extra div. Cons: Seems like a hack - that's not the overflow property's stated purpose. Comments? Other suggestions?
18719
This is one of the minor CSS problems that plague me constantly. How do folks around Stack Overflow vertically align checkboxes and their labels consistently cross-browser? Whenever I align them correctly in Safari (usually using vertical-align: baseline on the input), they're completely off in Firefox and IE. Fix it in Firefox, and Safari and IE are inevitably messed up. I waste time on this every time I code a form. Here's the standard code that I work with:   &lt;form&gt;     &lt;div&gt;         &lt;label&gt;&lt;input type="checkbox" /&gt; Label text&lt;/label&gt;     &lt;/div&gt; &lt;/form&gt;    I usually use Eric Meyer's reset, so form elements are relatively clean of overrides. Looking forward to any tips or tricks that you have to offer!
23842
Suppose that I have a &lt;div&gt; that I wish to center in the browser's display (viewport). To do so, I need to calculate the width and height of the &lt;div&gt; element.   What should I use? Please include information on browser compatibility.