I'm facing problem with floating elements inside div only , here is the problem:    .main{      border-style:solid;     border-color:yellow;     overflow:auto;  }  .first {     width:200px;     height:100px;     float: left;     border: 10px solid green; } .second { width:200px;     height: 50px;     border: 10px solid blue; } &lt;div class="main"&gt; &lt;div class="first"&gt;test1&lt;/div&gt; &lt;div class="second" &gt;test2&lt;/div&gt; &lt;/div&gt;     I need an explanation about the border of second DIV and its content position. Why the border is behind but the content is under the first div?    Also according to  :      One of the more bewildering things about working with floats is how they can affect the element that contains them (their "parent" element). If this parent element contained nothing but floated elements, the height of it would literally collapse to nothing. This isn't always obvious if the parent doesn't contain any visually noticeable background, but it is important to be aware of.   I need clarification why this happening.   EDIT: I'm asking for explanation for it's behavior for both questions , NOT how to solve 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?
116938
I want to create page with two columns with different background color and height of whole page. What I was able to do is two columns with different background color but I can't set proper height and there is small gap between two columns and another gap between top of the page and top of the columns. I want to remove these gaps. Also I want to create vertical line between two columns. Right now I have minipages packed inside \colorbox which allows me to create all four borders but I only want one.   Final effect should look like this:    This is what I figured out for now:  \documentclass{article} \usepackage{blindtext} \usepackage{xcolor} \usepackage{geometry} \geometry{margin=0in}  \begin{document} \noindent \fcolorbox{black}{red}{ \begin{minipage}{.3\textwidth}   test \end{minipage} } \fcolorbox{yellow}{yellow}{ \begin{minipage}{.7\textwidth}   test \end{minipage} } \end{document}
54234
I'm pretty accustomed to clearing my floats by using &lt;br style="clear:both"/&gt; but stuff keeps on changing and I am not sure if this is the best practice.   There is a  (from positioneverything) available that lets you achieve the same result without the clearing div. But... they claim the hack is a little out of date and instead you perhaps should look at . But.. after reading through 700 pages of comments :) it seems there may be some places the latter hack does not work.   I would like to avoid any javascript hacks cause I would like my clearing to work regardless of javascript being enabled.   What is the current best practice for clearing divs in a browser independent way?
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?! :(
33290
Just noticed a minor css issue on this question:    The related questions on the right hand side have some overlapping text in Chrome:        (This only applies to this very site, Meta Stack Exchange)
9647
Given the following HTML:   &lt;div id="container"&gt;   &lt;!-- Other elements here --&gt;   &lt;div id="copyright"&gt;     Copyright Foo web designs   &lt;/div&gt; &lt;/div&gt;    I would like #copyright to stick to the bottom of #container. Can I achieve this without using absolute positioning?
48709
Every time I try to do something seemingly-simple in CSS, it doesn't work.  I have a content div that contains a 460x160 image. All I want to do is position the image at the bottom-right corner and wrap my text around it.  &lt;div id="contents"&gt;     &lt;img src="..." /&gt;     text text text text text text ... &lt;/div&gt;   So I want it to look like:  ------------------ | text text text | | text text text | | text text -----| | text text |    | ------------------   Doing it with a top-left or top-right image is cake:  #contents img { float:right; }  ------------------ | text text |    | | text text -----| | text text text | | text text text | ------------------   Now how do I push that to the bottom? The best I've come up with so far are:  #contents img { float:right; margin-top: 90%} // really needs to be 100%-160px  ------------------ | text text      | | text text      | | text text -----| | text text |    | ------------------   In this case the text does not print in the margin, so there is white space above the image.  #contents { position:relative; } #contents img { position:absolute; right:0; bottom:0; }  -or-  // move the img tag under the text in the html and: #contents img { float:right; margin-top:-160; }  ------------------ | text text text | | text text text | | text text -----| | text text | te | ------------------   In this case the text prints over or under the image.  So... how can I accomplish this?
118541
I usually only allow paragraphs to be indented when there's a need for them to be: only if the previous "element" could be confused and thus "merged" with the paragraph in question.  In practical terms, this means that there's no indentation after a \medskip or \bigskip, nor after itemize or enumerate, nor after displayed math.  Now, when typesetting floats it's hard to enforce this style: I'd like to leave no indentation after a float (in my opinion, it's hard to confuse things here).  Given, a paragraph may well finish "flush" to the right margin and continue a new sentence just after the float...  The "solution" I'm looking for then would be to force floats to occur (as many as need to) inside paragraphs, so that the first letter after the float is a lowercase, non indented, letter.  Any ideas?  PS: I usually also set \setlength\parfillskip=2em plus 1 fil, so as to have a consistent "visual clue" that a paragraph is over.
20941
As in , the code  \draw[step=0.5cm,color=gray] (-1,-1) grid (1,1);   gives me a nice finite 4x4 grid. But when I choose a different starting point, like  \draw[step=0.5cm,color=gray] (2,2) grid (4,4);   then the left and the bottom border of the grid disappears. What is the problem and how can I fix it so that I have all the borders? I know I can draw a rectangle there, but I assume there is some cleaner solution.
68321
I have a CSS rule like this:  a:hover { background-color: #fff; }   But this results in a bad-looking gap at the bottom on image links, and what's even worse, if I have transparent images, the link's background color can be seen through the image.  I have stumbled upon this problem many times before, but I always solved it using the quick-and-dirty approach of assigning a class to image links:  a.imagelink:hover { background-color: transparent; }   Today I was looking for a more elegant solution to this problem when I stumbled upon .  Basically what it suggests is using display: block, and this really solves the problem for non-transparent images. However, it results in another problem: now the link is as wide as the paragraph, although the image is not.  Is there a nice way to solve this problem, or do I have to use the dirty approach again?  Thanks,
571
I am working on a web application where I want the content to fill the height of the entire screen.  The page has a header, which contains a logo, and account information. This could be an arbitrary height. I want the content div to fill the rest of the page to the bottom.  I have a header div and a content div. At the moment I am using a table for the layout like so:  CSS and HTML    #page {     height: 100%; width: 100% }  #tdcontent {     height: 100%; }  #content {     overflow: auto; /* or overflow: hidden; */ } &lt;table id="page"&gt;     &lt;tr&gt;         &lt;td id="tdheader"&gt;             &lt;div id="header"&gt;...&lt;/div&gt;         &lt;/td&gt;     &lt;/tr&gt;     &lt;tr&gt;         &lt;td id="tdcontent"&gt;             &lt;div id="content"&gt;...&lt;/div&gt;         &lt;/td&gt;     &lt;/tr&gt; &lt;/table&gt;     The entire height of the page is filled, and no scrolling is required.  For anything inside the content div, setting top: 0; will put it right underneath the header. Sometimes the content will be a real table, with its height set to 100%. Putting header inside content will not allow this to work.  Is there a way to achieve the same effect without using the table?  Update:  Elements inside the content div will have heights set to percentages as well. So something at 100% inside the div will fill it to the bottom. As will two elements at 50%.  Update 2:  For instance, if the header takes up 20% of the screen's height, a table specified at 50% inside #content would take up 40% of the screen space. So far, wrapping the entire thing in a table is the only thing that works.
71633
With HTML/CSS, how can I make an element that has a width and/or height that is 100% of it's parent element and still has proper padding or margins?  By "proper" I mean that if my parent element is 200px tall and I specify height = 100% with padding = 5px I would expect that I should get a 190px high element with border = 5px on all sides, nicely centered in the parent element.  Now, I know that that's not how the standard box model specifies it should work (although I'd like to know why, exactly...), so the obvious answer doesn't work:  #myDiv {     width: 100%     height: 100%;     padding: 5px; }   But it would seem to me that there must be SOME way of reliably producing this effect for a parent of arbitrary size. Does anyone know of a way of accomplishing this (seemingly simple) task?  Oh, and for the record I'm not terribly interested in IE compatibility so that should (hopefully) make things a bit easier.   EDIT: Since an example was asked for, here's the simplest one I can think of:  &lt;html style="height: 100%"&gt;     &lt;body style="height: 100%"&gt;         &lt;div style="background-color: black; height: 100%; padding: 25px"&gt;&lt;/div&gt;     &lt;/body&gt; &lt;/html&gt;   The challenge is then to get the black box to show up with a 25 pixel padding on all edges without the page growing big enough to require scrollbars.
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.
13086
I want to put two &lt;div&gt;s next to each other. The right &lt;div&gt; is about 200px; and the left &lt;div&gt; must fill up the rest of the screen width? How can I do this?
97297
Does anyone know how to shade the background and put a border around a multicol environment, where page breaks are needed.  There is a couple of posts around, most notably, , but there seems to be problems.  The best looking environment is the tcolorbox, but, cant do pagebreaks.  mdframed appears to overflow when pagebreaks are required (ie when multicol env. across multiple pages)  I really don't have an MWE, given the above comments RE tcolorbox and mdframed.
51545
Does anyone know how to make text align top-to-bottom in a div.  SO won't even let me demonstrate it . . . I just want the letters to stack on top of each other in a vertical line down the page like the stories of a building. Was hoping I didn't need to do it with an image.
106588
The styling of nested lists with mixed or multiple child elements isn’t great. If you have only a single paragraph of text or a single nested list item within a parent list item then there’s no issue, but as soon as you have more than one child element the styling starts to get a bit unpredictable. This is most noticeable when you have nested lists along with paragraph text in the same parent list item, but also affects things like code blocks and quotes.  This has come up as a support issue (for example  and ).  The issue is the explicit lack of a bottom margin on child lists and paragraphs regardless of whether there are succeeding elements. So for example, this:  - List item      - Child list item      More list item text  - List item   Is rendered as:        List item         Child list item         More list item text   List item      And as an image for posterity:        This is because the first "List item" text is wrapped in a &lt;p&gt; tag that has a bottom margin, whereas the child list item and "Child item text" has no bottom margin.  The offending CSS rules (found in "all.css") are:  ul ul, ol ul, ul ol, ol ol {     margin-bottom: 0; }  .post-text ul p:last-of-type, .wmd-preview ul p:last-of-type, .post-text ol p:last-of-type, .wmd-preview ol p:last-of-type {     margin-bottom: 0; }   Now, we don’t want all nested lists to have no bottom margin and we don’t the last paragraph to have no bottom margin unless it is the last element in that list item, not just the last paragraph.  The simple solution is to remove both of those declarations and replace with:  ul :last-child, ol :last-child {     margin-bottom: 0; }   That gives us no bottom margin on the last child element of anything inside lists, which would also cover the last list item itself, meaning we could get rid of this (also in "all.css") too:  .post-text ul li:last-child, .wmd-preview ul li:last-child, .post-text ol li:last-child, .wmd-preview ol li:last-child {     margin-bottom: 0; }   Just for reference, this is how the previous example looks with the improved CSS:        Maybe I’m overlooking some other case where those rules are important or maybe they're used elsewhere and simply removing them isn't the best option but at least change the rule affecting paragraphs from :last-of-type to :last-child and stop removing the bottom margin on all nested lists...  This is also a problem with non-nested lists when multiple paragraphs are used. This:  - List item   Second paragraph for item  - List item  - List item   is rendered like this:        List item      Second paragraph for item   List item   List item      as an image for posterity:        The second paragraph of the first item shouldn't be visually closer to the second item than it is to the preceding paragraph in the first item.  TL;DR Better nested list spacing please.