I want to make div (this will be container). In this div I have navbar and another div (this is background img). My container has 100vh. Navbar doesn't have height. Now I want to make "rest of this 100vh" this background div. My main html looks like:  &lt;!doctype html&gt; &lt;html lang="pl"&gt; &lt;head&gt;   &lt;meta charset="utf-8"&gt;  &lt;/head&gt;  &lt;body&gt;  &lt;div class="head-container"&gt;     &lt;header&gt;         &lt;img class="logo" src="css/873438.jpg" alt='logo' /&gt;         &lt;nav&gt;             &lt;ul class="nav_links"&gt;                 &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;                 &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;                 &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;             &lt;/ul&gt;         &lt;/nav&gt;             &lt;a class="cta" href="#"&gt;&lt;button&gt;Add post&lt;/button&gt;&lt;/a&gt;     &lt;/header&gt;      &lt;div class="background"&gt;       &lt;/div&gt;  &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;   And now my CSS file  *{     margin: 0;     padding: 0;  }  .head-container{     height: 100%;     width: 100%; }  .background {     height: 100vh;     background-color: gray; }    Background div has 969 px height, like my whole window. I want to make 100vh for whole these 2 divs. What am I doing wrong?
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.
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;
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?
28603
I'd like to, first thing before writing anything on a page, add some vertical space.  Minimal (non)working example:  \documentclass{article} \begin{document}  \vspace{250px} I want to be further down on the page :(  \vspace{250px} Haha! Sucker :D \end{document}     How can I get the first \vspace to work, just like the second one?
32279
Hat in profile image gets cut like the following image:  I've inspected the element: &lt;div class=&quot;gravatar-wrapper-32 wb-hat-checked&quot;&gt;   &lt;div class=&quot;hat&quot; style=&quot;float: left; display: block; width: 0px; height: 0px; overflow: visible; position: relative; left: 6px; top: -6px;&quot; data-hatid=&quot;9828326&quot;&gt;      &lt;img src=&quot;data:image/svg+xml, ---omitted---&quot; width=&quot;19&quot; height=&quot;18&quot; style=&quot;display: block;&quot;&gt;.    &lt;/div&gt;   &lt;img src=&quot;https://i.stack.imgur.com/jMC4J.png?s=64&amp;amp;g=1&quot; alt=&quot;&quot; width=&quot;32&quot; height=&quot;32&quot; class=&quot;bar-sm&quot;&gt; &lt;/div&gt;  CSS for gravatar-wrapper is like this: class*=&quot;gravatar-wrapper-&quot;] {     padding: 0;     overflow: hidden; }  Changing overflow:hidden to overflow:visible shows avatar correctly.
15546
I've noticed this issue on a handful of other communities, but making the browser window narrow (mine is 1080x960) makes the .post-layout and #sidebar elements overlap. Maybe something to do with the grid CSS? The #mainbar element seems to be the correct width and changing the .post-layout's overflow-x to auto seems to "fix" it  From retrocomputing:    From this post, because we are meta after all:    Specs:   Google Chrome Version 78.0.3904.108 (Official Build) (64-bit) Ubuntu 18.04.3 LTS
12792
My DOM looks like this:  &lt;div id="d1"&gt;    &lt;div class="c1"&gt;             &lt;a href="#"&gt;&lt;img src="img1_on.gif"&gt;&lt;/a&gt;             &lt;a href="#"&gt;&lt;img src="img2_on.gif"&gt;&lt;/a&gt;    &lt;/div&gt; &lt;/div&gt;   When someone clicks on an image, I want the image src to change to &lt;img src="imgx_off.gif"&gt; where x represents the image number 1 or 2.  Is this possible or do I have to use CSS to change the images?
173
I want to center a div vertically with CSS. I don't want tables or JavaScript, but only pure CSS. I found some solutions, but all of them are missing Internet Explorer 6 support. &lt;body&gt;     &lt;div&gt;Div to be aligned vertically&lt;/div&gt; &lt;/body&gt;  How can I center a div vertically in all major browsers, including Internet Explorer 6?
26006
I want to show an image from an URL with a certain width and height even if it has a different size ratio.  So I want to resize (maintaining the ratio) and then cut the image to the size I want.  I can resize with html img property and I can cut with background-image.  How can I do both?  Example:  This image:     Has the size 800x600 pixels and I want to show like an image of 200x100 pixels   With img I can resize the image 200x150px:  &lt;img      style="width: 200px; height: 150px;"      src="http://i.stack.imgur.com/wPh0S.jpg"&gt;    That gives me this:    &lt;img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg"&gt;       And with background-image I can cut the image 200x100 pixels.  &lt;div      style="background-image:            url('https://i.stack.imgur.com/wPh0S.jpg');      width:200px;      height:100px;      background-position:center;"&gt;&amp;nbsp;&lt;/div&gt;    Gives me:        &lt;div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;"&gt;&amp;nbsp;&lt;/div&gt;      How can I do both?  Resize the image and then cut it the size I want?
30199
I am trying to save a minipage width and height in one environment, and use these dimensions in a subsequent environment of mine, to make a picture environment. The idea is to create a picture on the right of the minipage using the rest of the \columnwidth, and with the same height as the minipage on the left. The problem is, as far as I understand, that neither the lengths nor the \savebox'es set within the first environment survive to the next one, as they are subject to scoping rules of LaTeX.  So my question is, how can save dimensions (or the box) in one environment and use them in another?  Update: here is (non-working) example using \global:  \documentclass{article} \usepackage{calc} \usepackage{picture}  \newsavebox{\questiontextbox} \newsavebox{\questionpicturebox} \newlength{\questiontextheight}  \newenvironment{questiontext}[1]% {\begin{lrbox}{\questiontextbox}% \begin{minipage}[t]{#1}}% {\end{minipage}\end{lrbox}% \noindent\usebox{\questiontextbox}% \settoheight{\questiontextheight}{\usebox{\questiontextbox}}% **** \global\setlength{\questiontextheight}{\questiontextheight}}  \newenvironment{questionpicture}[1]% {\begin{lrbox}{\questionpicturebox}% \setlength{\unitlength}{1cm}% \begin{picture}(#1-\fboxsep-\fboxsep,\questiontextheight)}% {\end{picture}\end{lrbox}% \fbox{\raisebox{-\questiontextheight}{\usebox{\questionpicturebox}}}}  \begin{document} \begin{questiontext}{0.2\columnwidth} There must be some text here so I made it up to fill more than just a single line. \end{questiontext}% \begin{questionpicture}{0.8\columnwidth} \put(0.5,0.5){\circle{0.4}} \end{questionpicture}  \end{document}   The \fbox is there only to visualize that the picture height is only two \fboxsep's. I tried to put \global before \settoheight in the line marked with ****, which does not work, either. No idea what I am doing wrong; could the packages calc or picture (which is needed to use real dimensions) prevent proper \global behaviour?
23536
So I have created a Site Page that has the "New Experience" look and I would like to change its style a little. Nothing major, just the height, width, color, etc. However, I can not seem to figure it out.   For example, I tried to change the height of the .pageHeader to a smaller value.   .pageHeader{ height: 150px !important } //for example of CSS in file   Here is a reference image of the page i'm trying to change    I tried adding   &lt;link href="../SiteAssets/file.css" rel="stylesheet" type="text/css"&gt;   to the .aspx page using SharePoint Designer and it didn't work.    I also tried adding   &lt;SharePoint:CssRegistration ID="CssRegistration" Name="SiteAssets/file.css" runat="server" /&gt;   to the .aspx page and it didn't work    I tried to use the "Embed" feature to add the CSS; however, it complains and says,     This embed code doesn't seem to work. We only support iframe based embeds.   Question:   How can I add custom CSS to this type page?  I can't seem to figure it out and I'm not sure exactly why the page will not load the file.  Is this even possible?
13314
I'm looking for a way to insert a &lt;style&gt; tag into an HTML page with JavaScript.  The best way I found so far:  var divNode = document.createElement("div"); divNode.innerHTML = "&lt;br&gt;&lt;style&gt;h1 { background: red; }&lt;/style&gt;"; document.body.appendChild(divNode);   This works in Firefox, Opera and Internet Explorer but not in Google Chrome. Also it's a bit ugly with the &lt;br&gt; in front for IE.  Does anyone know of a way to create a &lt;style&gt; tag that   Is nicer Works with Chrome?   Or maybe   This is a non-standard thing I should avoid Three working browsers are great and who uses Chrome anyway?
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.
914
I want to overlay one image with another using CSS. An example of this is the first image (the background if you like) will be a thumbnail link of a product, with the link opening a lightbox / popup showing a larger version of the image.   On top of this linked image I would like an image of a magnifying glass, to show people that the image can be clicked to enlarge it (apparently this isn't obvious without the magnifying glass).
30295
#container {     width: 75%;     float: right; }   If I change the width to %100 it affects the entire site, i just want the homepage to be at 100% width and all other pages with sidebar 75%
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.
51888
I've been learning LaTeX and this community has been very helpful. Currently, I'm trying to set up corporate letters but as a newbie I'm encountering a  of , so I'm posting them one by one instead of putting it in the comments... maybe this helps others as well.  Anyway, I am trying to implement this  that indicates that I can use vbox to float an image to the right of my header. I almost have this working, but I now try to adjust this to get my logo to stick to the top of the page. So I want to have this at the right top of my document. This is quite difficult! When I place the vbox, it creates unwanted spacing, for some odd reason. So I can not get the logo to be at the right top, even though I 'reset' every possible margin to 0 (in my opinion). Here is my distilled code:  \documentclass[a4paper]{article} \usepackage{graphicx} \graphicspath{{./img/}} \usepackage{color} \usepackage{xcolor} \definecolor{orange}{HTML}{DD4616} \definecolor{white}{HTML}{FFFFFF} \usepackage{fullpage} \usepackage[margin=0cm, paperwidth=215.9mm, paperheight=30mm,top=0cm]{geometry} \parindent=0pt  \begin{document} \fboxsep0pt  \pagecolor{orange}   \fbox{\vbox to 0pt{\hfill\fbox{\includegraphics[height=3cm]{logo}}}}  \end{document}   I've used a full black logo for illustrative purposes. Here you can see this:    The black line is the vbox border. For some reason, it jumps down. The only way to get rid of this that I found out about is this:    Which means that I need to add:  \edef\theprevdepth{\the\prevdepth}\nointerlineskip \vbox to 0pt{...}\prevdepth=\theprevdepth   But there are two problems with this:   I get an error with I try this (Improper \prevdepth.) More importantly, I really want to understand my code at this point, and get to master the basics of positioning elements. This feels overcomplicated and I do not understand it at all.    Is there any easy way to position an image at the right top of a document?