The template to rebuild my website works great except for the 2 divs in the center which are floated left &amp; right. They seem to need at least a full line of text in each one to stay open.  If not the navigation on the left seems to go off screen to the left. The left &amp; right divs are fixed widths.  The 2 center ones are floated I believe properly &amp; cleared. Each 48% width.  Is there a way to keep them fully expanded for pages that do not have a line that covers the full width. I know my screen is 1920px's wide &amp; they are getting wider.  I have been researching this for days &amp; always seem to end up at this site.  The only thing I can think of is to put say 16 - 100px wide spacer gif's side by side in each center 48% div. That just isn't right.  Is there a way to keep the div's full width?  Full page sample. If either of the 2 full lines in the 2 center div's are shortened the left nav goes further left.
120546
&lt;html&gt;     &lt;head&gt;         &lt;style type="text/css"&gt;             div {                 border:1px solid #000;                 min-width: 50%;             }         &lt;/style&gt;     &lt;/head&gt;     &lt;body&gt;         &lt;div&gt;This is some text. &lt;/div&gt;     &lt;/body&gt; &lt;/html&gt;   I believe the div should be 50 percent of the page, unless, for some reason, the text inside the div makes it larger. However, the border around the div stretches across the entire page width. This occurs in both IE and Firefox.  Suggestions?
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.
73184
I can't figure out how to achieve the following layout with CSS (probably because I don't actually know CSS).  I have a bunch of divs like this:  &lt;div class="right"&gt; &lt;p&gt;1&lt;/p&gt; &lt;/div&gt; &lt;div class="left"&gt;  &lt;p&gt;2&lt;/p&gt; &lt;/div&gt; &lt;div class="left"&gt;  &lt;p&gt;3&lt;/p&gt; &lt;/div&gt; &lt;div class="left"&gt;  &lt;p&gt;4&lt;/p&gt; &lt;/div&gt; &lt;div class="right"&gt; &lt;p&gt;5&lt;/p&gt; &lt;/div&gt; &lt;div class="right"&gt; &lt;p&gt;6&lt;/p&gt; &lt;/div&gt;   (not the real contents)  Now I want the layout to look like two equal columns of divs, with the "right" ones on the right, and the "left" ones on the left, thus:  2 1 3 5 4 6   [Edit: In a previous version of this question I had textareas inside the divs, and the divs all had different names like "one" and "xyz".] I tried something like  div.right { width:50%; float:right; clear:right; } div.left { width:50%; float:left; clear:left;}   but it doesn't quite work: It produces something like:  2 1 3  4 5   6   (without the "clear"s, it blithely produces   2 1 3 4 6 5   which is not what is wanted).  It is apparent that it can be made to work if the divs are ordered differently, but I'd like not to do that (because these divs are generated dynamically if the browser has Javascript, and I don't want to change the actual order that is displayed in the absence of Javascript, for semantic reasons). Is it still possible to achieve the layout I want?  [For what it's worth, I'm willing to have it not work on IE or older versions of other browsers, so if there is a solution that works only on standards-compliant browsers, that's okay :-)]
65449
I tend to keep my Chrome zoomed to 90% (it gives me more real estate on my work monitor. When I do the layout on , it breaks (see the image below).      `
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.
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?
9350
I have floated images and inset boxes at the top of a container using float:right (or left) many times. Recently I hit a need to float a div at the bottom right corner of another div with the normal text wrap that you get with float (text wrapped above and to the left only).  I thought this must be relatively easy even though float has no bottom value but I haven't been able to do it using a number of techniques and searching the web hasn't come up with anything other than using absolute positioning but this doesn't give the correct word wrap behaviour.  I had thought this would be a very common design but apparently it isn't. If nobody has a suggestion I'll have to break my text up into separate boxes and align the div manually but that is rather precarious and I'd hate to have to do it on every page that needs it.  EDIT: Just a note for anyone who comes here. The question linked above as a duplicate is in fact not a duplicate. The requirement that text wrap around the inset element makes it completely different. In fact, the response to the top voted answer here makes it clear why the answer in the linked question is wrong as a response to this question. Anyway, there still doesn't appear to be a general solution to this problem but some of the solutions posted here and in the linked question may work for specific cases.
37762
I have a document containing a table which is slightly too wide for the page. But instead of growing to the right side only, I would like to have it centered on the page.  I have tried to use the center environment but this doesn't seem to help.
14534
I created a horizontal menu using a HTML lists and CSS. Everything works as it should except when you hover over the links. You see, I created a bold hover state for the links, and now the menu links shift because of the bold size difference.  I encounter the same problem as . However, the post does not have proper solution. I've searched everywhere for a solution and can't find one. Surely I can't be the only one trying to do this.  Does anyone have any ideas?  P.S: I don't know the width of the text in menu items so I cannot just set the width of the li items.    .nav { margin: 0; padding: 0; } .nav li {      list-style: none;      display: inline;      border-left: #ffffff 1px solid;  } .nav li a:link, .nav li a:visited {      text-decoration: none;      color: #000;      margin-left: 8px;      margin-right: 5px;  } .nav li a:hover{      text-decoration: none;      font-weight: bold;  } .nav li.first { border: none; } &lt;ul class="nav"&gt;     &lt;li class="first"&gt;&lt;a href="#"&gt;item 0&lt;/a&gt;&lt;/li&gt;     &lt;li&gt;&lt;a href="#"&gt;item 1&lt;/a&gt;&lt;/li&gt;     &lt;li&gt;&lt;a href="#"&gt;item 2&lt;/a&gt;&lt;/li&gt;     &lt;li&gt;&lt;a href="#"&gt;item 3&lt;/a&gt;&lt;/li&gt;     &lt;li&gt;&lt;a href="#"&gt;item 4&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;
47954
I understand the reasoning behind the fairly narrow textwidth in a default LaTeX article. 60-80 characters per line and all that. However, I am preparing a document that features many lengthy equations, and it seems silly to me to restrict the equations to fit into the same margins as the text when there's all that whitespace going unused on either side.  I'd like to have equations which are wider than the textwidth do the obvious thing, that is, continue to be centered on the page just like all the other equations, and simply extend into both the left and right margin equally. My equations are unnumbered, so there's no concern about where to put equation numbers.  How might I go about implementing this?
93817
There is an alignment issue in the  page, under the Tags section the Add buttons has extra height.  Screenshot for reference:        The alignment issue is in all the Stack Exchange main and meta sites. Not sure this is due to the impact of the recent .
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.
10295
We're building a web-based platform where the main dashboard shows a table of data for users to view and analyze. As we're growing this tool, we seem to be adding more and more columns and are running out of horizontal space on smaller screen resolutions (we're seeing some data wrap). It is important to the user to view all columns at once, so column hiding is somewhat out of the question, as is horizontal scrolling (per the boss's request and because horizontal scrolling sucks anyways). I was wondering if anyone knew of a clever UI for tables with many columns.  EDIT  Below is a screen capture of the layout of the table. Unfortunately for security purposes I had to blur out the column titles. This example has rows with practically no data in them, but in use they will have lots of data that will expand wider than their respective column titles. In response to some of the answers, it is imperative that the user see all the columns, as they are all necessary to analyze the data to make certain decisions. All the data is numeric aside from the first three columns. Thanks again for any feedback.    Ok so I see that uploading this image doesn't really do it justice... it takes up the full width of the screen at 1680x1050 resolution (22") and as data fills in the columns, the left column w/the text shrinks down a bit.  EDIT 2 I just wanted to say thank you to everyone's awesome ideas. I can only select one answer, but a lot of your ideas have proven very useful and may end up in the final product. Thanks again!
61850
I'm trying to horizontally center a &lt;div&gt; block element on a page and have it set to a minimum width. What is the simplest way to do this? I want the &lt;div&gt; element to be inline with rest of my page. I'll try to draw an example:  page text page text page text page text page text page text page text page text                -------                | div |                ------- page text page text page text page text page text page text page text page text
70224
I have some tables and figures which are (slightly) wider than the text width. This results in them aligning with the left side of my text and going far out in the right side instead of actually being centered.  I understand that using memoir and adjustwidth can solve the problem, but is there any options when using the article class?
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.
83994
I noticed an unexpected different line spacing of the titlepage what drives me crazy. The left page is the MWE, the right page without the \\ in front of Name.  \documentclass{scrartcl}  \begin{document}  \centering \Huge \textbf{UUUUUUUU UUUUUUUUU UUUUUUUUUUUUU UUUUUUUUUUUUU} \vspace{\baselineskip}\\ \textbf{UUUUUUUU UUUUUUUUU UUUUUUUUUUUUU UUUUUUUUUUUUU} {\rmfamily\Large \vspace{5\baselineskip}\\Name}  \end{document}     Any idea what causes this? Thanks alot!  Cheers, Stephan