Here is what I have so far: http://jsfiddle.net/F8AN4/
I want a border on each side of the div that is vertically centered and is pointing to the left/right sides of the screen. I've seen this done a lot, but can't for the life of me figure out how to do it!
It would look like:
-----|DIV|------
CSS
div {
background: lightgreen;
height: 100px;
margin: 0 auto;
position: relative;
width: 200px;
}
div::after {
border-right: 10px solid black; // not sure how to do this.
content: "";
top: 0; left: 0; right: 0; bottom: 0;
position: absolute;
}
div::before {
content: "";
top: 0; left: 0; right: 0; bottom: 0;
position: absolute;
}
Any ideas?
You will need two wrapping containers: an inner div that holds the content, and an outer div:
<div class="outer">
<div class="inner"></div>
</div>
The CSS is simple — the outer div will need to have 100% width (so that the pseudo-element can stretch to the full width), while the inner div can have a width that you designate later.
.inner {
background: lightgreen;
height: 100px;
margin: 0 auto;
width: 200px;
}
.outer {
position: relative;
width: 100%;
}
.outer:before {
border: 1px solid #000;
box-sizing: border-box;
content:"";
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
The CSS transform property is used to ensure that the pseudo-element is perfectly vertically centered — it matters when the horizontal line you want is thick.
If you want odd-numbered dimensions for the horizontal line, you can choose to specify the height of a single border, i.e. border-top: 1px solid #000;, or abandon the border property and set the height and background-color. It works either way :)
http://jsfiddle.net/teddyrised/F8AN4/9/
[Edit]: Remove the bottom margin on outer div, it was not necessary for the code to work ;)
FIDDLE
HTML
<div><span>TEXT</span></div>
CSS
div {
margin-top:10px;
height: 1px;
border-top: 1px solid black;
text-align: center;
position: relative;
}
span {
position: relative;
top: -.7em;
background: lightgreen;
display: inline-block;
border-width:0 2px;
border-color:black;
border-style:solid;
}
Is this what you're looking for?
http://jsfiddle.net/F8AN4/3/
I guess there is a more beautiful way to do it maybe someone has a better idea :)
<div id="main">
<div class="hrleft"></div>
<div class="mid"></div>
</div>
div.hrleft {
height: 45px;
width: 200px;
border-bottom: 10px solid black;
float: left;
}
Related
In a classic layout (header fixed, main and footer fixed), i would like to center the text of the main element. For the purpose of this exercise, I would like to set the line-height such that it equals the height of the main element, then the text would be vertically centered. The absolutely positioned main element has top and bottom padding of 10%, so it's 80% high.
How can I get the line-height to equal the container height?
* { box-sizing: border-box; }
html { height: 100%; }
body { margin: 0;
font-size: 10px; }
header { border: 1px solid black;
position: fixed;
top: 0;
height: 10%;
left: 0;
right: 0;
}
main { border: 1px solid black; left: 0; right: 0;
position: absolute;
top: 10%;
/* height: 80%; */
bottom: 10%;
line-height: 80%;
}
footer { border: 1px solid black;
position: fixed;
height: 10%;
left: 0;
right: 0;
bottom: 0;
}
<header>Header</header>
<main><div>Main Div</div></main>
<footer>Footer</footer>
You could use an old trick with a pseudo and the div set as an inline-block element and vertical-align. The pseudo is to be 100% of main's height, since it is an absolute element sized via coordonates, the pseudo should take height:100%;
Demo below
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
margin: 0;
font-size: 10px;
}
header {
border: 1px solid black;
position: fixed;
top: 0;
height: 10%;
left: 0;
right: 0;
}
main {
border: 1px solid black;
left: 0;
right: 0;
position: absolute;
top: 10%;
/* height: 80%; */
bottom: 10%;
}
/* centering trick */
main::before {
content: '';
height: 100%;
}
main:before,
main>div {
vertical-align: middle;
display: inline-block;
}
/* end centering trick */
footer {
border: 1px solid black;
position: fixed;
height: 10%;
left: 0;
right: 0;
bottom: 0;
}
<header>Header</header>
<main>
<div>Main Div</div>
</main>
<footer>Footer</footer>
But this really not the way to do and this example is not going to teach you anything usefull, today you can easily relay on the flex or grid model to avoid tricky methods .....
Forget about line-height for this kind of visual, this is not the job of line-height and not the way to use it. line-height:80%; means 80% of 1em (the font-size set ).
The easiest way to do this while still using line height to center your text would probably be to use view port units instead of %. Simply set your main section and it's line height to 80vh (or however tall you want it to be).
main {
height: 80vh;
line-height: 80vh;
}
If you aren't familiar with viewport units and how they work, here is a quick explanation with some examples. Good luck!
In this particular case you can rely on vh unit
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
margin: 0;
font-size: 10px;
}
header {
border: 1px solid black;
position: fixed;
top: 0;
height: 10vh;
left: 0;
right: 0;
}
main {
border: 1px solid black;
left: 0;
right: 0;
position: absolute;
top: 10vh;
bottom: 10vh;
line-height: 80vh;
}
footer {
border: 1px solid black;
position: fixed;
height: 10vh;
left: 0;
right: 0;
bottom: 0;
}
<header>Header</header>
<main>
<div>Main Div</div>
</main>
<footer>Footer</footer>
Are You Sure You Want to do it with Line Height? It might have certain consequences. See this Pen https://codepen.io/iamrgaurav/pen/xJMpWO
But as Stephen represented it is the way you want to achieve
.footer{
position:fixed;
bottom:0;
}
.header{
position:fixed;
top:0;
}
.main{
position:relative;
top:10px;
height:100%;
line-height:90vh;
background-color:#ddd;
}
<header class = "header">header</header>
<main class = "main">
<div>Main</div>
</main>
<div class = "footer">footer</div>
Setting the line-height won't make text vertically aligned. for horizontal alignment, use text-align: center; in the container.
For vertical alignment, you could use the following CSS since it;s absolutely positioned.
main div {
position: absolute;
top: 50%;
left: 50%
transform: translate(-50%, -50%);
}
Fiddle
I want to use position: absolute to create a centered element, but it will create a horizontal scrollbar on Internet Explorer 11. Please see the script below. Anyone here knows how to fix this problem?
*Update: I figured out that using overflow:hidden seems to solve this problem somehow. But when there are another one outside of the container, it will be hidden as well.
.container {
width: 80%;
margin: 0 auto;
height: 100vh;
border: 1px solid green;
position: relative;
overflow: hidden; /*This one is not the solution, though*/
}
.content {
width: 80%;
height: 30px;
position: absolute;
top: 50px;
left: 50%;
transform: translate(-50%, 0);
border: 1px solid red;
}
.another-content {
width: 40px;
height: 40px;
border: 1px solid blue;
position: absolute;
bottom: 20px;
right: -20px;
}
<div class="container">
<div class="content"></div>
<div class="another-content"></div>
</div>
You need to add following properties with the position absolute in IE
position: absolute;
top:0;
right: 0;
left: 0;
bottom:0; //specify all including bottom:0
The scrollbar show up in all browsers, not only IE. You can do the following:
The biggest issue is that the left: 50% and width: 80% together are adding to the total width and forcing the horizontal scrollbar to show up in some browsers (e.g. Internet Explorer and MS Edge). You set the width to 80%, so divide the remaining 20% between the left and right border and you'll end up with 10% each. Simply use left: 10% to achieve the same result, but without the side effect of the horizontal scrollbar.
Also when you set the size to 100% and then add border, those borders will be out of the view and cause the scrollbars to show up. This is the same in all browsers. Use box-sizing: border-box to force the browser to include the border in the height and width calculation.
The height: 100vh makes the box height equals to the view port. However, the body has default margins which vary from one browser to another. You can either set those margins to zero body { margin: 0; }, or change the height to height: 100% which is 100% of the container which the body in this case.
Try this:
.container {
width: 100%;
height: 100%;
border: 1px solid green;
position: relative;
box-sizing: border-box;
}
.content {
width: 80%;
height: 30px;
position: absolute;
top: 50px;
left: 10%;
border: 1px solid red;
}
<div class="container">
<div class="content"></div>
</div>
Thanks for your replies. Though they are not direct solution, they helped me a lot to figure out how to solve it.
The cause is as what Racil Hilan said. When I use left:50% and width:80%, the content width will be added up and create a horizontal scroll, which is not ignored by only IE. And my point is to avoid creating that added-up width. Here is my two way to workaround this one.
* {
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
border: 1px solid green;
position: relative;
}
.content {
width: 80%;
height: 30px;
position: absolute;
top: 50px;
left: 0;
right: 0;
border: 1px solid red;
margin: 0 auto;
}
.content-wrapper {
border: 1px solid black;
height: 30px;
position: absolute;
top: 100px;
left: 0;
right: 0;
}
.another-content {
width: 80%;
display: block;
height: 100%;
border: 1px solid red;
margin: 0 auto;
}
<div class="container">
<div class="content"></div>
<div class="content-wrapper">
<div class="another-content"></div>
</div>
</div>
I'm creating a basic webpage, but for the footer there is going to be a slanted edge that will run at the bottom of the page. Where I am having issues as you are unable to add 100% on a border, as i am using bootstrap, so the page must be responsive. Is there a way to achieve this affect whilst being responsive.
div {
width:200px;
height:80px;
background: red;
top:150px;left:100px;
position: relative;
}
div:before {
content: '';
position: absolute;
top: 40px; right: 0;
border-right: 200px solid white;
border-top: 40px solid red;
width: 20;
}
http://jsfiddle.net/2bZAW/3675/
This should work for you. Again, I've used a pseudo element in order to alter the color, but the general consensus is the same. Both the linked question and this use overflow:hidden on the parent and hence won't scroll. As for rotating, since I've used a pseudo element, this should not be an issue:
.wrap {
height: 500px;
width: 100%;
display: inline-block;
position: relative;
overflow: hidden;
z-index: 8;
}
.wrap:after {
content: "";
position: absolute;
height: 130%;
width: 100%;
transform: skewY(-4deg);
background: tomato;
top: -50%;
z-index: -2;
left: 0;
}
.lower {
position: absolute;
bottom: 15%;
right: 0;
}
<div class="wrap">
Hello, World!
<div class="lower">Wanted text here?</div>
</div>
Hi — is it possible to have a div with it's height equal to a fluid width expand to contain its content within a narrow viewport?
I figured out a work around with a solid colour div: http://jsfiddle.net/2nprw0xq/
But not with a border: http://jsfiddle.net/534k9e2n/
Here's the code I'm using. Thanks, B.
<div class="holder">
<div class="shape"></div>
<div class="shape_outer">
<div class="shape_inner"> Text... </div>
</div>
</div>
.
.holder {
display: inline-block;
position: relative;
width: 50%;
}
.shape {
margin-top: 100%;
}
.shape_outer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 1px solid #111;
}
.shape_inner {
padding: 20px;
}
Move border to your inner element and then add 100% width and 100% min-height, like this:
.shape_inner {
border: 1px solid #111;
padding: 20px;
min-height: 100%;
width: 100%;
}
Check it out: http://jsfiddle.net/534k9e2n/1/
Here is my html
<div class="container">
<img src="something" class="avatar"/>
<div class="edit_photo">Edit</div>
</div>
"edit_photo" has an image on it's background. the img tag dimensions is not set so it could be anything. But I want the "edit_photo" div to always be on the bottom right corner of the img. Is this possible with css? I can't think of a way to do this. the img tag needs to always be an img tag and I can't change it to a div.
Thank you!
I think this may be possible:
CSS:
.container{
position: relative;
display: inline-block;
}
img{
background: red;
height: 120px;
width: 250px;
}
.edit_photo{
position: absolute;
bottom: 0;
right: 0;
background: blue;
height: 25px;
width: 25px;
}
Here's a JSFiddle to see: http://jsfiddle.net/gW9PK/
You might need to play around with the .edit_photo and nudge it up a little bit.
The container should be position: relative; and the edit_photo position: absolute; like this:
.container {
position: relative;
/* inline-block for 100% of child width */
display: inline-block;
border: 3px solid #ddd;
}
img {
/* for 100% height of the container */
display: block;
}
.edit_photo {
position: absolute;
right: 5px;
bottom: 10px;
/* Some color */
background: red;
padding: 2px 4px;
border-radius: 3px;
color: white;
}
UPDATED DEMO WITH MULTIPLE IMAGES: http://jsfiddle.net/HYQLQ/3/
write this code in css
.container{
position: absolute;
}
.edit_photo{
position: absolute;
bottom:0px;
right:0px;
widht:20px;
height:20px;
}
edit_photo
{
bottom:-600
top:30px;
right:5px;
}
play with the numbers.