I'm trying to do a container with rounded corners, basically it will have a rounded corner on the top-left of the header(red) and then it should have it on the bottom left of the view that we have....
so what it is hard for me is the following:
the bottom border should be rounded if it is the end of the page
the border should keep straight if it isn't the end of the page.
so what I have is the following, if you see this example, the bottom left corner is rounded because the content (yellow) is not bigger than 100% therefore we show the rounded corner and also we complete the view so the corner is stick to the bottom.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background: black;
}
.header {
height: 25px;
margin-left: 20%;
width: 80%;
background: red;
border-top-left-radius: 10px;
}
.main {
display: block;
height: calc(100% - 25px);
margin-left: 20%;
width: 80%;
background: green;
overflow: scroll;
border-bottom-left-radius: 10px;
overflow-x: hidden;
}
.content {
height: 30px;
width: 100%;
background: yellow;
}
<body>
<div class="header">
header
</div>
<div class="main">
<div class="content"></div>
</div>
</body>
the problem is when the content is bigger than the main as you can see, it will always be rounded as the following example and the height of the content is larger than the main so it should continue the line and show the corner only if the user scrolls down
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background: black;
}
.header {
height: 25px;
margin-left: 20%;
width: 80%;
background: red;
border-top-left-radius: 10px;
}
.main {
display: block;
height: calc(100% - 25px);
margin-left: 20%;
width: 80%;
background: green;
overflow: scroll;
border-bottom-left-radius: 10px;
overflow-x: hidden;
}
.content {
height: 900px;
width: 100%;
background: yellow;
}
<body>
<div class="header">
header
</div>
<div class="main">
<div class="content"></div>
</div>
</body>
I also did some test using the rounder corner on the content, but if the content is smaller it will show the rounded corner in the wrong place.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background: black;
}
.header {
height: 25px;
margin-left: 20%;
width: 80%;
background: red;
border-top-left-radius: 10px;
}
.main {
display: block;
height: calc(100% - 25px);
margin-left: 20%;
width: 80%;
background: green;
overflow: scroll;
overflow-x: hidden;
border: 1px solid violet;
}
.content {
height: 90px;
width: 100%;
background: white;
border-bottom-left-radius: 10px;
border: 1px solid red;
}
<body>
<div class="header">
header
</div>
<div class="main">
<div class="content"></div>
</div>
</body>
I'm not the best at scss(clearly :P) so I would appreciate your help.
is there a way to achieve this with only css or should I just use javascript?
Related
I have a current issue in my current project, where i have an area in which i want to center some text. This text can be different from each use of the area.
This part i have fully understood, but i want to place another piece of text, exactly in the center of the remaining space between the end of the first text and the end of the area.
How would i structure my css and html to make this possible?
The image below should help display what it is, that i want to do:
html,
body {
height: 100%;
text-align: center;
}
#left {
width: 200px;
display: inline-block;
background: #f00;
height: 200px;
justify-content: center;
}
#right {
display: inline-block;
background: #0f0;
height: 200px;
}
<div id="left">
CONTENT
</div>
<div id="right">
Other content
</div>
Edit:
Sorry about not including code
An attempt i took: http://jsfiddle.net/5jRaY/298/
I get the red block to fit as wanted, other than the div should wrap the container. My issue is that i can't get the green box to fill the remaining space of the page.
You can try a different layout. This is what I will use:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#wrapper {
display: table;
width: 100%;
text-align: center;
}
#one,
#two,
#three {
display: table-cell;
width: 33.333%;
}
#one {
width: 200px;
height: 200px;
background: white; /*Change color to see it*/
}
#two {
background: red;
height: 200px;
}
#three {
height: 200px;
background: green;
}
<div id="wrapper">
<div id="one"></div>
<div id="two">CONTENT</div>
<div id="three">Other content</div>
</div>
Let me know if it works for you!
Hope this helps:
#container {
height: 200px;
text-align: center;
position: relative;
}
#left {
width: 200px;
margin: auto;
height: 100%;
background: #f00;
}
#right {
top: 0;
right: 0;
bottom: 0;
background: #0f0;
position: absolute;
width: calc(50% - 100px); /* 100px is 50% of #left */
}
<div id="container">
<div id="left">
CONTENT
</div>
<div id="right">
Other content
</div>
</div>
another newbie question here. Learning CSS. I am trying to do something that I thought would be very simple, but have not managed to find the way to do it, or a suitable answer to the question.
I have a simple project with a header, some content and a footer. The content has a div with a white border and an image inside it. I would like the div to be as wide as the image and no wider. I have provisionally set the width to 430px, but I would like to know the code to set the width to whatever the width of the image is.
Code
html
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap {
position: relative;
border: 1px solid white;
width: 430px;
display: block;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
Add display: inline-block; to your .imagewrap without setting it's width.
.imagewrap {
display: inline-block;
}
If you want a div with an image to be centered, add another div around them with:
.wrapper {
display: flex;
justify-content: center;
align-items: center;
}
But do you really need that div around an image? The border might be added to an image itself without additional div.
If you want a border on the image, add it there
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap {
position: relative;
/*border: 1px solid white;
width: 430px;
display: inline-block;
line-height: 0;
margin: 0 auto;*/
top: 50%;
transform: translateY(-50%);
text-align: center; /*center image horizontally*/
}
#imagewrap img {
border: 1px solid white;
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="https://unsplash.it/100/100" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
Check out this fidde:
https://jsfiddle.net/56myv9g2/1/
#imagewrap img{
display:block;
}
#imagewrap{
position: relative;
border: 1px solid white;
display: inline-block;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
#container {
height: 80%;
width: 100vw;
text-align:center;
background-color: red;
}
Also, you could just give the border to the image tag all along without the div
If you set display: inline-block, then you need to add text-align: center to container
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
text-align: center;
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap{
position: relative;
border: 1px solid white;
width: 430px;
display: inline-block;
top: 50%;
transform: translateY(-50%);
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
I want to create a footer where in the upper part there is a semi circle on the center with a logo inside of it. I have my sample code here, but the problem with it is that the logo is bound on the height of the footer div.
html,
body,
.container,
.content {
height: 100%;
}
.container,
.content {
position: relative;
}
.proper-content {
position: absolute;
padding-top: 40px;
/* >= navbar height */
}
.wrapper {
position: absolute;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px;
/* same as the footer */
}
.push {
height: 100px;
/* same as the footer */
}
.footer-logo {
height: 200px;
width: 100%;
position: absolute;
background-image: url("gaslogo.png");
background-position: 10% 100%;
z-index: 999;
}
.footer-wrapper {
position: relative;
height: 200px;
background-color: red;
}
.halfCircleBottom {
position: relative;
height: 100px;
width: 250px;
border-radius: 0 0 100px 100px;
-moz-border-radius: 0 0 100px 100px;
-webkit-border-radius: 0 0 100px 100px;
background: white;
}
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
</div>
</div>
</div>
<div class="container">
<div class="content">
<div class="logo"></div>
<div class="wrapper"></div>
<div class="push"></div>
</div>
<div class="footer-logo">dsad</div>
<div class="footer-wrapper">
<footer>
<center>
<div class="halfCircleBottom"></div>
</center>
</footer>
</div>
I used a :before pseudo element with background image for the circle.
.footer {
background: crimson;
height: 100px;
margin-top: 100px;
text-align: center;
}
.footer:before {
content: "";
display: inline-block;
vertical-align: top;
width: 100px;
height: 100px;
background: crimson url("https://i.stack.imgur.com/Fogjj.jpg") center / cover;
border: 10px solid white;
border-radius: 50%;
box-sizing: border-box;
margin-top: -50px;
}
<footer class="footer"></footer>
I accomplished what you need this way:
Changed your HTML a bit:
<div class="footer-wrap">
<div class="halfCircleBottom">
<img src="insert your image with the same width as the parent div"/>
</div>
<footer>
<center>
</center>
</footer>
</div><!--end footer wreap-->
Then added and changed one of your css declarations:
footer {
background: black;
height: 100px;
}
.halfCircleBottom{
position: absolute;
height: 250px;
width: 250px;
border-radius: 50%;
background: white;
left: 50%;
transform: translate(-50%, -72%);
}
Try this
HTML:
<div class="content">content</div>
<div class="footer"></div>
CSS:
.content{
height: 200px;
text-align: center;
background: #fff;
}
.footer{
height: 100px;
background: #cf9f3f;
position: relative;
text-align: center;
}
.footer:before{
content: '';
width: 100px;
text-align: center;
height: 100px;
border-radius: 50%;
background: #cf9f3f;
border: 4px solid #fff;
position: absolute;
left: 0;
right: 0;
margin: -52px auto 0;
}
Example: https://jsfiddle.net/vc4mvwd2/
This question already has answers here:
Fill remaining vertical space with CSS using display:flex
(6 answers)
Closed 7 years ago.
What I have is a simple structure of container followed by two child elements, contentand footer.
footer has a fixed height and content should fill remaining empty space. That is easy enough to achieve with display:table; but for some reason I can't figure out how to make content element overflow to work if its contents exceed website window height?
Here is a JSFiddle, if you set content_child height to say 10pxyou can see content element filling up the space nicely but when content_child is a lot bigger content element shouldn't expand the way it does now, what am i missing here?
I would prefer to not use JavaScript to solve this if possible.
body, html{
height: 100%;
padding: 0px;
margin: 0px;
}
.container{
display:table;
background; black;
width: 100%;
background: black;
height: 100%;
}
.top{
background: blue;
display:table-row;
height: 100%;
}
.bottom{
background: red;
height: 60px;
}
.content{
height: 100%;
overflow: hidden;
padding: 5px;
}
.content_child{
height: 1000px;
background: grey;
}
<div class="container">
<div class="top">
<div class="content">
<div class="content_child"></div>
</div>
</div>
</div>
<div class="bottom">
</div>
</div>
Flexbox can do that.
body {
margin:0;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
background: #bada55;
overflow-y: auto;
}
.expander {
height: 1000px;
/* for demo purposes */
}
footer {
background: red;
height: 60px;
}
<div class="container">
<div class="content">
<div class="expander"></div>
</div>
<footer></footer>
</div>
The only thing you need to do is to change this CSS rule
.content{
height: 100%;
overflow: auto; /* change from hidden to auto */
padding: 5px;
}
which will make it look/work like this
body, html{
height: 100%;
padding: 0px;
margin: 0px;
}
.container{
display:table;
background; black;
width: 100%;
background: black;
height: 100%;
}
.top{
background: blue;
display:table-row;
height: 100%;
}
.bottom{
background: red;
height: 60px;
}
.content{
height: 100%;
overflow: auto;
padding: 5px;
}
.content_child{
height: 1000px;
background: grey;
}
<div class="container">
<div class="top">
<div class="content">
<div class="content_child"></div>
</div>
</div>
<div class="bottom">
</div>
</div>
No need for tables, really. Depending on what you are trying to achieve, this may work for you:
body {
padding: 0;
margin: 0;
}
.content {
position: fixed;
top: 0;
bottom: 50px;
width: 100%;
background: blue;
color: #fff;
overflow-y: auto;
}
.footer {
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
background: red;
}
<div class="content">
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
</div>
<div class="footer"></div>
And if there's no fancier purpose, you could always just change the body background, the same end result here with less code. The only difference is that the scroll bar shows above the footer as well in this one.
body {
padding: 0;
margin: 0;
background: blue;
color: #fff;
}
.footer {
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
background: red;
}
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
<div class="footer"></div>
I hope this will help if you set height as auto
body, html{
padding: 0px;
margin: 0px;
}
.container{
display:table;
background; black;
width: 100%;
background: black;
height: auto;
}
.top{
background: blue;
display:table-row;
height: auto;
}
.bottom{
background: red;
height: 60px;
}
.content{
height: auto;
overflow: hidden;
padding: 5px;
}
.content_child{
height: auto;
background: grey;
}
Maybe use calc() for height of .top instead of using display: table
.top{
background: blue;
height: calc(100% - 70px);
padding: 5px;
}
.content{
height: 100%;
overflow-y: scroll;
}
Check out this working fiddle: https://jsfiddle.net/xyxj02ge/4/
I found this solution to centering my div vertically and horizontally. However if I fill in the content section past the length defined for the div it will run outside of it. I was hoping to make it expand depending on the content inside the div. How do I make it so this can happen?
JSFIDDLE
HTML:
<body>
<div id="wrapper">
<div id="headerwrapper">
<div id="header" class="center">header</div>
</div>
<div id="titlewrapper">
<div id="title" class="center">title</div>
</div>
<div id="contentwrapper">
<div id="content" class="center">content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br></div>
</div>
<div id="footerwrapper">
<div id="locationwrapper">
<div id="location" class="center">location</div>
</div>
<div id="copyrightwrapper">
<div id="copyright" class="center">copyright</div>
</div>
</div>
</div>
</body>
CSS:
html body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.center {
position: relative;
top: 50%;
transform: translateY(-50%);
margin-right: auto;
margin-left: auto;
width: 100%;
height: 100%
max-width: 5em;
}
#wrapper {
background-color: pink;
height: 100%;
width: 100%;
}
#headerwrapper {
background-color: green;
width: 100%;
height: 8em;
}
#header {
color: white;
background-color: black;
}
#titlewrapper {
background-color: red;
width: 100%;
height: 8em;
}
#title {
color: white;
background-color: black;
}
#contentwrapper {
background-color: blue;
width: 100%;
height: 8em;
}
#content {
color: white;
background-color: black;
}
#locationwrapper {
background-color: yellow;
width: 100%;
height: 8em;
}
#location {
color: white;
background-color: black;
}
#footerwrapper {
background-color: brown;
width: 100%;
height: 100%;
}
#copyrightwrapper {
background-color: green;
width: 100%;
height: 8em;
}
#copyright {
color: white;
background-color: black;
}
If you want the "content" sections to dynamically adjust height, take off the fixed height.
Change:
#contentwrapper {
background-color: blue;
width: 100%;
height: 8em;
}
To:
#contentwrapper {
background-color: blue;
width: 100%;
}
Working fiddle to your requirement: http://jsfiddle.net/k5YUu/6/