self teaching myself html/css thorugh mozilla and CSS tricks
I currently have this:
and want this:
I assumed it would be the same process, but nothing inside of the pink div will show
HTML:
<div class="stack-1">
<div class="flexbox">
<div class="left">
<div class="flex-inside">
<div class="pos-inside">
<div class="icon-1">
CSS: issue with 'pos-inside' and '.icon-1'
.stack-1{
display:flex;
background:green;
}
.flexbox{
display: flex;
background: purple;
margin-left: 20px;
margin-right: 20px;
width: 100%;
height: 20%;
}
.thomas, .broke{
width: 50%;
height: 30px;
}
.left{
background-color: brown;
}
.right{
justify-content: flex-end;
display: flex;
background-color: aqua;
}
.flex-inside{
justify-content: center;
display: flex;
background: navy;
width: 60%;
height: 30px;
}
.flex-right{
background: hotpink;
width: 60%;
height: 30px;
}
.pos-inside{
color: orange;
<!--just trying out any heights-->
width: 40%;
height: 20px;
}
.icon-1{
color: purple;
<!--just trying out any heights-->
width: 10%;
height: 50%;
}
Yes, it is possible to put a flexbox inside a flexbox. As a practical example, on this very stackoverflow page (in its current implementation as I write this answer, at least), we have
<body>
<div class="container">
...
with the CSS rules
body {
display: flex;
}
body>.container {
display: flex;
}
As for your particular example, your .left div will have a width of 0, because no width is specified and there's no content. Now notice that its child div, with .flex-inside, has a width of 60%. This is 60% of 0, so its width will be 0 as well, and so on down the line.
Try
.left{
background-color: brown;
width: 50%;
}
Alternatively, leave .left alone and try giving a specific width to .flex-inside:
.flex-inside{
...
width: 120px;
}
As for .pos-inside and .icon-1, did you really mean color: ..., or did you mean background: ...? Again, there's no content, so setting the text colour won't have any effect. Either change the property to background:, or add some text in the div to see what happens.
Related
I was wondering how I can not see the orange background when there isn't enough in the to make the item-container overflow. So, if I put 4 divs in there, it wont over flow and you will see orange to the right, but if you add one more item to my example, a horizontal scrollbar will appear and cover the orange background on the right. I want the
item background to cover the whole item-container even if item-container doesn't have a scrollbar
Image with scrollbar
/* Copyright 2014 Owen Versteeg; MIT licensed */
body {
background: rgba(25, 25, 25, 255)
}
#header-text {
color: red;
text-align: center;
margin-top: 0;
margin-bottom: 0;
}
#header-text2 {
color: blue;
text-align: center;
margin-top: 0;
}
.item-container {
background: orange;
width: 418px;
height: 100px;
margin: 0 auto;
overflow-y: auto;
}
.item {
width: 100px;
height: 100px;
background: red;
display: inline-block;
}
<div class="container">
<h1 id="header-text">Hello</h1>
<h3 id="header-text2">Hello</h3>
<div class="item-container">
<div class="item">Item1</div><div class="item">Item1</div><div class="item">Item2</div><div class="item">Item2</div>
</div>
</div>
Simple, make your .item-container have no background:
.item-container {
width: 418px;
height: 100px;
margin: 0 auto;
overflow-y: auto;
}
Or have your items take up the full-width using flex like so:
.item-container{
background-color: red;
display: flex;
}
.item{
background-color: yellow;
flex-grow:1;
}
<div class="item-container">
<div class="item">Item1</div><div class="item">Item1</div><div class="item">Item2</div><div class="item">Item2</div>
</div>
Your layout is troublesome. Rather than pixel-perfect scrollbar gaps, why not set your inner blocks to 25% or use flexbox?
.item {
width: 25%;
...
}
Considering the following DOM distribution. I have a flexbox container with two children, one of them has a fixed size while the other shrinks with an overflow: hidden. I was wondering, however, if there is a way for the overflown content to remain visible without any impact on the flow of the DOM.
Fleshed out Example at Codepen
ul.current {
list-style: none;
display: flex;
width: 40%;
margin: 0 auto;
}
li {
overflow: hidden;
}
li:last-child {
flex-shrink: 0;
}
li div {
border: 1px solid black;
background: green;
width: 10rem;
height: 10rem;
}
li:last-child {
margin-top: 2rem;
}
li:last-child div {
background: red;
}
/* GOAL */
section {
margin: 0 auto;
width: 40%;
}
.item {
position: absolute;
}
.item:last-child {
margin-top: 2rem;
margin-left: 5rem;
}
.content {
border: 1px solid black;
background: green;
width: 10rem;
height: 10rem;
}
.item:last-child .content {
background: red;
}
<h3>Shrink the viewport to get an idea of what's the intended scenario</h3>
<ul class="current">
<li><div></div></li>
<li><div></div></li>
</ul>
<h3>Visual representation of the overlap behavior</h3>
<section>
<div class="item"><div class="content"></div></div>
<div class="item"><div class="content"></div></div>
</section>
What I want, basically, is for the images to "overlap" each other in a flexible context, meaning, a solution that would work on N cases.
Your issue may be more clear to resolve if you didn't use quite as much inline style. I added classes and css to your code to make it easier to read.
By adding flex-wrap:wrap; to the display:flex; on the section, the images wrap. I set the images to background-images, and the bg-size to cover. If you wish the first-listed image to display second, simply switch the divs.
Hope this helps
#imagedisp {
display: flex;
flex-wrap: wrap;
}
#div1 {
flex-shrink: 1;
/* overflow: hidden;*/
border: 1px dashed;
background-image: url("https://s3-media4.fl.yelpcdn.com/bphoto/xFlymSQW0weBqXjwZM6Y2Q/ls.jpg");
}
#div2 {
margin-bottom: 40px;
border: 1px dashed;
background-image: url("https://s3-media3.fl.yelpcdn.com/bphoto/_-U30Zk2XbUKe2fcdtEXLQ/o.jpg");
}
#div1,
#div2 {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
div {
min-width: 300px;
/*width:300px;*/
height: 100px;
}
<section id="imagedisp">
<div id="div1">
<!-- <img />-->
</div>
<div id="div2">
<!-- <img />-->
</div>
</section>
In order to have an overlap you have to either use positioned elements (which is not the best solution if you want to keep the element in-flow) or use negative margin.
Let's consider negative margin. The trick is to find a way to adjust the margin in order to create the overlap when the parent container will shrink.
Here is a basic example:
section {
max-width: 300px;
border: 1px solid;
animation:change 2s linear infinite alternate;
}
#keyframes change {
from {max-width: 300px;}
to {max-width: 100px;}
}
.item{
height: 80px;
min-width: 80px;
background:blue;
display: inline-block;
vertical-align:top;
margin-right:calc((100% - 200px)/2);
}
.item:last-child {
margin-top: 2rem;
background: red;
}
<section>
<div class="item">
</div>
<div class="item">
</div>
</section>
As you can see, the trick is to define the margin considering the width of the container (100%) and we will have two cases:
When the width is bigger than Xpx we have a positive margin and a normal behavior with spacing
When the width is smaller than Xpx we will have a negative margin and will have the overlap effect without wrapping.
We need to simply find the good way to define the margin in order to obtain the needed behavior. We may also consider media query in case we want a different behavior like having no margin and then overlapping:
section {
border: 1px solid;
font-size:0;
}
.item{
height: 80px;
min-width: 80px;
background:blue;
display: inline-block;
vertical-align:top;
}
.item:nth-child(odd) {
margin-top: 2rem;
background: red;
}
#media all and (max-width:350px) {
.item{
margin-right:calc((100% - 320px)/4)
}
}
<section>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</section>
Another idea that work with nested element (like your intial code) is to keep the overflow visible and force the outer element to shrink using min-width:0.
ul.current {
list-style: none;
display: flex;
width: 40%;
margin: 0 auto;
animation:change 2s infinite linear alternate;
}
#keyframes change {
from {width:100%}
to {width:40%}
}
li {
min-width:0;
}
li div {
border: 1px solid black;
background: green;
width: 10rem;
height: 10rem;
}
li:nth-child(odd) {
margin-top: 2rem;
}
li:nth-child(odd) div {
background: red;
}
/* GOAL */
section {
margin: 0 auto;
width: 40%;
}
.item {
position: absolute;
}
.item:last-child {
margin-top: 2rem;
margin-left: 5rem;
}
.content {
border: 1px solid black;
background: green;
width: 10rem;
height: 10rem;
}
.item:last-child .content {
background: red;
}
<ul class="current">
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
</ul>
So I want to build a simple event box, to replace the default one in a calendar (react-big-calendar for reference, but I don't think it matters)
I would like to make it as responsive as possible, but I have started with a very static box, which corresponds to what I would like to see on a big screen.
Simple fiddle
.container {
width: 200px;
height: 200px;
background-color: #dddddd;
margin: 20px;
padding: 5px;
}
.event-slot-component {
width: 100%;
min-height: 30px;
position: relative;
background-color: #64a7DD;
border: 5px;
border-radius: 3px;
padding: 2px;
}
.event-slot-start-time {
font-size: 0.75em;
vertical-align: top;
position: absolute;
top: 0;
left: 0;
}
.event-slot-end-time {
font-size: 0.75em;
float: left;
vertical-align: bottom;
position: absolute;
bottom: 0;
left: 0;
}
.event-slot-label {
font-size: 1em;
top: 8px;
right: 5px;
position: absolute;
}
<div class="container">
<div class="event-slot-component">
<div class="event-slot-start-time">17h</div>
<div class="event-slot-end-time">21h</div>
<div class="event-slot-label">Occupied Slot</div>
</div>
</div>
My goal is to have a 'centered, eventually slightly to the right' label,
and two small indications on the left that correspond to the start and end of the event.
I have tried using flexbox, coming from other StackOverflow answers, and it does seem to be able to do that somehow, but I have not managed to display the three elements properly. Any insight on a clean solution to achieve this result?
The simplest with the existing markup is to use Flexbox with column direction on the 2 date values and then position the label absolute using transform
.container {
width: 200px;
height:200px;
background-color: #dddddd;
margin: 20px;
padding: 5px;
}
.event-slot-component {
width: 100%;
min-height: 30px;
position: relative;
background-color: #64a7DD;
border: 5px;
border-radius: 3px;
padding:2px;
display: flex;
flex-direction: column;
}
.event-slot-start-time,
.event-slot-end-time {
font-size: 0.75em;
flex-grow: 1; /* share the vertical space equal */
}
.event-slot-label {
position:absolute;
font-size: 1em;
top: 50%;
left: calc(50% + 10px); /* adjust px value for horiz. offset */
transform: translate(-50%,-50%); /* vert./hor. center the label */
}
<div class="container">
<div class="event-slot-component">
<div class="event-slot-start-time">17h</div>
<div class="event-slot-end-time">21h</div>
<div class="event-slot-label">Occupied Slot</div>
</div>
</div>
If you want a good responsive solution, use Flexbox all the way, here with a wrapper for the date's
.container {
width: 200px;
height:200px;
background-color: #dddddd;
margin: 20px;
padding: 5px;
}
.event-slot-component {
width: 100%;
min-height: 30px;
position: relative;
background-color: #64a7DD;
border: 5px;
border-radius: 3px;
padding:2px;
display: flex;
}
.event-slot-time {
display: flex;
flex-direction: column;
}
.event-slot-start-time,
.event-slot-end-time {
font-size: 0.75em;
flex-grow: 1; /* share the vertical space equal */
}
.event-slot-label {
flex-grow: 1; /* fill the remaining horizontal space */
font-size: 1em;
display: flex;
align-items: center; /* vertical center the label text */
justify-content: center; /* horizontal center the label text */
}
<div class="container">
<div class="event-slot-component">
<div class="event-slot-time">
<div class="event-slot-start-time">17h</div>
<div class="event-slot-end-time">21h</div>
</div>
<div class="event-slot-label">Occupied Slot</div>
</div>
</div>
You would need to nest your flexboxes. That's what's so wonderful about it!
To explain, what I did was created three wrappers.
One to hold the entire event.
One to hold your event times.
One to hold the status.
We used flex box to butt the event times and status-wrapper against each other. The event times only take up as much space as the text utilizes (plus a little padding). The status wrapper takes up 100% of its usable space.
Then status wrapper is set to flex box using the justify-content and align-items properties. This centers the status.
The status text container is used in the same way to center the status text itself.
.event-wrapper {
background-color: #eee;
display: flex;
}
.event-times-wrapper {
background-color: skyblue;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.status-wrapper {
width:100%;
display: flex;
align-items:center;
justify-content: center;
}
.status-text {
height: 100%;
display:flex;
align-items: center;
padding-left: 1rem;
padding-right: 1rem;
background-color: tomato;
}
<article class="event-wrapper">
<div class="event-times-wrapper">
<p class="event-start">9:00a</p>
<p class="event-end">10:00a</p>
</div>
<div class="status-wrapper">
<div class="status-text">Busy</div>
</div>
</article>
As OP requested later, a sample without special containers.
.container {
background-color: #eee;
position: relative;
width: 100vw;
height:6rem;
}
.event-slot-component div {
font-family: sans-serif;
color: white;
background-color: skyblue;
height:3rem;
float:left;
padding-left: 1rem;
padding-right: 1rem;
width:10%;
display:flex;
align-items:center;
justify-content:center;
}
.event-slot-component div:nth-child(2) {
background-color:red;
position:absolute;
bottom:0;
left: 0;
}
.event-slot-component div:last-of-type {
margin-left:25%;
background-color: tomato;
float:left;
height: 6rem;
}
<div class="container">
<div class="event-slot-component">
<div class="event-slot-start-time">17h</div>
<div class="event-slot-end-time">21h</div>
<div class="event-slot-label">Occupied Slot</div>
</div>
</div>
Basically, I am trying to put two circles next to each other (instead of on top)inside of a container.
However, there's a space between them and I want to get rid of it. How can I put two (or more) circles together?
https://jsfiddle.net/hLsu9qj0/
<div class="container">
<div class="circle">
circle 1
</div>
<div class="circle">
circle 2
</div>
</div>
css:
.container {
position: relative;
margin: 0 auto;
line-height: 50px;
height: 50px;
}
.container .circle {
height: 50px;
width: 50px;
background-color: blue;
border-radius: 50%;
text-align: center;
margin: 0 auto;
display: inline;
}
thanks everyone for your help!!!
It looks like all you're missing in your CSS is a float: left on the .container .circle { rule
UPDATED
One potential solution to the centering question (from comments) might be to make the .container div the size of the circles and center that
.container {
position: relative;
margin: 0 auto;
line-height: 50px;
width: 100px;
}
.container .circle {
height: 50px;
width: 50px;
background-color: blue;
border-radius: 50%;
text-align: center;
display: block;
margin: 0 auto;
float: left;
}
Or, as someone else suggested use display: inline-block and then set text-align: center on the .container
.container {
position: relative;
margin: 0 auto;
line-height: 50px;
text-align: center;
}
.container .circle {
height: 50px;
width: 50px;
background-color: blue;
border-radius: 50%;
text-align: center;
display: inline-block;
margin: 0 auto;
}
Try adding float to .container .circle
float:left
check this https://jsfiddle.net/hLsu9qj0/2/
Use display: inline-block; instead of display: block;.
And give margin: 0 5px; to .container .circle to give space between.
You can use float:left also.
.container .circle {
height: 50px;
width: 50px;
background-color: blue;
border-radius: 50%;
text-align: center;
display: inline-block;
margin: 0 5px;
}
Updated Fiddle
UPDATED : JsFiddle
OPTIONAL :
This is for overlapping of two circle.Take a look in JsFiddle
Second Way : Link
HTML:
<div class="container">
<div class="circle">circle 1</div>
<div class="circle">circle 2</div>
</div>
CSS:
.container {
position: relative;
width: 95%;
margin: 0 auto;
line-height: 50px;
}
.container .circle {
height: 50px;
width: 50px;
background-color: blue;
border-radius: 50%;
text-align: center;
display: block;
margin: 0 auto;
margin-left:5px;
float:left;
}
Use float left in circle div
.container .circle {float:left;}
checkit out this http://jsfiddle.net/hLsu9qj0/9/
You should simply add the float:left; to the circle class. To guarantee also a good alignment, I suggest fixing the width and height of the container and set: height:100% to the circle, check the link:
//jsfiddle.net/hLsu9qj0/
you can use inside the container 2 div
<div class="container">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
put your code inside the 2 div column it defiantly works bootstrap but you need bootstrap css link inside your .html page
If you want to center them, change width of .container to .container {
clear: both;
overflow: hidden;
width: 23%;}
I'm trying to add two square ads to the right of the image on the web-site. The idea is to make this responsive like this:
http://s9.postimg.org/pdecyqi8f/div.png
Is this possible to achieve using CSS?
I use inline-block to position ads to the right and max-width: 100% to scale the image. I need the support of IE 9+ and mobile browsers.
I tried different approaches, don't even know which code example to show. It is relatively easy to position ads to the right of the image using inline-block:
div{
border: 2px solid;
}
#img,#container{
display: inline-block;
vertical-align: middle;
}
#ad1, #ad2{
width: 30px;
height: 30px;
color: red;
}
#img{
width: 100px;
height: 150px;
max-width: 100%;
color: purple;
}
<div id="img"> </div>
<div id="container">
<div id="ad1">ad1</div>
<div id="ad2">ad2</div>
</div>
http://jsfiddle.net/w7zfj1ju/
Yet in this case I won't get desired view on narrow screens. Also, since max-width: 100%; is used for #img this div would cover #ad1 and #ad2 on narrow screens.
To achieve desired mobile view I had to change HTML to the following:
div{
border: 2px solid;
display: inline-block;
}
#ad1, #ad2{
width: 30px;
height: 30px;
color: red;
vertical-align: top;
}
#img{
width: 100px;
height: 150px;
max-width: 100%;
color: purple;
}
<div id="ad1">ad1</div>
<div id="img"> </div>
<div id="ad2">ad2</div>
http://jsfiddle.net/gxnqo8da/
In this case I didn't really know how to position #ad1 to the right of the #img. I gave a try to absolute positioning, it did not work. Flex also seemed not to be an option due to compatibility reasons.
I also tried to use direction:rtl; like this:
div{
border: 2px solid;
display: inline-block;
}
#container{
direction:rtl;
border: 0px;
}
#ad1, #ad2{
width: 30px;
height: 30px;
color: red;
vertical-align: top;
}
#img{
width: 100px;
height: 150px;
max-width: 100%;
color: purple;
}
<div id="container">
<div id="ad1">ad1</div>
<div id="img"> </div>
<div id="ad2">ad2</div>
</div>
http://jsfiddle.net/n1mo76bv/
and this:
div{
border: 2px solid;
text-align: left;
}
#container{
direction:rtl;
border: 0px;
}
#ad1, #ad2{
width: 30px;
height: 30px;
color: red;
vertical-align: top;
}
#img{
width: 100px;
height: 150px;
max-width: 100%;
color: purple;
display: inline-block;
}
#ad1{
display: inline-block;
}
<div id="container">
<div id="ad1">ad1</div>
<div id="img"> </div>
</div>
<div id="ad2">ad2</div>
http://jsfiddle.net/w7sknehL/
didn't help much since I could not position #ad2.
So, I don't ask to write any code. I'm just desperate for an advice.
If you don't need to support Android 2 and Opera Mini you can still use flexbox to achieve this result via media query. Example below:
.img {
width: 100%;
max-width: 100%;
height: 300px;
background: blue;
}
.ad {
background: red;
width: 100px;
height: 100px;
}
#media (min-width : 801px) {
.wrapper {
padding-right: 110px;
}
.img {
float: left;
}
.ad {
clear: right;
float: right;
margin-right: -110px;
margin-bottom: 10px;
}
}
#media (max-width : 800px) {
.wrapper {
display: flex;
flex-direction: column;
}
.img {
order: 2;
margin: 10px auto;
}
.ad {
margin: 0 auto;
}
.ad1 {
order: 1;
}
.ad2 {
order: 3;
}
}
<div class="wrapper">
<div class="img"> </div>
<div class="ad ad1">ad1</div>
<div class="ad ad2">ad2</div>
</div>
Also:
I didn't use browser prefixes for flexbox, so it will not work in all browsers. Add prefixes or use autoprefixer to make it work there.
Fix media query parameters for you needs, I only inserted width 800 as example value, real query to detect mobile will differ.