I am trying to wrap my right div around my left, in an inverse moon shape? Here's what it looks like right now.
What I want to do is have the red block wrap around the rounder corners of the black block. Here is the current HTML/CSS code, I apologize if the CSS code is a little "messy" as i have been experimented different codes.
HTML
<div class="container full-width">
<div class="row proj">
<div class="col-md-8 full-width">
<div class="content">
</div>
</div>
<div class="col-md-4 full-width">
<div class="options">
</div>
</div>
</div>
</div>
CSS
.content {
margin-top: 75px;
position: relative;
width: 70vw;
max-width: 100%;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: black;
border-radius: 0 50vw 50vw 0;
}
.options {
margin-top: 75px;
position: relative;
width: 30vw;
max-width: 100%;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: red;
}
.container .full-width{
padding-left: 0;
padding-right: 0;
overflow-x: hidden;
}
UPDATE
Answer Found, thanks for the help, so had to tweak the code a bit from your posted code, it looks like this now.
.content {
margin-top: 75px;
width: 30vw;
height: 90vh;
overflow: hidden;
background-color: black;
border-radius: 0 50vw 50vw 0;
float:left;
position:relative;
z-index:2;
}
.options {
margin-top: 75px;
margin-left:3%;
position:relative;
float:right;
width: 30vw;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: red;
}
.container .full-width{
position: absolute;
padding-left: 0;
padding-right: 0;
}
and the final result looks like this, will tweak the positioning some more but the result is what i wanted, thanks again.
UPDATE 2
Ok, had to make another edit, for some reason I had to float them both left. OTherwise if i kept the red div float right and tried to expand its width, it would expand to the left, any idea why? current code:
.content {
margin-top: 75px;
width: 44vw;
height: 90vh;
overflow: hidden;
background-color: black;
border-radius: 0 50vw 50vw 0;
float:left;
position:relative;
z-index:2;
}
.options {
margin-top: 75px;
margin-left:20%;
position:relative;
float:left;
width: 50vw;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: red;
}
.container .full-width{
position: absolute;
padding-left: 0;
padding-right: 0;
}
Use position:relative; for content and position:absolute; for options
.content {
width: 30vw;
height: 90vh;
overflow: hidden;
background-color: black;
border-radius: 0 50vw 50vw 0;
float:left;
position:relative;
z-index:2;
}
.options {
margin-left:3%;
position:absolute;
float:right;
width: 30vw;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: red;
}
<div class="container full-width">
<div class="row proj">
<div class="col-md-8 full-width">
<div class="content">
</div>
</div>
<div class="col-md-4 full-width">
<div class="options">
</div>
</div>
</div>
Related
Current Situation
Using the following code I show a couple of divs floated to the left.
* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100%;
}
.header {
height: 80px;
position: fixed;
width: 100%;
background: green;
}
.inner-container {
position: absolute;
top: 80px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: auto;
white-space: nowrap;
}
.column {
height: 500px;
width: 150px;
background: red;
float: left;
margin: 5px;
}
<div class="container">
<div class="header">
</div>
<div class="inner-container">
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
</div>
</div>
Current result:
Problem
What I want is that the red boxes don't wrap within its container. I want both, a vertical and horizontal scroll bar if the space is not enough. For the vertical scrollbar it works. What am I missing?
JSFiddle: https://jsfiddle.net/brainchest/j6zh400v/
A fix I found was to change the .column from being a float: left to display: inline-block. This treats each column as a "word" (like a word in text) and thus the white-space: no-wrap; applies. Otherwise, the float: left changes the way the element gets positioned.
Edited Fiddle: https://jsfiddle.net/9bo4f5pv/
Use display: flex on the parent, then flex: 0 0 150px on the columns.
* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100%;
}
.header {
height: 80px;
position: fixed;
width: 100%;
background: green;
}
.inner-container {
position: absolute;
top: 80px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: auto;
display: flex;
}
.column {
height: 500px;
flex: 0 0 150px;
background: red;
margin: 5px;
}
<div class="container">
<div class="header">
</div>
<div class="inner-container">
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
</div>
</div>
I'm attempting to have a static left div and have the right divs be scrollable. I'd like to be flexible so I set widths and heights to percentage basis.
Currently, when I scroll the left div scrolls with the right div, so when I reach the second right div in the stack, there is not left div associated to it.
I'd like for the left div to always remain and only the right divs to scroll.
HTML:
<div class= "div-left div-left-small">
</div>
<div class= "div-right-1 div-right-1-small">
</div>
<div class= "div-right-2 div-right-2-small">
</div>
<div class="div-right-3 div-right-3-small">
</div>
CSS:
html{
height:100%;
width:100%;
margin: 0px;
}
body{
height:100%;
width: 100%;
margin: 0px;
}
.div-left{
background-color: darkblue;
height: 100%;
width:50%;
margin: 0px;
float: left;
position: static;
}
.div-right-1{
background-color: yellow;
height: 100%;
width: 50%;
margin: 0px;
float: right;
}
.div-right-2{
background-color: aqua;
height: 100%;
width: 50%;
margin:0px;
float: right;
}
You just have to set position: fixed for left div. Check code below.
html{
height:100%;
width:100%;
margin: 0px;
}
body{
height:100%;
width: 100%;
margin: 0px;
}
.div-left{
background-color: darkblue;
height: 100%;
width:50%;
margin: 0px;
float: left;
position: fixed;
}
#clear {
clear: both;
}
.div-right-1{
background-color: yellow;
height: 100%;
width: 50%;
margin: 0px;
float: right;
}
.div-right-2{
background-color: aqua;
height: 100%;
width: 50%;
margin:0px;
float: right;
}
<div class= "div-left div-left-small">
</div>
<div class= "div-right-1 div-right-1-small">
</div>
<div id="clear"></div>
<div class= "div-right-2 div-right-2-small">
</div>
<div class="div-right-3 div-right-3-small">
</div>
you need the first in fixed position and the rest be margin-left at 50% ... if i understood:
html {
height: 100%;
width: 100%;
margin: 0px;
}
body {
height: 100%;
width: 100%;
margin: 0px;
}
.div-left {
background-color: darkblue;
height: 100%;
width: 50%;
margin: 0px;
position: fixed;
}
[class^="div-right"] {
background-color: yellow;
height: 100%;
margin-left: 50%;
}
.div-right-2 {
background-color: aqua;
}
<div class="div-left div-left-small">
</div>
<div class="div-right-1 div-right-1-small">
</div>
<div class="div-right-2 div-right-2-small">
</div>
<div class="div-right-3 div-right-3-small">
</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>
Is there any way to make object-fit work with min-height?
See this jsfiddle for example.
If I set a fixed height, it works, but if I set a min-height, it doesn't work.
HTML:
<div class="container">
<div class="b_feat_img">
<img src="http://i.imgur.com/iEJWyXN.jpg">
</div>
</div>
CSS:
.container {
width:120px;
}
.b_feat_img {
border: 1px solid green;
background: red;
float: left;
height: auto;
min-height:130px;
margin-bottom: 10px;
overflow: hidden;
width: 100%;
}
.b_feat_img img {
object-fit: cover;
height: 100%;
width: 100%;
}
The min-height needs to set on the img element, not the container.
In additional, you can also set vertical-align:top or display:block on the img to get rid of the unwanted whitespace below it.
.container {
width:120px;
}
.b_feat_img {
border: 1px solid green;
background: red;
float: left;
height: auto;
margin-bottom: 10px;
overflow: hidden;
width: 100%;
}
.b_feat_img img {
object-fit: cover;
min-height: 130px;
width: 100%;
vertical-align: top;
}
<div class="container">
<div class="b_feat_img">
<img src="http://i.imgur.com/iEJWyXN.jpg">
</div>
</div>
You can use position: absolute to the img in css.
So it will be like:
HTML:
<div class="container">
<div class="b_feat_img">
<img src="http://i.imgur.com/iEJWyXN.jpg">
</div>
</div>
CSS:
.container {
width:120px;
}
.b_feat_img {
position: relative;
border: 1px solid green;
background: red;
float: left;
width: 100%;
min-height:130px;
margin-bottom: 10px;
overflow: hidden;
}
.b_feat_img img {
position: absolute;
height: 100%;
width: auto;
}
fiddle:
https://jsfiddle.net/b93txe6t/1/
Hope that helps.
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/