I have a container around two inline block elements. However the container collapses (the horizontal dashed line). How do I stop it from collapsing so that I can apply a background colour to the container. The structure is important and I want to avoid using flex-box. It is also important that the two coloured squares are right aligned and next to each other.
The aim is to create an absolutley positioned block element over a canvas element. With a descriptive name on the left and two buttons on the right. I have to work with what is there so a solution that involves as little change as possible would be great.
.header3 {
width: 300px;
background-color: lightgray;
border: 1px dashed grey;
position:relative;
}
.title3{
position:absolute;
top:0px;
left:0px;
display:inline-block;
vertical-align:center;
background-color:#bada55;
}
.list {
list-style:none;
margin:0px;
padding:0px;
border:1px dashed green;
position:absolute;
display:inline-block;
top:0px;
right:0px;
}
.item {
width: 50px;
height: 50px;
display: inline-block;
text-align: center;
}
.item-1 {
background-color: orangered;
}
.item-2 {
background-color: skyblue;
}
<body>
<br>
<div class="header3">
<div class="title3">bollard name</div>
<ul class="list">
<li class="item item-1"></li>
<li class="item item-2"></li>
</ul>
</div>
</body>
Codepen here
This is happening because you absolutely positioned your .title3 and .list elements which remove them from the normal flow.
If you want to achieve this layout use float:right on your ul and insert a clear in your div (in the code below I achieved this using the::after:pseudo element of yourdiv`)
* {
font-family: "Helvetica";
}
/* list */
.header3 {
width: 300px;
background-color: lightgray;
border: 1px dashed grey;
position:relative;
}
.header3::after {
content: '';
display: table;
clear: both;
}
.title3{
display:inline-block;
vertical-align:center;
background-color:#bada55;
}
.list {
list-style:none;
margin:0px;
padding:0px;
border:1px dashed green;
float: right;
}
.item {
width: 50px;
height: 50px;
display: inline-block;
text-align: center;
}
.item-1 {
background-color: orangered;
}
.item-2 {
background-color: skyblue;
}
<div class="header3">
<div class="title3">bollard name</div>
<ul class="list">
<li class="item item-1"></li>
<li class="item item-2"></li>
</ul>
</div>
Related
I want my divs(.give, .sep, .take) to fill its parent(.trade)'s width.
HTML code:
<div class="trade">
<div class="give"></div>
<div class="sep"></div>
<div class="take"></div>
</div>
CSS code:
.trade {
position: relative;
width: 90%;
height: 80px;
border: 1px solid black;
}
.give,
.take {
height: 100%;
display: inline-block;
}
.sep {
width: 20px;
height: 100%;
border-left: 1px solid black;
border-right: 1px solid black;
display: inline-block;
}
But, .give,.take{width:auto;} did not fill it.
I also tried:
.give,
.take {
position:absolute;
width:50%;
}
.sep {
position:absolute;
left:50%;
transform:translate(-50%,0);
}
.give {
left: 0;
}
.take {
right: 0;
}
But .give and .take invaded .sep's place.
How can I make it? I don't want to use Javascript if possible.
+) .give{margin-right:10px;} .take{margin-left:10px;} or .give{padding-right:10px;} .take{padding-left:10px;} didn't work and just expanded their width.
Is this the intended result? flexbox makes this fairly straightforward... The borders and the padding on .trade are for visual aid only
.trade{
display:flex;
flex-direction:row;
justify-content:space-around;
align-content:center;
border:1px solid red;
padding:1rem;
margin:0 auto;
float:none;
width:80%;
height:10rem;
}
.trade div{
border:1px solid black;
flex:1
}
.trade div:before{
content:attr(class)
}
<div class="trade">
<div class="give"></div>
<div class="sep"></div>
<div class="take"></div>
</div>
As said by G-Cyrillus, you shouldn't try to hack with float. inline-block is also completely unecessary and far to complicated for your purpose in this case.
The real tool is Flexbox. Add .trade { display: flex; } to the CSS to use flexbox.
Then you can use .give, .take { flex-grow: 1; } to make them extend to fill the entire parents width equally. Instead of using margins to seperate your 3 child elements, you can use .trade { column-gap: 20px; } instead.
.trade {
position: relative;
width: 90%;
height: 80px;
border: 1px solid black;
display: flex;
column-gap: 20px;
}
.sep {
width: 20px;
}
.give,
.take {
flex-grow: 1;
}
/* added for demonstration */
.trade {
background-color: red;
}
.give,
.sep,
.take {
background-color: blue;
}
<div class="trade">
<div class="give"></div>
<div class="sep"></div>
<div class="take"></div>
</div>
This question already has answers here:
Prevent child div from overflowing parent div
(3 answers)
Closed 3 years ago.
I am trying to create front end in angular based on a design given. My design looks like
My code
.html
<div fxLayout="row" fxLayoutAlign="space-bewteen start" fxLayoutGap="12px" class="side_start">
<div fxFlex="12" class="second_bar">
Side
</div>
<div fxFlex="88" fxLayout="column" fxLayoutAlign="space-bewteen" fxLayoutGap="12px">
<div [ngClass]="['third_bar_1']">
<div fxLayout="row" fxLayoutAlign="space-bewteen start" >
<div fxFlex="7" class="zone">
Zone Thermal Comfort
</div>
<div fxFlex="5" class="temp">
<p>TEMP</p>
<p>37 deg</p>
</div>
<div fxFlex="5" class="hum">
<p>RH %</p>
<p>25</p>
</div>
<div fxFlex="7" class="comfort_index">
48
</div>
<div fxFlex="8" class="comfort_meter">
<img class="meter_img" src="../../assets/Temp Hot-01-01.png">
</div>
<div fxFlex = 7 class="energy_box">
ENERGY USAGE
</div>
<div fxFlex = 7 class="energy_reading">
30%
</div>
<div fxFlex="8" class="energy_meter">
<img src="../../assets/Energy Gauge 10-01.png" >
</div>
</div>
</div>
<div [ngClass]="['third_bar_2']">
second
</div>
</div>
</div>
.css
.second_bar{
background-color: #6390c3;
height: calc(100vh - 200px);
}
.third_bar_1{
border:1px solid red;
background-color: white;
height: 60px;
}
.zone {
display: flex;
align-items: center;
/* font-color: #5d6d88; */
background-color: #f1cd86;
text-align: center;
height: 71%;
}
.temp {
background-color: #73d9fa ;
text-align: center;
}
.hum{
background-color: #73fac5;
text-align: center;
}
.comfort_index{
text-align: center;
background-color: #f1cd86;
height: 71%;
}
.comfort_meter{
margin-left: 1.8%;
align-content: center;
vertical-align: middle;
}
.meter_img{
height: 100%;
width: 100%;
/* object-fit: contain; */
}
.energy_box{
margin-left: 27%;
background-color: #f1cd86;
}
.energy_reading{
background-color: #6390c3;
}
.energy_meter{
margin-left: 1.8%;
}
.third_bar_2{
border:1px solid red;
height: calc(100vh - 355px);
}
what i developed looks like
I am trying to align my divs to center within a div, but its not happening. I have seen other posts and tried several things like display:flex, align:center, many other things, but I was not able to make it look like design. Can some one help me with this.
Here check this out.
https://codepen.io/Cleee/pen/mdbOOKZ
I used float for the columns and the flexbox for centering the content inside the boxes. Added also a few container wrapper. But you just had do define the width and the height of the elements. I used absolute values. You also can use relative values like percent for responsive layouts.
Hope this helps.
body {
font-family:Roboto;
font-size:12px;
}
.zone, .comfort_index, .energy_box, .energy_reading {
display: flex;
align-items: center;
/* font-color: #5d6d88; */
background-color: #f1cd86;
text-align: center;
height: 71%;
justify-content:center;
}
.second_bar { width: 200px;
float:left;}
.contentWrapper {
width:calc(100% - 200px);
float:right;
}
.secondContentWrap {
border:1px solid #ff0000;
min-height:300px;
clear:both;
}
.zone, .comfort_index, .temp , .hum{
width:86px;
height:60px;
float:left;
}
.temp {}
.temp p, .hum p {
height:30px;
box-sizing:border-box;
margin:0;
display:flex;
align-items:center;
justify-content:center;
}
.temp p:nth-of-type(2), .hum p:nth-of-type(2) {
background-color:#639FE5;
color:#fff;
border-right:1px solid rgba(0,0,0,.15)
}
.hum {}
.hum p {}
.hum p:nth-of-type(2) {
border-left:1px solid rgba(0,0,0,.15);
border-right:0;
}
.comfort_index {}
.outterWrapperOne {
width:344px;
float:left;
}
.outterWrapperTwo {
float:left;
width: calc(100% - 344px)
}
.comfort_meter, .energy_box , .energy_reading, .energy_meter {
float:left;
height:60px;
}
.comfort_meter {
width:45px;
height;60px;
}
.comfort_meter img {
width:100%;
height:auto;
}
.energy_box {
margin-left:27%;
width:86px;
}
.energy_reading {
width:86px;
background-color: #6390c3;
color: #fff;
}
.energy_meter {}
.energy_meter img {}
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>
I have 3 divs that I would like to display inline.
2 divs on the left and 1 div on the right most on the screen.
When screen shrinks or the name size increases I want all elements to still stay inline and name to wrap on the new line if it is hitting the right div. Right div has to always be on the right. I would like to avoid using set width/height except for the images.
I cant seem to be able to this correctly.
Also Right div seems to be splitting and not staying inline no matter what I do or even disappearing.
So expected result is: div 1&2 always left, div 3 always right and all three always inline when screen width changes
Here is my html:
<div class="main">
<div class="one">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/74/GeoGebra_icon_geogebra.png" alt="" class="image">
</div>
<div class="two">
<span class="name">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span>
<span class="title">Title</span>
</div>
<div class="three">
<div class="this">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/74/GeoGebra_icon_geogebra.png" alt="" class="this-image">
<span class="this-num">12</span>
</div>
<div class="that">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/74/GeoGebra_icon_geogebra.png" alt="" class="that-image">
<span class="that-num">21</span>
</div>
</div>
</div>
this is my css:
.main {
display: -webkit-inline-box;
}
.this-image, .that-image {
width: 16px;
}
.title, .name {
display: block;
}
.three {
float:right;
position: fixed;
}
.one {
background-color: red;
}
.two {
background-color: green;
margin-left: 15px;
}
.three {
background-color: blue;
}
here is my jsfiddle:
http://jsfiddle.net/r679f840/1/
Thanks
.one with float left, .with margin-right (no float) .three with absolute and no float
.main {
position: relative;
}
.one {
background-color: red;
float:left;
margin-right:15px;
margin-bottom:15px;
}
.two {
background-color: green;
margin-right: 46px;
}
.three {
background-color: blue;
position: absolute;
right: 10px;
top: 0;
}
see fiddle here
try this:
.main {
display:table;
width:100%;
}
.this-image, .that-image {
width: 16px;
}
.title, .name {
display: block;
}
.one, .two, .three {
display:table-cell;
width:30%;
margin:0 1%;
}
.one {
background-color: red;
}
.two {
background-color: green;
margin-left: 15px;
}
.three {
background-color: blue;
}
see fiddle here
Similar answer than Fabio with display : table; as a basis.
Difference is to leave a gap in between second and third cell untill there is enough content to fill it.
DEMO
.main {
display: table;
width:100%;
overflow:hidden;
}
.this-image, .that-image {
width: 16px;
}
.title, .name {
display: block;
}
.one, .two, .three {
display:table-cell;
vertical-align:middle;
}
.one {
background-color: red;
}
.two {
background-color: green;
display:inline-table;
}
.two:after {/* here is the faux-columns revisited to draw your background if needed */
content:'';
display:block;
height:1000px;
margin-bottom:-1000px;
background:green;
}
.three {
background-color: blue;
}
Found solution to my own question myself, but #Barak your answer was almost perfect so I'll keep your answer as the correct.
Here is my jsfiddle: http://jsfiddle.net/r679f840/8/
And here is my CSS:
.main {
display: flex;
}
.this-image, .that-image {
width: 16px;
}
.title, .name {
display: block;
}
.one {
background-color: red;
float:left;
}
.two {
background-color: green;
margin-left: 30px;
padding-right: 60px;
float: left;
width: 100%;
}
.three {
background-color: blue;
float:left;
width: 50px;
}
I'm trying to make 2 divs appear on separate lines within an outside div. Right now I have display:inline-block set for both of them, but I'm not sure how to change this to make them appear on separate lines.
Here is what my code looks right now, I would like John Doe and 100 to appear on separate lines within the leader div:
http://jsfiddle.net/ZnuPR/
HTML
<ul>
<li class="leader">
<div class="ranking">1</div>
<div class="name">John Doe</div>
<div class="score">100</div>
</li>
</ul>
CSS
.leader {
border: 1px solid;
background-color: #E6E6E6;
display: inline-block;
width: 400px;
margin: 2px;
padding: 2px;
background-repeat: no-repeat;
height: 75px;
}
.ranking {
display: inline-block;
margin:2px;
padding:2px;
width:50px;
height:65px;
background-color:green;
color:white;
}
.name {
display: inline-block;
}
.score {
display: inline-block;
}
You could simply float .ranking and then leave .name and .score as display: block.
http://jsfiddle.net/ZnuPR/7/
.ranking {
/* ... */
float: left;
}
The fastest solution is to set the ranking to "float:left;" and the name and score to "display:block;". Block level elements span 100% by default which will make sure the 2 elements are on seperate lines.
.leader {
border: 1px solid;
background-color: #E6E6E6;
display: inline-block;
width: 400px;
margin: 2px;
padding: 2px;
background-repeat: no-repeat;
height: 75px;
}
.ranking {
float:left;
margin:2px;
padding:2px;
width:50px;
height:65px;
background-color:green;
color:white;
}
.name {
display: block;
}
.score {
display: block;
}
http://jsfiddle.net/ZnuPR/2/
I think this is what you mean:
http://jsfiddle.net/ZnuPR/6/
Don't use inline-block and remove the height from the container, it will automatically adjust to the height it needs to be.
http://jsfiddle.net/ZnuPR/8/
Added a .details wrapper and some floats.
.ranking {
float:left; /* Floating */
margin:2px;
padding:2px;
width:50px;
height:65px;
background-color:green;
color:white;
}
.details {
float:left; /* floating */
}
.name {
display: block; /* Changed to block */
}
.score {
display: inline-block;
}
<ul>
<li class="leader">
<div class="ranking">1</div>
<div class="details">
<div class="name">John Doe</div>
<div class="score">100</div>
</div><!-- end details wrapper-->
</li>
</ul>
I think this could be useful:
http://jsfiddle.net/ZnuPR/10/
.leader {
border: 1px solid;
background-color: #E6E6E6;
display: inline-block;
width: 400px;
margin: 2px;
padding: 2px;
background-repeat: no-repeat;
}
.ranking {
width: 100%;
margin:2px;
padding:2px;
width:50px;
height:65px;
background-color:green;
color:white;
}
.name {
width: 100%;
}
.score {
width: 100%;
}
This is what I did:
CSS
.leader {
border: 1px solid;
background-color: #E6E6E6;
display: inline-block;
width: 400px;
margin: 2px;
padding: 2px;
background-repeat: no-repeat;
}
.ranking {
display: inline-block;
margin:2px;
padding:2px;
width:50px;
height:65px;
background-color:green;
color:white;
}
I got rid of display: inline-block and height