I have a <pre> element and I need the line height to be exactly 15px (so it lines up with something else).
I've played around with font-size and line-height but they seem to interact in non-obvious ways. Can someone explain how they work and if it is possible to force exactly 15px line heights?
Ok it turns out that #ÁlvaroGonzález's suggestion does work in a simple test case I made. For some reason it is really giving me a line height of 16px in my actual file, so something else weird must be going on.
Shown here for 10px because coincidentally the default line height in Chrome seems to be exactly 15px.
.ruler {
width: 50px;
height: 10px;
}
pre {
margin: 0;
line-height: 1;
font-size: 10px;
}
<div style="display: flex; align-items: flex-start;">
<div>
<div class="ruler" style="background: red;"></div>
<div class="ruler" style="background: green;"></div>
<div class="ruler" style="background: blue;"></div>
<div class="ruler" style="background: red;"></div>
<div class="ruler" style="background: green;"></div>
<div class="ruler" style="background: blue;"></div>
<div class="ruler" style="background: red;"></div>
<div class="ruler" style="background: green;"></div>
<div class="ruler" style="background: blue;"></div>
</div>
<pre>
Why would
somebody mark
this question
as off-topic?
Whoever did
this you are
what is
wrong with
StackOverflow.
</pre>
</div>
Related
This question already has an answer here:
flex items ignoring width
(1 answer)
Closed 1 year ago.
I am trying to have a number of columns with exact widths, and their heights split evenly between some number of elements. For some reason, despite my indicating an exact 200px width on each column, they are instead getting a computed width of 162px somehow.
Chrome dev tools is showing some weird arrow thing indicating that it it was shrunk from it's intended size for some reason. I've even tried removing all of the content from the div's as possible so as to rule out some weird interaction with the size of children.
The HTML content for the relevant area is this:
div {
background: rgba(255, 0, 0, .1);
}
<div style="display: flex;">
<div style="width: 200px; margin-right: 100px;">
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
</div>
<div style="width: 200px; margin-right: 100px;">
<div style="height: 100px;"></div>
<div style="height: 100px;"></div>
<div style="height: 100px;"></div>
<div style="height: 100px;"></div>
</div>
<div style="width: 200px; margin-right: 100px;">
<div style="height: 200px;"></div>
<div style="height: 200px;"></div>
</div>
<div style="width: 200px; margin-right: 100px;">
<div style="height: 400px;"></div>
</div>
</div>
Including some dev-tools highlighting (showing the arrow thing I described) it is rendering like this (the "round" labels at the top are not in the HTML content above but are properly 200px + 100px margin):
I have never seen anything like this before, especially those arrow things from the dev tools. Is there something obvious I'm missing or something I should look for to diagnose this?
Setting display: flex turns the sizing of child elements over to the flex container. If you don't want the individual elements to resize, set flex-grow: 0, flex-shrink: 0, and flex-basis: 200px. You can do all three using the flex shorthand:
flex: 0 0 200px;
.container {
display: flex;
}
.container > * {
flex: 0 0 200px;
margin-right: 100px;
}
div {
background: #cccccccc;
}
<div class="container">
<div style="width: 200px; margin-right: 100px;">
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
</div>
<div style="width: 200px; margin-right: 100px;">
<div style="height: 100px;"></div>
<div style="height: 100px;"></div>
<div style="height: 100px;"></div>
<div style="height: 100px;"></div>
</div>
<div style="width: 200px; margin-right: 100px;">
<div style="height: 200px;"></div>
<div style="height: 200px;"></div>
</div>
<div style="width: 200px; margin-right: 100px;">
<div style="height: 400px;"></div>
</div>
</div>
This is the default behaviour for Flexbox. If you add up all your widths, so 200 width + the 100 margin, you get 300 * 4 = 1200px. If your viewport is smaller than 1200px then the browser will try to calculate the best width it can to fit all your div along the main axis. thus you are getting 162 + 100 * 4 is just shy of 1200. Try resize your viewport or the browser screen to bigger than this and you should get the expected behaviour.
The arrow you are seeing is Chrome dev tools way of telling you your original width has been made smaller to fit all content.
So I've been trying to make a chatroom, and i want admins to be able to delete messages. I have made an img tag which should be inside and in the right side of the div, but its under and to the right side of the div. How should i do that?
HTML Code (snippet was weird, so try in a regular html file)
<div style="border: 5px solid black; border-radius: 5px; overflow-y: scroll; height: 70%;" id="chat">
<div style="width: 95%;">
<span style="color: red"><b>CONSOLE</b></span> <span style="color: grey;">3/11 11.28</span>
<div style="width:100%;"> Chat startet</div>
<img src="https://www.shareicon.net/data/512x512/2015/12/19/690073_sign_512x512.png" style="top: 0px; height: 3.5%; float: right; opacity: 0.7;" > <!-- The img that is a problem -->
<br>
</div>
</div>
I believe you are looking for something like this:
<div style="display: flex; justify-content: space-between;">
<div>
<span style="color: red"><b>CONSOLE</b></span>
<span style="color: grey;">3/11 11.28</span> <br>
<span>Chat started</span>
</div>
<img src="https://www.shareicon.net/data/512x512/2015/12/19/690073_sign_512x512.png" height="40px" width="40px" style="opacity: 0.7;">
</div>
This code uses css flexbox to create such positioning. I recommend you look into the flexbox more, as it will solve 90% of your positioning issues for you, and its usage is at the same time way less problematic than usage of floats. You could find more about the topic here: https://internetingishard.com/html-and-css/flexbox/
I would also recommend not to mix your markup and styling, and use css classes to apply styling to your elements instead. It will allow you to re-use styles without lots of duplication as your page gets more complex, and also allow you to keep your markup much cleaner and more readable.
you should use something like
display: inline-block
for the elements, you want to be in the same row.
or you can use something like
display: flex /*or inline-flex */
in the parent, div to do so.
if you decide to use flex you can see a nice guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm not sure that I got it right, but I guess you need one of these to solve your problem:
<div style="border: 5px solid black; border-radius: 5px; overflow-y: scroll; height: 70%;" id="chat">
<div style="width: 95%;">
<span style="color: red"><b>CONSOLE</b></span> <span style="color: grey;">3/11 11.28</span>
<div style="width:100%;"> Chat startet
<img src="https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" style="top: 0px; height: 3.5%; float: right; opacity: 0.7;">
</div>
<br>
</div>
</div>
or
<div style="border: 5px solid black; border-radius: 5px; overflow-y: scroll; height: 70%;" id="chat">
<div style="width: 95%;">
<span style="color: red"><b>CONSOLE</b></span> <span style="color: grey;">3/11 11.28</span>
<span style="float: right;">
<img src="https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" style="top: 0px; height: 3.5%; float: right; opacity: 0.7;">
</span>
<div style="width:100%;"> Chat startet</div>
<br>
</div>
</div>
If it helps or not, please let me know :)
I have two Div's, the left one is a sidebar of sorts (but it does not extend the full height of the screen), and the right one is the content Div that should occupy as much of the screen as possible and collapse/move underneath the sidebar as the screen shrinks. Right now I have the sidebar set up how I expect it to be, but the Content Div begins to overlap the Sidebar as the page shrinks and does not move below.
I have tried different position: parameters (fixed,absolute,relative) different width/min-width values, as well as different values for float. I have everything in html styling right now for simplicity. The css files that were being used seemed to be interfering with functionality so I attempted to override them via styling directly within the HTML.
<body style="padding-top: 5px; padding-bottom: 20px; padding-left: 15px; padding-right: 15px; min-height: 80%; min-height: 50vh;">
<h3 class="text-center"> Title </h3>
<div class="SideContainer" style="background-color: green;position:absolute;left:0; top:80; bottom: 400;width: 20vw;min-width: 200px;max-width: 300px;padding: 3px;">
<div style="background-color: red;width: 100%;">Keys</div>
<div style="background-color: blue;">Error Box</div>
<div style="background-color: grey;border: none;width: 100%;border-radius: 3px;">File Menu Button</div>
<p> Enter Display Name</p>
<div style="background-color: yellow;">Name Box</div>
<p> Users Viewing </p>
<div style="background-color: orange;">User box</div></div>
<div class="ContentContainer" style="background-color: gold;position: relative;float: left;left:20vw; top: 25;width:80%;min-width: 400px;margin-right: 3px;padding: 8px;">
<div style="background-color: purple;border: 1px solid;border-radius: 4px;line-height: 2.6;padding: 3px;margin-bottom: 6px;">Doc Title</div>
<div style="background-color: maroon;min-height: 150px;border: 1px solid;border-radius: 4px;padding: 3px;">Doc Content</div></div><body>
Content div should shrink, and at a certain point, move below the Sidebar div.
<body style="padding-top: 5px; padding-bottom: 20px; padding-left: 15px; padding-right: 15px; min-height: 80%; min-height: 50vh;">
<h3 class="text-center"> Title </h3>
<div style="display: flex; flex-flow: row wrap;">
<div class="SideContainer" style="background-color: green;left:0; top:80; bottom: 400;width: 20vw;flex-grow: 1;padding: 3px;min-width: 200px;max-width: 300px">
<div style="background-color: red;width: 100%;">Keys</div>
<div style="background-color: blue;">Error Box</div>
<div style="background-color: grey;border: none;width: 100%;border-radius: 3px;">File Menu Button</div>
<p> Enter Display Name</p>
<div style="background-color: yellow;">Name Box</div>
<p> Users Viewing </p>
<div style="background-color: orange;">User box</div>
</div>
<div class="ContentContainer" style="background-color: gold;float: left;left:20vw; flex-grow: 4;top: 25;margin-right: 3px;padding: 8px;min-width: 200px;">
<div style="background-color: purple;border: 1px solid;border-radius: 4px;line-height: 2.6;padding: 3px;margin-bottom: 6px;">Doc Title</div>
<div style="background-color: maroon;min-height: 150px;border: 1px solid;border-radius: 4px;padding: 3px;">Doc Content</div>
</div>
</div>
<body>
I got your code working using Display:flex, it's a good idea to also separate your code into html and css and use classes references in the HTML. There is a lot of benefits to this including easier to maintain, cleaner, and also makes it easy to follow etc.
For my project, I'm creating an app that allows users to paint pictures.
I managed to create the canvas and paint brush, and already know how to work the Javascript and Jquery.
The only problem I'm having is with creating the color palette.
HTML
<div id = "colors">
<div style="background: #990000;"></div>
<div style="background: #CC0000;"></div>
<div style="background: #CC3300;"></div>
<div style="background: #FFCC00;"></div>
<div style="background: #FFFF00;"></div>
<div style="background: #CCFF00;"></div>
<div style="background: #66FF00;"></div>
<div style="background: #003300;"></div>
<div style="background: #33FFCC;"></div>
<div style="background: #3300CC;"></div>
<div style="background: #660033;"></div>
<div style="background: #660066;"></div>
<div style="background: #000000;"></div>
<div style="background: #ffffff;"></div>
</div>
application.css
#colors {
width: 180px;
height: 30px;
}
I created a fiddle
http://jsfiddle.net/fqfbprd7/1/
If I add some text to the div, like I did in the fiddle, I see the colors rendered, but they are all on their separate line. Similar to paint, this should be a color selection box, where there are 7 colors per line. Just the colors though, and no text.
I even set the width and height attributes for my colors div, to render a color box.
Here the updated fiddle:
http://jsfiddle.net/fqfbprd7/2/
#colors div {
width: 25px;
height: 30px;
float: left;
}
Target the DIV's inside #colors and use position property value of inline-block to get them to display next to eahch other.
#colors div {
display: inline-block;
}
#colors {
width: 180px;
height: 30px;
}
#colors div {
display: inline-block;
}
<div id ="colors">
<div style="background: #990000">A</div>
<div style="background: #CC0000">B</div>
<div style="background: #CC3300">C</div>
<div style="background: #FFCC00">D</div>
<div style="background: #FFFF00">E</div>
<div style="background: #CCFF00">F</div>
<div style="background: #66FF00">G</div>
<div style="background: #003300">H</div>
<div style="background: #33FFCC">I</div>
<div style="background: #3300CC">J</div>
<div style="background: #660033">K</div>
<div style="background: #660066">L</div>
<div style="background: #000000">M</div>
<div style="background: #ffffff">N</div>
</div>
We have HTML with CSS:
<div style="width: 80%"><!--This width can be different or expressed in % -->
<div>
<div style="width: 50%; background-color: blue; display: inline-block;">
<br/>A<br/>B<br/>C<br/>D<br/>E<br/>F<br/>G<br/>H<br/>I<br/>
</div><!--
--><div style="width: 50%; background-color: brown; display: inline-block;">
<br/>A<br/>B<br/>C<br/>D<br/>E<br/>F<br/>G<br/>H<br/>I<br/>
</div>
</div>
<div style="height: 110px; overflow-y: scroll;">
<div style="width: 50%; background-color: yellow; display: inline-block;">
<br/>A<br/>B<br/>C<br/>D<br/>E<br/>F<br/>G<br/>H<br/>I<br/>
</div><!--
--><div style="width: 50%; background-color: green; display: inline-block;">
<br/>A<br/>B<br/>C<br/>D<br/>E<br/>F<br/>G<br/>H<br/>I<br/>
</div>
</div>
</div>
And a result:
All divs have 50% width, but bottom ones are narrower, because of scroll bar. I know I could calculate scroll bar width and make top ones narrower, but is there better solution? Solution using HTML/CSS only is preferred.
Fiddle here: http://jsfiddle.net/s6rhs/6/
You can use custom jquery scroll bars for your page with the help of some jquery plugins like these
https://github.com/inuyaksa/jquery.nicescroll
So that you won't have trouble with default scrollbars of the browsers.
You could use flex layout, introduced in CSS3. Maybe there are too many browsers out there, you want to support, but they could use your current "solution".
Support: http://caniuse.com/#search=flex
If there's a scrollbar, your right container is a little smaller depending on the width of the scrollbar, but that shouldn't be noticed by users.
At the moment, the background scrolls out, but I think you'll find a solution for that.
Now, my answer isn't only text, there's also some code and a jsfiddle for you:
CSS
.flex {
display: flex;
flex-direction: row;
width: 100%;
}
.flex > div {
flex-grow: 1;
}
.flex > div:first-of-type {
width: 250px;
flex-grow: 0;
}
HTML
<div style="width: 500px">
<div class="flex">
<div style="background: green">
<br/>A
<br/>B
<br/>C
<br/>D
<br/>E
<br/>F
<br/>G
<br/>H
<br/>I
<br/>
</div>
<div style="background: yellow">
<br/>A
<br/>B
<br/>C
<br/>D
<br/>E
<br/>F
<br/>G
<br/>H
<br/>I
<br/>
</div>
</div>
<div class="flex" style="height: 110px; overflow-y: scroll;">
<div style="background: blue">
<br/>A
<br/>B
<br/>C
<br/>D
<br/>E
<br/>F
<br/>G
<br/>H
<br/>I
<br/>
</div>
<div style="background: red">
<br/>A
<br/>B
<br/>C
<br/>D
<br/>E
<br/>F
<br/>G
<br/>H
<br/>I
<br/>
</div>
</div>
</div>