I don't know why but when the height of the content_second_box is set higher then the height of the screen resolution then the whole page shifts left by a few pixels. Once the div reaches the bottom of the screen it shifts, when the height does not reach then it is ok.
I have tried many things but nothing has worked. Does anyone please know why?
CSS is as follows:
body {
background-color: white;
}
#container {
position: relative;
width: 1300px;
margin-left: auto;
margin-right: auto;
padding: 10px 50x 30px 50px;
}
#content {
width: 1000px;
margin-left: auto;
margin-right: auto;
padding: 40px 0px 0px 0px;
/*text-align: center;*/
}
#content_first_box {
width: 225px;
height: 50px;
/* min-height: 160px; */
/* height: auto !important; */
background-color: #ff8b00; /*#9caad6;*/
border-radius:5px;
box-shadow: 3px 3px 5px #888888;
padding: 5px 5px 5px 5px;
overflow: hidden;
float: left;
text-align: center;
margin-right: 15px;
}
#content_second_box {
width: 225px;
height: 500px;
/* min-height: 160px; */
/* height: auto !important; */
background-color: #79bbff; /*#9caad6;*/
border-radius:5px;
box-shadow: 3px 3px 5px #888888;
padding: 5px 5px 5px 5px;
overflow: hidden;
float: left;
text-align: center;
margin-right: 15px;
}
HTML file is as follows:
<body>
<div id="container">
<div id="content">
<div id="content_first_box">text</div>
<div id="content_first_box">text</div>
<div id="content_first_box">text</div>
<div id="content_first_box">text</div>
<div id="content_second_box">text druhy</div>
<div id="content_second_box">text druhy</div>
<div id="content_second_box">text druhy</div>
<div id="content_second_box">text druhy</div>
</div>
</div>
</body>
The scroll bar appears once the page is longer than the viewport. This causes all content to shift left to allow for the scrollbar.
You can get rid of the content shift by always showing the scrollbar in browser as -
html{
overflow-y: scroll;
}
Related
I am finding it hard to fit an image inside a Div that contain a text. Everytime I try to get it to fit inside the boundaries of the super div, it simply goes out of bounds regardless of what I use from the css side. can anyone tell me what I am doing wrong?
.justRight {
float: right;
max-height: 100%;
max-width: 100%;
margin-bottom: 40px;
margin-right: 50px;
background-image: url(https://internal.bs.fb.ac.uk/modules/2017-
18/bsl/css/sign_language.png);
background-size: cover;
background-repeat: no-repeat;
}
.jas {
background-color: white;
border: 1px outset blue;
position: absolute;
margin-left: 20px;
border-top: 40px solid blue;
border-right: 2px outset blue;
margin-top: 10px;
margin-right: 20px;
height: 80px;
padding-left: 10px;
width: 96.3%;
}
<div class="jas">
<h1>Sign Language</h1>
<div class="justRight">
</div>
</div>
By saying height: 80px to parent (.jas), you are restricting the parent div's height to 80px. So it wont go beyond. So remove height of parent(.jas). Set a height to the child instead(.justRight).
Not sure why you used float: right value to the child(.justRight). Please remove if it is unnecessary.
Codepen: https://codepen.io/johnsackson/pen/KRdvMQ
* {
box-sizing: border-box;
}
.justRight {
height: 100px;
max-width: 100%;
margin-bottom: 10px;
background: url(https://placehold.it/1920x200) 0 0 no-repeat;
background-size: cover;
}
.jas {
background-color: white;
border: 1px outset blue;
/* position: absolute; */ /* use if only needed */
margin: 10px 0;
border-top: 40px solid blue;
border-right: 2px outset blue;
padding: 0 10px;
width: 100%;
}
Hope this helps.
Your problem is that the h1 tag is on position: relative. Changing it would solve your issues.
h1 {position: absolute}
I have code like this:
https://jsfiddle.net/y09dngnj/1/
<div style="border: 1px solid green">
<div class="biddingStat" id="biddingStat0"
style="background-color: #DC0707;opacity: 1;
text-align: center; ">10000
</div>
</div>
.biddingStat {
width: 80px;
position: relative;
bottom: 0px;
background-color: #eeee22;
padding-top: 20px;
/*left: 40px;*/
border-top-left-radius: 10px;
border-top-right-radius: 10px;
min-height: 30px;
height: 100px;
}
If you change css from padding-top: 20px to padding-top: 5px and rerun fiddle, although there is height 100px of red div, the height changes. I'd expect that text would change its position to be more distant from top edge but height of div would stay 100px no matter what.
How to keep 100px height of div and have text padded from top?
Change padding-top to margin-top in the CSS file.
See: CSS Box Model
<div style="border: 1px solid green"><div class="biddingStat" id="biddingStat0" style="background-color: #DC0707;opacity: 1;text-align: center; ">10000</div></div>
<style>
.biddingStat
{
width: 80px;
position: relative;
bottom: 0px;
background-color: #eeee22;
margin-top: 150px;
padding-top: 20px;
/*left: 40px;*/
border-top-left-radius: 10px;
border-top-right-radius: 10px;
min-height: 30px;
height: 100px;
}
</style>
If you don't want padding to affect the dimensions of an element you can use box-sizing: border-box; which will allow the div to not be affected by any padding or borders added to it.
I'm building a MDI WEB application, and have a window created made by a article element, with a header and a section for content. Since it's an MDI app, the article is set to absolute, so it can overlap other windows. I need a scrollbar to appear in the content section, but not in the header.
<article id="win3">
<header> … </header>
<section> … </section>
</article>
CSS:
article {
position: absolute;
min-width: 500px;
width: 918px;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: white;
border-style: ridge;
border-color: #ddd;
border-width: 4px;
}
article>section {
/* reduce diameter of rounded corner to match the inside curve of the border */
border-radius: 10px;
-moz-border-radius: 10px;
display: block;
overflow: auto;
border: none;
width: 100%;
background-color: white;
padding: 10px 10px 10px 20px;
min-height: 50px;
height: 100%;
}
It looks like the overflow: auto is ignored in Firefox (v 22), but the scrollbar does appear in Chrome.
Any ideas on how I make the scrollbar reliably when needed in the content section?
Your key problem is with padding value, so you need to set width decreasing some percentage in your article>section
article>section {
/* reduce diameter of rounded corner to match the inside curve of the border */
border-radius: 10px;
-moz-border-radius: 10px;
display: block;
overflow: auto;
border: none;
/*width: 100%;*/
width: calc(100% - 30px) /* or set fixed width percentage like 90% */
background-color: white;
padding: 10px 10px 10px 20px;
min-height: 50px;
height: 100%;
}
article {
position: absolute;
min-width: 500px;
width: 918px;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: white;
border-style: ridge;
border-color: #ddd;
border-width: 4px;
height:100px;
}
article>section {
/* reduce diameter of rounded corner to match the inside curve of the border */
overflow:auto;
height:100%;
border:none;
display: block;
padding: 10px 10px 10px 20px;
min-height:50px;
}
I have a structure like so
<div class="contentWrapper">
<div class="left_side"></div>
<div class="right_side"></div>
</div>
My contentWrapper class has this style:
.contentWrapper {
margin: 0px auto;
padding: 0px;
width: 990px;
text-align: left;
background-color: #FFF;
box-shadow: 0 2px 7px rgba(0,0,0,0.25);
position: relative;
z-index: 20;
}
but the background color and border do not appear.
My left_side and right_side class has this as styleing:
.left_side {
width: 630px;
float: left;
padding: 0 10px 0;
}
.right_side {
width: 300px;
float: right;
margin: 0 20px 20px;
}
If I turn off the float on either the left side or right side, but background and border appear..How do I fix this, I really need to background and border around both left and right side.
Thanks,
J
The class names in the css are wrong. In the html they're called left_side and right_side, while in the css you have right_column and left_column.
Fiddle
.contentWrapper {
margin: 0px auto;
padding: 0px;
width: 990px;
text-align: left;
background-color: #FFF;
box-shadow: 0 2px 7px rgba(0,0,0,0.25);
position: relative;
z-index: 20;
overflow: hidden; /* THIS /*
}
This will clear the float and basically fixing it. When you float an element it jumps out of the normal layer, causing the parent to behave as there was nothing inside it.
I would Like to have a banner across an image. Both the image and banner (banner-snippet) are in the same parent element so the the black banner is pushed out of view. How can I fix this.
You can see my source here:
<div id="slide-banner">
<img src="http://upload.wikimedia.org/wikipedia/commons/0/0c/GoldenGateBridge-001.jpg"/>
<div id="slide-banner-snippet">
</div>
</div>
#slide-banner {
margin-top: 70px;
margin-right: auto;
margin-left: auto;
padding: 0px 0px 0px 0px;
height: 350px;
width: 916px;
border: 1px solid #ccc;
border-radius: 3px 3px 3px 3px;
overflow: hidden;
}
#slide-banner img {
height: auto;
width: 916px;
}
#slide-banner-snippet {
height: 55px;
width: 916px;
background-color: #000;
}
http://jsfiddle.net/uSw8S/
Absolutely position the element you want to float, ie:
position:absolute;
top:0;
z-index:1;
You can make #slide-banner relatively positioned and make slide-banner-snippet absolutely positioned and add bottom:0;
#slide-banner {
margin-top: 70px;
margin-right: auto;
margin-left: auto;
padding: 0px 0px 0px 0px;
height: 350px;
width: 916px;
border: 1px solid #ccc;
border-radius: 3px 3px 3px 3px;
overflow: hidden;
position:relative;
}
#slide-banner img {
height: auto;
width: 916px;
}
#slide-banner-snippet {
height: 55px;
width: 916px;
background-color: #000;
position:absolute;
bottom:0;
}
http://jsfiddle.net/uSw8S/2/
You can just put
<div id="slide-banner-snippet">
</div>
before
<img src="http://upload.wikimedia.org/wikipedia/commons/0/0c/GoldenGateBridge-001.jpg"/>
Example Here