I'm confused as to why when I exceed the 100vh, a horizontal scroll bar appears. I know you can use overflow-x: hidden; but is there a way to solve it without using that?
here's a sample code:
body {
margin: 0;
padding: 0;
}
.job-box {
width: 100vw;
height: 150px;
display: inline-block;
text-align: center;
vertical-align: middle;
height: 25vh;
border-bottom: solid 1pt #000000;
}
.job-box img {
height: 10vh;
}
.title-box {
background-color: #000000;
color: #ffffff;
font-family: calibri;
}
<div class="job-box">
assaas
</div>
<div class="job-box">
assaas
</div>
<div class="job-box">
assaas
</div>
<div class="job-box">
assaas
</div>
When you remove the last div, the horizontal scrollbar disappears.
The effect you're describing is the result of the VERTICAL SCROLLBAR taking space on the side of the page, and in order to maintain the width of the <div>s, you get a HORIZONTAL SCROLLBAR.
If you use a with of 100% instead, you won't have this problem:
body {
margin: 0;
padding: 0;
}
.job-box {
width: 100%;
height: 150px;
display: inline-block;
text-align: center;
vertical-align: middle;
height: 25vh;
border-bottom: solid 1pt #000000;
}
.job-box img {
height: 10vh;
}
.title-box {
background-color: #000000;
color: #ffffff;
font-family: calibri;
}
<div class="job-box">
assaas
</div>
<div class="job-box">
assaas
</div>
<div class="job-box">
assaas
</div>
<div class="job-box">
assaas
</div>
Related
I have a flex container with individual child containers within it. Within those child containers, I have a simple content div and a title div. What I am trying to do is centre the title text vertically, but keep it at the top of the box. Then, I am trying to centre the content div in the box, both horizontally and vertically.
I have sort of figured it out (but knowing me this code is a load of drivel), but now when the viewport size decreases, the content text (with overflow: hidden) does not hide when the size decreases. I have figured out that this is down to the margin being set to 0, but I need it to be set to 0 in order for the bloody content div to center!
Any and all help offered is much appreciated. Here is a link to the jsfiddle that I created in order to help you visualise the problem. Change the size of the viewport and you'll see my issue, namely on the "Total cash amongst players" box.
http://jsfiddle.net/mpqbassm/
body {
background: #000;
}
.flex-container {
display: flex;
justify-content: space-around;
margin-right: 10px;
margin-bottom: 10px;
}
.flex-info {
color: white;
font-family: 'Arial', sans-serif;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2);
padding: 10px;
border-radius: 2px;
width: 20%;
height: 100px;
display: flex;
flex-direction: column;
}
.flex-info.green {
background: #79B0B4;
}
.flex-info.blue {
background: #7993B4;
}
.flex-info.foam {
background: #79B47D;
}
.flex-info.pink {
background: #9B79B4;
}
.flex-info.red {
background: #B4797F;
}
.flex-info .flex-title {
font-size: 16px;
text-align: center;
white-space: nowrap;
overflow: hidden;
}
.flex-info .flex-content {
font-size: 40px;
margin: auto;
overflow: hidden;
}
<div class="flex-container">
<div class="flex-info green">
<div class="flex-title">Number of characters created</div>
<div class="flex-content">46,401</div>
</div>
<div class="flex-info blue">
<div class="flex-title">Number of vehicles purchased</div>
<div class="flex-content">499,012</div>
</div>
<div class="flex-info foam">
<div class="flex-title">Total cash amongst players</div>
<div class="flex-content">$192,012,299</div>
</div>
<div class="flex-info red">
<div class="flex-title">Total bans issued</div>
<div class="flex-content">12</div>
</div>
To stop the content from overflowing, overflow: hidden must be on the parent container of the element.
In this case, that would be any div with the class .flex-info.
Take a look at this in practice below.
body {
background: #000;
}
.flex-container {
display: flex;
justify-content: space-around;
margin-right: 10px;
margin-bottom: 10px;
}
.flex-info {
color: white;
font-family: 'Arial', sans-serif;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2);
padding: 10px;
border-radius: 2px;
width: 20%;
height: 100px;
display: flex;
flex-direction: column;
overflow:hidden;
}
.flex-info.green {
background: #79B0B4;
}
.flex-info.blue {
background: #7993B4;
}
.flex-info.foam {
background: #79B47D;
}
.flex-info.pink {
background: #9B79B4;
}
.flex-info.red {
background: #B4797F;
}
.flex-info .flex-title {
font-size: 16px;
text-align: center;
white-space: nowrap;
overflow: hidden;
}
.flex-info .flex-content {
font-size: 40px;
margin: auto;
overflow: hidden;
}
<div class="flex-container">
<div class="flex-info green">
<div class="flex-title">Number of characters created</div>
<div class="flex-content">46,401</div>
</div>
<div class="flex-info blue">
<div class="flex-title">Number of vehicles purchased</div>
<div class="flex-content">499,012</div>
</div>
<div class="flex-info foam">
<div class="flex-title">Total cash amongst players</div>
<div class="flex-content">$192,012,299</div>
</div>
<div class="flex-info red">
<div class="flex-title">Total bans issued</div>
<div class="flex-content">12</div>
</div>
</div>
I need to give vertical height for the right element with full background. I tried by setting
height:100%;
max-height: 100%
but the element takes only content height
.full_container {
height: 350px;
border: 1px solid #ddd;
}
.pull-left {
float: left;
}
.width50 {
width: 50%;
}
.inline_height {
color: #fff;
padding: 10px;
background: #333;
}
.height100 {
padding: 10px;
height: 100%;
max-height: 100%;
background: #e8e8e8;
}
<div class="full_container">
<div class="clearfix">
<div class="pull-left width50">
<div class="inline_height">
Content height only
</div>
</div>
<div class="pull-left width50">
<div class="height100">
<div>I need to show this div element height to 100%</div>
</div>
</div>
</div>
</div>
Try giving the .clearfix class a display:flex and height:100%
.clearfix {
display: flex;
height: 100%;
}
Example below
.full_container {
height: 350px;
border: 1px solid #ddd;
}
.pull-left {
float: left;
}
.width50 {
width: 50%;
}
.inline_height {
color: #fff;
padding: 10px;
background: #333;
}
.height100 {
padding: 10px;
height: 100%;
max-height: 100%;
background: #e8e8e8;
}
.clearfix {
display: flex;
height: 100%;
}
<div class="full_container">
<div class="clearfix">
<div class="pull-left width50">
<div class="inline_height">
Content height only
</div>
</div>
<div class="pull-left width50">
<div class="height100">
<div>I need to show this div element height to 100%</div>
</div>
</div>
</div>
</div>
See this:
I have added display: flex for .full_container
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.full_container {
height: 350px;
border: 1px solid #ddd;
display: flex;
}
.pull-left {
float: left;
}
.width50 {
width: 50%;
}
.inline_height {
color: #fff;
padding: 10px;
background: #333;
}
.height100 {
padding: 10px;
height: 100%;
max-height: 100%;
background: #e8e8e8;
}
<div class="full_container">
<div class="pull-left width50">
<div class="inline_height">
Content height only
</div>
</div>
<div class="pull-left width50">
<div class="height100">
<div>I need to show this div element height to 100%</div>
</div>
</div>
</div>
I have a small section in the mobile version of my website with 50-50 image/text format which looks and functions as I want, but when I resize the browser a small gap appears at the bottom of the images.
I have tried everything but cannot figure out the issue (I am sure it is something minor I am staring right at). Closest I came was vertical-align: bottom; to the image but the gap just started appearing at the top instead.
.mobilecontainer1 {
display: block;
width: 100%;
float: left;
box-sizing: border-box;
}
.mobilebox {
float: left;
width: 50%;
overflow: hidden;
line-height: 0;
}
.mobilebox img {
width: 100%;
}
.mobiletextwrap {
padding-top: 19%;
}
#mobilebox1 {
background: black;
color: white;
}
#mobilebox2 {
background-color: white;
color: black;
}
#mobilebox3 {
background-color: black;
color: white;
}
.mobileboxwrap {
width: 100%;
float: left;
display: block;
}
#mobileboxwrap1 {
background: black;
color: white;
height: 100%;
overflow: hidden;
}
#mobileboxwrap2 {
background: white;
color: black;
height: 100%;
overflow: hidden;
}
#mobileboxwrap3 {
background: black;
color: white;
height: 100%;
overflow: hidden;
}
<div class="mobileboxwrap" id="mobileboxwrap1">
<div class="mobilebox">
<img src="img/mobilebackground_3.png">
</div>
<div class="mobilebox" id="mobilebox1">
<div class="mobiletextwrap">
<header>
<h2>Info</h2>
</header>
</div>
</div>
</div>
<div class="mobileboxwrap" id="mobileboxwrap2">
<div class="mobilebox" id="mobilebox2">
<div class="mobiletextwrap">
<header>
<h2>Drinks</h2>
</header>
</div>
</div>
<div class="mobilebox">
<img src="img/mobilebackground_2.png">
</div>
</div>
<div class="mobileboxwrap" id="mobileboxwrap3">
<div class="mobilebox">
<img src="img/mobilebackground_1.png">
</div>
<div class="mobilebox" id="mobilebox3">
<div class="mobiletextwrap">
<header>
<h2>Music</h2>
</header>
</div>
</div>
Just set the display: block for the img
.mobilebox img { width: 100%; display: block;}
I have created a jsFiddle that shows the content.
.container {
height: 100%;
width: 100%;
margin: 0;
}
.body {
position: relative;
height: 100%;
width: 100%;
margin: 0 auto;
background-color: #F7F4F2;
text-align: center;
}
.form {
background-color: #fff;
padding: 50px 20px;
color: #333;
}
.footer {
margin-top: 26px;
font-size: 20px;
line-height: 26px;
}
.content {
padding: 5% 5%;
}
<div class="container">
<div class="body">
<div class="content">
<div class="form">
<h1>Content</h1>
</div>
<div class="footer">
This is a link
</div>
</div>
</div>
</div>
What I am failing to do is to have the container element to fill the available viewport and have the inner white div also stretch to the bottom with the padding respected.
I would also like to move the link to the bottom of the viewport.
Is this possible without JavaScript?
How about something like this using flexbox?
Put display: flex; on .content
Then use flex: 1; on the main child div and then height: 100vh;.
Now you don't need all that width and height 100% styles.
Also used box-sizing: border-box so the padding doesn't mess with the size of the containers.
* {
box-sizing: border-box;
}
.container {
margin: 0;
}
.body {
position: relative;
margin: 0 auto;
background-color: #F7F4F2;
text-align: center;
}
.content {
display: flex;
flex-direction: column;
height: 100vh;
padding: 5% 5%;
}
.form {
flex: 1;
background-color: #fff;
padding: 50px 20px;
color: #333;
}
.footer {
margin-top: 26px;
font-size: 20px;
line-height: 26px;
}
<div class="container">
<div class="body">
<div class="content">
<div class="form">
<h1>Content</h1>
</div>
<div class="footer">
This is a link
</div>
</div>
</div>
</div>
Use this CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
You need height: 100%; on every parent, all the way up to html & body. Without it, the height won't be dynamic aren't going to work.
JSfiddle
How do I do this in widths? The gray middle div is 100% - 50px - 50px. Please show code; below this image is my guess
EXAMPLE : (http://mediahood.net/mesgr.png)
<div style="position:absolute;left:0px;width:50px;height:50px;">
<div style="width:50;height:50px;background-color:#000;margin:0px;">
<img id='txtrattach' src="/assets/txtr-attach.png" height='50px'></div>
</div>
<div style="position:absolute;left:50px;width:258px;height:50px;font-family:'Harabara';font-size:12px;">
<input id="txtrinput" type="text" name='message' onKeyPress='return charLimit(this)' onKeyUp='return characterCount(this)'>
</div>
<div style="position:absolute;right:0px;width:50px;height:50px;">
<div style="width:50px;height:50px;background-color:#000;margin:0px;">
<span id='charCount'>150</span><span id='charCount2'> chars.</span>
<input id='txtrsend' src="/assets/txtr-enter.png" height='50px' name="send" type="image" value="Send">
</div>
</div>
</dov>
I have two examples. The first uses a fixed height for the footer as a whole, and floats for the sides. The second uses a variable height footer (based on the "middle" div's content), using a trick that sets the background of the footer to black and the middle part to grey and margins to reveal the background for the rest of the area that the variable-height sides do not extend to (there would be grey underneath the text if not for the margins).
<div id="footer">
<div id="left">50px</div>
<div id="right">50px</div>
<div id="middle">100%</div>
</div>
<div>2:</div>
<div id="footer2">
<div id="left2">50px</div>
<div id="right2">50px</div>
<div id="middle2">100%<br />100%<br />100%</div>
</div>
CSS:
#footer {
height: 115px;
text-align: center;
background: #ccc;
}
#left {
float: left;
height: 100%;
background: #000;
color: #fff;
text-align: center;
width: 50px;
}
#right {
float: right;
height: 100%;
background: #000;
color: #fff;
text-align: center;
width: 50px;
}
#footer2 {
text-align: center;
background: #000;
}
#left2 {
height: 100%;
float: left;
color: #fff;
text-align: center;
width: 50px;
}
#right2 {
float: right;
color: #fff;
text-align: center;
width: 50px;
height: 100%;
}
#middle2 {
margin: 0 50px;
background: #ccc;
}
What about setting margin on inner div?
Just showing style tags for convenience, move to css file.
<style>
.outer {
width: 400px;
background-color: #ddd;
}
.inner {
margin: 0 50px;
background-color: #ccc;
}
</style>
<div class="outer">
<div class="inner">
inner div
</div>
</div>