Why does block with text shift to the bottom? I know how to fix this issue (need to add "overflow: hidden" to the box), but I don't understand why it shift to the bottom, text inside the box is short, margins in browser-inspector are same as margins of example without text.
Example of the problem
HTML:
<div class="with-text">
<div class="box1">
SIMPLE TEXT
</div>
<div class="box2">
</div>
</div>
<div class="without-text">
<div class="box1">
</div>
<div class="box2">
</div>
</div>
CSS:
html, body {
font-size: 10px;
margin: 0;
height: 100%;
}
.box1 {
display: inline-block;
margin: 5px;
width: 50px;
height: 50px;
background: blue;
/* Fix the problem */
/* overflow: hidden; */
color: white;
}
.box2 {
display: inline-block;
margin: 5px;
width: 50px;
height: 50px;
background: red;
}
.with-text:before {
display: block;
content: "with-text";
text-transform: uppercase;
margin: 1rem;
}
.with-text {
box-sizing: border-box;
height: 50%;
border: 1px solid;
}
.without-text:before {
display: block;
content: "without text";
text-transform: uppercase;
margin: 1rem;
}
.without-text {
box-sizing: border-box;
height: 50%;
border: 2px solid black;
}
The problem is that by default vertical alignment of inline elements – baseline,
The text inside element affects it and pushes div to the bottom.
Use vertical-align: top to solve issue.
You can try to add vertical-align:
.box1 {
display: inline-block;
margin: 5px;
width: 50px;
height: 50px;
background: blue;
/* overflow: hidden; */
color: white;
vertical-align:top;
}
Related
This question already has answers here:
Text in Border CSS HTML
(10 answers)
Closed 2 years ago.
See the image above. I'd like to have the text on top of the border. How can I achieve this using html/css? Are there other alternatives
.wrapper {
width: 100%;
background: black;
border: 4px solid purple;
padding: 1rem;
color: #FFF;
}
.wrapper p {
text-align: center;
}
h1 {
text-align: center;
}
a {
display: table;
margin: 0 auto;
color: #FFF;
}
<div class="wrapper">
<h1>
Lorem ipsum dolor sit amet
</h1>
<p>
Lorem ipsum
</p>
Button
</div>
You can achieve this using the pseudo elements of the h1 tag. In short, you have a wrapper div that creates the border left, right and bottom and still then use the pseudo elements of h1 to make the top border.
.wrapper {
height: 100px;
margin: 0 auto;
width: 80%;
margin-top: 30px;
box-sizing: border-box;
border: 5px solid tomato;
border-top: none;
position: relative;
}
.wrapper h1 {
position: absolute;
top: -41px;
display: block;
text-align: center;
width: 100%;
overflow: hidden;
font-size: 2em;
}
h1:before,
h1:after {
content: "";
display: inline-block;
width: 50%;
margin-right:1em;
margin-left:-50%;
vertical-align: middle;
border-bottom: 5px solid tomato;
}
h1:after {
margin-right:-50%;
margin-left:1em;
}
/*Demo Only*/
body{
background:url("https://i.imgur.com/fL3tbdj_d.webp?maxwidth=728&fidelity=grand") no-repeat;
background-size:100% 100%;
<div class="wrapper">
<h1>
TITLE HERE
</h1>
</div>
<div class="wrapper">
<h1>
LONGER TITLE HERE
</h1>
</div>
You can try to change the position of your h1 to relative, and move It
.wrapper p {
position : relative;
bottom : 30%;
}
the bottom one means that It will move 30% to the top
Here is simple example may be it can give you an idea I found hard to edit your own codes so that's why I made this simple code
body {
background-color: lightgreen;
}
.cont {
height: 120px;
width: 400px;
border: 2px solid black;
position: relative;
margin: 40px
}
.cont:before {
content: "My Header title";
width: 180px;
/* border: 1px solid; */
position: absolute;
text-align: center;
top: -10px;
background-color: lightgreen;
left: 50%;
transform: translateX(-50%);
}
<div class="cont"></div>
I have three divs. I want them to be in one line so I used inline-block. When I resize the window the third element (nav) stacks and then the 2nd element (searchBar). I want the 2nd element stacks first and then the 3rd one. For undoing, the 3rd element and then the 2nd element.
body {
margin: 0px;
padding: 0px;
}
header {
width: 100%;
min-eight: 48px;
position: fixed;
background: #ffffff;
padding-bottom: 5px;
border-bottom: 2px solid #fed700;
}
nav {
width: 489.7px;
height: 18px;
background: red;
display: inline-block;
}
#searchBar {
width: 330px;
height: 16px;
background: blue;
display: inline-block;
white-space: nowrap;
}
#logo {
width: 220px;
height: 32px;
background: green;
display: inline-block;
}
<header>
<div id=logo>logo
</div>
<div id=searchBar>searchBar
</div>
<nav>nav
</nav>
</header>
You could use an inline-block wrapper with a min-width, wrapping the nav and searchBar. That would give the result you wanted in with the code sample supplied, but might cause problems in the real world, depending on your requirements.
body {
margin: 0px;
padding: 0px;
}
header {
width: 100%;
min-height: 48px;
position: fixed;
background: #ffffff;
padding-bottom: 5px;
border-bottom: 2px solid #fed700;
}
.wrapper {
min-width: 50%;
display: inline-block;
}
nav {
width: 489.7px;
height: 18px;
background: red;
display: inline-block;
}
#searchBar {
width: 330px;
height: 16px;
background: blue;
display: inline-block;
white-space: nowrap;
}
#logo {
width: 220px;
height: 32px;
background: green;
display: inline-block;
}
<header>
<div id=logo>logo
</div>
<div class="wrapper">
<div id=searchBar>searchBar
</div>
<nav>nav
</nav>
</div>
</header>
Before marking [duplicated] make sure to understand the question.
I'm having trouble to find out the best way to have 2 divs side by side where the first one is dynamic to it's content which can be added and removed. Checking the actual code explains it way more than me. It's basically an editor where there's the lines counter and the code/text part.
JSFiddle and code snippet:
body, html {
height: 100%;
margin: 0px;
}
#editor {
cursor: default;
font-family: consolas;
font-size: 12px;
height: 100%;
user-select: none;
}
#lines {
background-color: #2e3436;
color: #fff;
display: inline-block;
height: 100%;
padding: 0 7px;
}
#text {
background-color: #141414;
color: #B5834A;
cursor: text;
display: inline-block;
height: 100%;
vertical-align: top;
width: calc(100% - 34px);
}
<div id="editor">
<div id="lines">
<span>1</span>
<br><span>2</span>
<br><span>10</span>
<br><span>etc</span>
</div><div id="text">
<span><html><br>// Code<br></html></span>
</div>
</div>
Right now I'm using width: calc(100% - 34px); which does not fix the problem of when I add/remove line numbers that make its div change width.
I have tried multiple values in the CSS property display. I suspect something related with tables would work but I would prefer a not workaround and no JavaScript if possible.
If you haven't understood the issue, just remove the 10 and the etc and you will notice a white space in the end of the editor/text div.
You can use flexboxes:
body, html {
height: 100%;
margin: 0px;
}
#editor {
cursor: default;
font-family: consolas;
font-size: 12px;
height: 100%;
user-select: none;
display: flex; /* add */
}
#lines {
background-color: #2e3436;
color: #fff;
/*display: inline-block;*/
height: 100%;
padding: 0 7px;
}
#lines span {
display: block; /*add and remove <br>s*/
}
#text {
background-color: #141414;
color: #B5834A;
cursor: text;
/*display: inline-block;*/
height: 100%;
/*vertical-align: top;*/
width: 100%;
}
<div id="editor">
<div id="lines">
<span>1</span>
<span>2</span>
<span>10</span>
<span>etc</span>
</div><div id="text">
<span><html><br>// Code<br></html></span>
</div>
</div>
float instead of inline-block
body, html {
height: 100%;
margin: 0px;
}
#editor {
cursor: default;
font-family: consolas;
font-size: 12px;
height: 100%;
user-select: none;
}
#lines {
background-color: #2e3436;
color: #fff;
/*display: inline-block; nooooo */
float:left; /* yeeeeees */
height: 100%;
padding: 0 7px;
text-align: right; /* missing this :) */
}
#lines span{ display: block;} /* yeeeeyyy */
#text {
background-color: #141414;
color: #B5834A;
cursor: text;
/*display: inline-block; noooooo */
/* width: calc(100% - 34px); noooooo */
height: 100%;
vertical-align: top;
}
<div id="editor">
<div id="lines">
<span>1</span>
<span>2</span>
<span>10</span>
<span>etccccc</span>
</div>
<div id="text">
<span><html><br>// Code<br></html></span>
</div>
</div>
ive did myself using float for lines (to not use br's)
<div id="editor">
<div id="lines">
<span>1</span>
<span>2</span>
<span>10</span>
<span>etc</span>
</div>
<div id="text">
<span><html></span>
<span>// Code</span>
<span></html></span>
</div>
</div>
and display table properties to fit with all screen and get better alignments.
heres the example, works fine to me: https://jsfiddle.net/wkd0ssw3/
this will work in any navigator, be careful to use another properties like display:flex or calc, because may not work in all navigators...
Put the .editor element inside the .text element, make it a floated block and give the .textelement 100% width:
body, html {
height: 100%;
margin: 0px;
}
#editor {
cursor: default;
font-family: consolas;
font-size: 12px;
height: 100%;
user-select: none;
}
#lines {
background-color: #2e3436;
color: #fff;
float: left;
display: block;
height: 100%;
padding: 0 7px;
}
#text {
background-color: #141414;
color: #B5834A;
cursor: text;
display: inline-block;
height: 100%;
vertical-align: top;
width: 100%;
}
<div id="editor">
<div id="text">
<div id="lines">
<span>1</span>
<br><span>2</span>
<br><span>10000</span>
<br><span>etc</span>
</div>
<span><html><br>// Code<br></html></span>
</div>
</div>
I am trying to make a file hierarchy in html/css and I can't get these labels or the divs they are in to expand to full width. They only expand to the width of the visible area but I want the width of what they are in. Here is the fiddle to see what I am talking about. The grey area needs to all line up on the right.
a = 3;
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
div.hierarchy {
position: relative;
overflow: auto;
border-right: 1px solid grey;
width: 150px;
left: 0;
top: 0;
bottom: 0;
height: 100%;
}
div.hierarchy label {
display: block;
min-width: 100%;
background: #eee;
white-space: nowrap;
}
div.directory {
padding-left: 20px;
width: 100%;
}
div.directory label {
border: 1px solid grey;
width: 100%;
cursor: pointer;
}
<div class="hierarchy">
<label>Hierarchy</label>
<div class="directory">
<label>src</label>
<div class="directory">
<div class="file"><label>test.txt</label></div>
<div class="file"><label>readme.txt</label></div>
<div class="file"><label>a really long filename.txt</label></div>
</div>
</div>
</div>
You need to change your div.directory CSS class as follows:
div.directory {
display:inline-block;
padding-left: 20px;
}
I made the following changes:
1) Added display:inline-block;
2) Removed the width:100%; rule.
Here is an example:
http://jsfiddle.net/nnd7jyj1/
(As a side note, it's generally bad practice in CSS to apply both a width and either a padding or margin rule to the same element. The reason for this is that some browsers interpret the width to include the padding/margin and some don't, which leads to inconsistent results)
Simply add display:inline-block; to div.directory
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
div.hierarchy {
position: relative;
overflow: auto;
border-right: 1px solid grey;
width: 150px;
left: 0;
top: 0;
bottom: 0;
height: 100%;
}
div.hierarchy label {
display: block;
min-width: 100%;
background: #eee;
white-space: nowrap;
}
div.directory {
padding-left: 20px;
/* width: 100%; */
/* added */
display: inline-block;
}
div.directory label {
border: 1px solid grey;
width: 100%;
cursor: pointer;
}
<div class="hierarchy">
<label>Hierarchy</label>
<div class="directory">
<label>src</label>
<div class="directory">
<div class="file">
<label>test.txt</label>
</div>
<div class="file">
<label>readme.txt</label>
</div>
<div class="file">
<label>a really long filename.txt</label>
</div>
</div>
</div>
</div>
Before you roll your eyes and move on, I know how to solve this problem by using a fixed height and absolution positioning with top: and bottom:, but I want to solve it without using fixed heights. I want to learn more about CSS so I'm trying to solve this a different way.
I have set up a typical navbar running across the top, and then a scrolling content div below.
However! How do I fit the bottom scrolling div container to the remaining space without using absolute coordinates? I can't do position: absolute, because then I'd need to know the height of the navbar to set "top:". And I can't do "bottom: 0" because I'd have to specify a height.
Here's the JS filddle:
http://jsfiddle.net/8dugffz4/1/
The class of interest is ".result". I currently have the height fixed, which I don't want.
Thanks, y'all.
PT
CSS:
* {
font-family: Helvetica, Sans;
border: 0px;
margin: 0px;
padding: 0px;
}
.navBar {
width: auto;
overflow: auto;
border-bottom: 1px solid #bbb;
}
.pageBar {
float: right;
}
.pager {
cursor: pointer;
float: left;
border: 1px solid #bbb;
width: 2em;
height: 2em;
line-height: 2em;
text-align: center;
margin: 5px;
margin-left: 0px;
background: #eee;
color: #bbb;
}
.pager:hover {
background: #777;
border: 1px solid black;
color: white;
}
.fliph {
-ms-transform:scale(-1,1); /* IE 9 */
-moz-transform:scale(-1,1); /* Firefox */
-webkit-transform:scale(-1,1); /* Safari and Chrome */
-o-transform:scale(-1,1); /* Opera */
}
.results {
background: gray;
width: 100%;
height: 200px;
overflow: scroll;
}
.line {
height: 10em;
line-height: 10em;
border: 1px solid red;
}
HTML:
<body>
<div class='navBar'>
<div class='pageBar'>
<div class='pager'>◁</div>
<div class='pager'>1</div>
<div class='pager fliph'>◁</div>
</div>
</div>
<div class='results'>
<div class='line'>Line1</div>
<div class='line'>Line2</div>
<div class='line'>Line3</div>
<div class='line'>Line4</div>
</div>
</body>
Here's a solution that uses display: table and can actually achieve fluid heights:
http://jsfiddle.net/8dugffz4/8/
And a minimalistic snippet in case you want to see specifically what I did:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#table {
display: table;
height: 100%;
width: 100%;
}
#table > div {
display: table-row;
}
#navbar {
height: 45px;
opacity: .5;
}
#navbar > div {
height: 100%;
background: black;
}
#results {
height: 100%;
}
#results > div {
height: 100%;
overflow: auto;
background: green;
}
<div id="table">
<div id="navbar">
<div></div>
</div>
<div id="results">
<div></div>
</div>
</div>
If you're just looking for an alternative to the position: absolute method, you could use the height: 100% method:
html, body { height: 100%; }
body { box-sizing: border-box; padding-top: 45px; }
.navBar { height: 45px; margin-top: -45px; }
.results { height: 100%; }
Like so: http://jsfiddle.net/8dugffz4/7/