I am currently working on a navigation bar for my website, and am super new to CSS and HTML. I have a header split up into two divs, one for the top half displaying the logo, title, and login page, and another for the navigation buttons. I am running into issues, where my p tag leaves the div that it is inside of, and gets in the way of my navigation buttons. Here is an image of the issue: [1]:  What you are looking at is the inspect element view of a p tag next to an image tag, both within a div. Here is some html:   header{         background-color: #B71C1C;         color: #FFFFFF;         position:fixed;         top:0;         left:0;         width:100%;         height:150px;         margin-left: 0px;         margin-right: 0px; }  #bar_logo{         max-height:90px;         max-width:90px;         height:auto;         width:auto;         margin:0;         padding:0; }  .upper_banner{         width:100%;         height:60%;         margin: 0;         padding: 0; }  #title_banner{         margin:0;         padding:0;         display: inline;         height:60%;         font-size: 45px;         font-family: Helvetica;         text-align:center;         top: -20; }  #login{         float: right;         margin:10px; }   .lower_banner{         width: 100%;         height: 40%;         margin:0;         padding:0; } &lt;header&gt;                 &lt;div class="upper_banner"&gt;                         &lt;img id="bar_logo" src="https://picsum.photos/100/100" alt="Title"&gt;                         &lt;p id="title_banner"&gt;                                 Title of Website                         &lt;/p&gt;                          &lt;a id="login" href="login.html"&gt;login&lt;/a&gt;                 &lt;/div&gt;   &lt;/header&gt; &lt;!-- added by Rickard --&gt;    I am having some troubles working out this issue, as when I do highlighting over the div &quot;upper_banner&quot; it doesn't highlight past my image on the far right. As you can see, I was attempting to use top: -20;  in an attempt to move it up 20 px, but no difference. I have a feeling that this issue is because my p tag is starting at a certain point, and because my height is set to a fixed pixel count, it is going down that number of pixels, which leads to it overflowing into the div below. Apologies for the wicked beginner question, super new to all of this.
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;
89884
I am trying to position node(2) in a page in coordinates related to the page (origin at upper left corner of the body of the page). My code is:  \documentclass[border=10pt,a4paper]{memoir} \usepackage[total={16.51cm,21.59cm}, top=1.2in, left=0.9in, includefoot]{geometry} \usepackage{tikz} \usepackage{fancyhdr} \usepackage{comment} \pagestyle{fancy} \fancyhf{} \renewcommand{\headrulewidth}{2pt} \renewcommand{\footrulewidth}{1pt} \begin{document} \begin{tikzpicture} \node[](1) at (0cm,0cm) {1}; \node[](2) at (0.5\textwidth,-0.5\textheight) {2}; \end{tikzpicture} \vspace{1cm} \noindent \end{document}   For node(2) to be positioned in the centre of the page at (0.5\textwidth,-0.5\textheight) I have to create another node (1) in the origin, otherwise node(2) will be put at (0,0). I would like that someone could explain this strange behaviour.
587
I’ve found a small, yet annoying, CSS-error in the mobile view of Stack Exchange. It seems like long titles breaks the style, which causes the up-vote arrow and the answer button to break the row and fall beneath the intended spot. From the looks of it, the title cell, or the tags, increase too much and causes this minor CSS-error.    Is it possible to fix this?
41707
Is is true &lt;h1&gt; tag should not have more than 1 on every page for SEO?   Every pages on the header, it includes and &lt;h1&gt; tag. Website Name which show an image from logo class, like this:  &lt;div id="header"&gt;   &lt;h1 class="logo"&gt;      &lt;a href="#"&gt;Website Name&lt;/a&gt;   &lt;/h1&gt; &lt;/div&gt;   and I also include &lt;h1&gt; on the contact page, help, etc and article page for example:  &lt;h1&gt;Contact Us&lt;/h1&gt; &lt;h1&gt;Name of the Article Title here&lt;/h1&gt;   On the homepage, it just has one &lt;h1&gt; for the logo Site Name... other pages have 2 &lt;h1&gt; tags
24124
Sometimes, when you create a question which returns a lot of similar questions, it makes the height of the floating "Similiar Questions" box too big to fit on the page. As a result, it blocks some of the footer on the right hand side. It's actually doing it as I type this question.  I think a max height based on the view port - footerHeight should fix it.
11652
I have found a bug on Area 51. When we make heading like #Hello, visible as: Hello on our profile description, if the text is long then it is going outside its boundry. It is shown here:  And it is also shown in profile page when saved:  And, the page is scroll-able:  (Posted here too because  didn't received enough attention)
69379
Apologies if the question is a repeated one but I couldn't find a solution for this.   I have following HTML code on the home page of my website.   &lt;head&gt; &lt;title&gt;Sample title for illustrative purpose | example.com&lt;/title&gt; &lt;meta name = "description" content = "Here is an example of what a snippet looks like in Google's SERPs. The content that appears here is usually taken from the Meta Description tag if relevant."&gt; &lt;meta name = "keywords" content = "keyword1, keyword2"&gt; &lt;/head&gt; &lt;body&gt; &lt;header&gt; &lt;a href="https://www.example.com" class="navbar-brand"&gt;Home Page Link&lt;/a&gt; &lt;/header&gt; &lt;h1&gt;Sample Heading&lt;/h1&gt;   SERP shows following result:   Question: Why is example.com (the circled one in attached pic) is taken into account on SERP when it's not there in the title?
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?
103030
My code follows:  \documentclass{book} \usepackage{color,colortbl} \begin{document}  \begin{tabular}{ll&gt;{\color{red}}p{20pc}} a &amp;1 &amp;Test \end{tabular}  \end{document}   The output was:    Some unnecessary vertical space came before the last column. If I remove the tag \color{red} then everything works fine, how can I fix this?  Above said issue was fixed based on the suggestion given by David Carlisle and CarLaTeX, but the same problem was there if I use the supertabular environment, I used supertabular package for auto breaking table and the code follows:  \documentclass{book} \usepackage{color,colortbl,supertabular} \begin{document}  \begin{supertabular}{ll&gt;{\leavevmode\color{red}}p{4pc}&gt;{\leavevmode\color{black}}l&gt;{\leavevmode\color{black}}l&gt;{\leavevmode\color{red}}p{4pc}} a &amp;1 &amp;Test &amp;a &amp;1 &amp;Test\\ a &amp;1 &amp;Test &amp;a &amp;1 &amp;Test\\ \end{supertabular}  \end{document}
29308
I find the .youarehere a styling for the main navigation links causes the text to be a little difficult to read on the also-blue header background. Could we give it a little bit of background colour or something else that would provide more contrast?  For example:    which is the product of the following CSS*:  .nav ul li {     margin: -2px 10px 0 0;     padding: 5px; }  .nav ul li.youarehere {     background-color: rgba(0, 80, 112, 0.25);     border-radius: 5px; }  .nav ul li.youarehere a {     color: #A1E9FF; }   *For bonus points, also reduce the line height for the codeblocks!
21454
When mousing over a link to a question on the main page, a tooltip appears with the first few sentences of the question.  When a question includes a picture or quote in those first sentences, this leads to weird spacing in the tool tip. It doesn't matter where specifically the picture or quote is in the first few sentences, of course. Update: Further testing shows this weirdness also happens with Lists (bulleted at least) and Video Embeds (On Movies.SE)  For comparison, how a normal paragraph break is shown:        Single line break.   Picture as first paragraph in question:        Notice the double blank line.   Quote, as second paragraph:        Notice the triple line before and after the quoted text.   List as first paragraph:        Single unneeded line break.   Youtube/Flash Embed as first paragraph on Movies.SE"        This actually two issues, as for some reason embedding a video leads to the system rendering the question as having a &lt;p&gt; followed by the video &lt;div&gt; followed by another &lt;p&gt;.   I thought it may have had to do with how paragraph html marks are parsed, but the block quotes do not use &lt;p&gt; or &lt;/p&gt;. Instead they use &lt;blockquote&gt;  The same issue happens if the picture is 1st, 2nd or 3rd paragraph, if the text of the question is short enough for those to be included.  Can this be fixed? It's on multiple stacks (First example is EE.SE, second is here on Meta.SE)  Update: I looked at the source for the page, and the rendered title tag for the second example () is  &lt;h3&gt;&lt;a href="/questions/274319/golden-tag-badge-owner-can-insta-close-questions-not-originally-tagged-with-a-ta" class="question-hyperlink" title="As explained here (emphasys mine):      You can instantly close as a duplicate any question that was originally asked with a tag you have a gold badge for.    But golden tag badge owner can ..."&gt;Golden tag badge owner can insta-close questions not originally tagged with a tag they own a golden badge for [duplicate]&lt;/a&gt;&lt;/h3&gt;   Four line breaks (New Line characters) just dumped in. The fix would be easy. Eliminate multiple New Lines in a row when rendering the Title attribute. A better fix, include spaces in that. That question actually has 3 new lines, space, 1 new line, and then new line, 2 spaces, 3 new lines. Should be simple to implement, I'd think.
89395
Currently I am posting this on a page without any CSS style. Anyone else experiencing this?  I am using Firefox 3.5.2 and have tried refreshing (CTRL + F5) multiple times, even closing the browser. I do have Stylish installed and was using it to create a Hot Dog Stand theme, but it was inactive when this happened.  Screenshot:
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.
102812
&lt;div class="subheader"&gt;         &lt;h1&gt;         &lt;/h1&gt; &lt;/div&gt;   .subheader has style border-bottom: 1px solid #e4e6e8;.  The bottom border should be below the whole title (I guess, the point is to separate the whole title). But the height of this div is hardcoded height: 40px;.  Shouldn't it be like this? (the screenshot with height: 80px;).
123827
I've tried at least 4 times on  to add the tag css-columns, but each time after I save it disappears. When I type it in the tag box, it shows up and even has a tag wiki associated with it, but it will not stick when I save.
37085
I noticed now that Stack Overflow has its padding set to 0, unlike before. Note the padding on left side of the page; it looks shifted to the left and everything is touching the left-hand side of the screen.   Edit: Back to normal on mobile (iPhone 4 v6.1.3 / Safari). Edit: Same problem on mobile full site version, mobile version is fine  (iPhone 5 v6.1.4 / Safari).
6446
In the  (homepage), the asked/modified X mins ago text was left-aligned next to the tags. Previously the text was right-aligned. Seems some alignment issue introduced on that page recently. Screenshot for reference:      Configuration Version     Operating System Windows 10 Pro   Mozilla Firefox 89.0 (64-bit)   Google Chrome 91.0.4472.101 (Official Build) (64-bit)     Update: I see the same alignment issue in all other Stack Exchange site's &quot;Top Questions&quot; page too.