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.
Related
I would like to achieve that the boxes inside the container div resize and fit inside it when browser window is resized. At the moment container resizing works fine but I have problems with it's child elements. I've tried different ways but didn't get the desired result.
.container {
position: relative;
width: 21%;
min-width: 262px;
height: 202px;
left: 47px;
top: -164px;
background-color: green;
border-radius: 2px;
box-shadow: 5px 5px 5px #111111;
border-style: solid;
border-color: white;
border-width: 5px;
}
#box_inside_1 {
position: relative;
width: 16%;
min-width: 50px;
height: 50px;
top: -36px;
left: 29px;
background-color: white;
box-shadow: 5px 5px 5px #111111;
border-radius: 2px;
}
#box_inside_2 {
position: relative;
width: 16%;
min-width: 50px;
height: 50px;
top: -105px;
left: 260px;
background-color: white;
box-shadow: 5px 5px 5px #111111;
border-radius: 2px;
}
#box_inside_3 {
position: relative;
width: 16%;
min-width: 50px;
height: 50px;
top: -172px;
left: 515px;
background-color: white;
box-shadow: 5px 5px 5px #111111;
border-radius: 2px;
}
<div class="container">
<div id="box_inside_1"></div>
<div id="box_inside_2"></div>
<div id="box_inside_3"></div>
</div>
The container should probably be the thing that has an id, and the boxes should have a class. For instance, if you want to have 3 inline divs within the container, you could do this:
<style>
#container {
position: relative;
text-align: center;
}
.box-inside {
display: inline-block;
width: 16%;
height: 50px;
}
</style>
<div id='container'>
<div class='box-inside'>
</div>
<div class='box-inside'>
</div>
<div class='box-inside'>
</div>
</div>
Or, alternatively, you could make the inner divs display block and float: left or float: right and then put
<div style="clear:both;"></div>
after them to clear the floating functionality. Or, if you do not want them inline, then just make them display: block, and they will fall one after the other. What you probably do not want though, is absolute positioning, because you appear to have a list of very similar divs. Absolute positioning is more appropriate for niche cases of weird layouts. Also, the top, left, right, and bottom styles only apply when the position is absolute, fixed, or relative, so you don't need those if you use the default static positioning on the inner boxes.
Having some problems getting the correct css to align the text the way I would like.
.html file
<section id='a'>
<div class='b'>111</div>
<div class='b'>222</div>
<div class='b'>33333</div>
<div class='b'>444444 4444</div>
<div class='b'>55555</div>
</section>
.css file
#a {
position: fixed;
top: 50%;
left: 5vw;
transform: translateY(-50%);
}
.b {
position: relative;
margin: 5px;
height: 56px;
width: 56px;
text-align: center;
vertical-align: middle;
line-height: 56px;
font-size: 14pt;
color: #696969;
background-color: #D3D3D3;
border-radius: 30px;
cursor: pointer;
border: 2px solid #000000;
}
Things display fine except for div 4 which has longer text which stretches outside.
I added a class to change the line height so the text wraps:
<div class='b c'>444444 4444</div>
.c {
line-height: 28px;
}
I would like to reduce the spacing between the lines so the text has a better fit inside the circle:
.c {
line-height: 18px;
}
I like the spacing, but would like to shift the text down into the center so I added some padding inside the border:
.c {
line-height: 18px;
padding-top: 6px;
padding-bottom: 0px;
}
The circle is expanded into more of an ellipse-type shape.
The height is explicitly stated as 56px.
The margin is 5px (x2 for top and bottom): 10px
The border is 2px (x2 for top and bottom): 4px
The content is two lines of wrapped text with a line height of 18px (x2): 36px
Adding padding of 6px results in 56px which is the specified height, so I am unclear why the padding would expand the height.
Looked into line-height a bit and clearly I don't really understand how that works. I have tried many other settings and values, but nothing that gives me my desired result.
Same behavior in Chrome, Firefox, Opera, and Safari.
Any thoughts, direction, or clarification on what I am doing wrong?
Size of the divs are 56x56 pixels. Once you add any padding (padding-top: 6px), it will add up to 56px, which will result in 62px. Your div (circle) will become an egg. What you need to do is set box-sizing: border-box on the div.
Initial value of box-sizing is content-box. The height you enter is the content's height. Any padding and border isn't included in that value and will expand the div. box-sizing: border-box on the other hand, will keep the div 56px even after you enter a padding. It'll decrease the height of the content and keep the box at the same height.
#a {
position: fixed;
top: 50%;
left: 5vw;
transform: translateY(-50%);
}
.b {
position: relative;
margin: 5px;
height: 56px;
width: 56px;
text-align: center;
vertical-align: middle;
line-height: 56px;
font-size: 14pt;
color: #696969;
background-color: #D3D3D3;
border-radius: 30px;
cursor: pointer;
border: 2px solid #000000;
}
.c {
line-height: 28px;
line-height: 18px;
box-sizing: border-box;
padding-top: 9px;
}
<section id='a'>
<div class='b'>111</div>
<div class='b'>222</div>
<div class='b'>33333</div>
<div class='b c'>444444 4444</div>
<div class='b'>55555</div>
</section>
display: table; and display: table-cell; is a good solution for vertical alignment, regardless of the properties of the child element.
.container {
display: table;
border: 1px solid red;
text-align: center;
}
span {
display: table-cell;
vertical-align: middle;
}
.one {
width: 100px;
height: 100px;
}
.two {
width: 200px;
height: 200px;
}
.three {
width: 75px;
height: 75px;
}
<div class="container one">
<span>some text</span>
</div>
<div class="container two">
<span>some other text</span>
</div>
<div class="container three">
<span>some text that stretches longer</span>
</div>
padding counts toward element size. So height: 56px and padding-top: 6px will make the element 62px high. Just adjust the height of that element to 50px (desired height minus vertical padding, 56 - 6).
Another option is to change box-sizing to border-box (default value is content-box). Which will make padding and border-width to be considered by width and height - https://developer.mozilla.org/en/docs/Web/CSS/box-sizing
You could do something like this:
.b {
position: relative;
top: 50%;
transform: translateY(-50%);
}
and add a wrapper with
transform-style: preserve-3d;
You can use flexbox, where there is no need to calc lines and match padding against size, this does it all dynamically.
#a {
position: fixed;
top: 50%;
left: 5vw;
transform: translateY(-50%);
}
.b {
position: relative;
margin: 5px;
height: 56px;
width: 56px;
font-size: 14pt;
color: #696969;
background-color: #D3D3D3;
border-radius: 30px;
cursor: pointer;
border: 2px solid #000000;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
<section id='a'>
<div class='b'>111</div>
<div class='b'>222</div>
<div class='b'>33333</div>
<div class='b'>444444 4444</div>
<div class='b'>55555</div>
</section>
Can you please take a look at this CSS DEMO and let me know how I can center the inner div inside the outter div and also center the text for inner div?
.outer{
width: 100px;
height: 100px;
background: #fc2e5a;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.inner {
width: 80px;
height: 80px;
background: #fff;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
<div class="outer">
<div class="inner">Test</div>
</div>
Without using the table-cell or flex-box or position if you know the exact sizes of your divs then you could do something like this:
.outer{
width: 100px;
height: 100px;
padding: 10px;
border-radius: 50%;
background: #fc2e5a;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.inner {
width: 80px;
height: 80px;
line-height: 80px;
border-radius: 50%;
text-align: center;
background: #fff;
}
Here is the demo
Notice that I removed the browser specific prefixes for border-radius and also set it to 50% to make it independent from the whole size.
http://jsfiddle.net/2Wkqn/5/
Add the lines
position: relative;
top: 10px;
left: 10px;
to your .inner CSS
Wrap your text "Test" in paragraph tags then add a class ".inner p" to your CSS and enter the lines:
padding-top: 30px;
text-align: center;
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;
}
What I am trying to accomplish is to get the image block to the center of the banner. What's happening is the left edge of the image is what's in the center. How would I get the actual center of the image to the center of the banner? I hope this makes sense... lol.
Here is what I am currently getting:
This is what I am trying to get... you can ignore the differences in fonts, borders, etc.. lol
This is my css:
#profile-banner {
background: #000;
height: 267px;
border-bottom: 1px solid #999;
margin: 0px 0px 25px 0px;
text-align: center;
}
#profile-banner h1 {
font-size: 36px;
font-family: Piximisa;
letter-spacing: 5px;
padding: 15px;
margin: 0px;
}
#profile-banner p {
margin: 0px;
padding: 0px;
}
#profile-banner .logo {
top: 125px;
background: #333;
border: 1px solid #666;
width: 250px;
height: 250px;
position: absolute;
margin: 0 auto;
padding: 0px;
}
This is my HTML:
<div id="profile-banner">
<h1>Some Team Name</h1>
<p>
Some catchy slogan.
</p>
<img src="{BLANK-LOGO}" alt="" border="0" class="logo">
</div>
Thanks for your time!
You can't mix absolute and static positioning. You can use absolute positioning:
position: absolute;
top: 125px;
left: 50%;
margin-left: -125px;
or static positioning:
margin: 125px auto 0;
The main difference is how the element affects other elements. Using absolute positioning takes the element out of the document flow, so it doesn't affect other elements.
Change your CSS this way
#profile-banner .logo {
margin: 125px auto 0;
background: #333;
border: 1px solid #666;
width: 250px;
height: 250px;
padding: 0px;
}
Changes
Remove position and top.
Add the top as margin-top.
Positioned elements do not respect margins.