I've been trying to achieve the following:
Note: The dashed line is just a guide showing that .inner-a and .inner-b are both horizontally and vertically middle aligned to an imaginary split of .outer down the middle.
Is this possible using just CSS? Or would it need some javascript to achieve?
Here is what I have till now:
HTML
<div class="outer">
<div class="inner-a"></div>
<div class="inner-b"></div>
</div>
CSS
.outer {
width: 300px;
height: 300px;
}
.inner-a, inner-b {
width: 100px;
height: 100px;
}
.inner-a {
float:left;
}
.inner-b {
float: right;
}
.outer { display: inline-flex; align-items: center; }
Try This:
.outer {
width: 500px;
height: 300px;
text-align:center;
border:2px solid red
}
.inner-a, .inner-b {
width: 100px;
height: 100px;
display:inline-block;
border: 2px solid #000;
margin: 10px;
position: relative;
top: 50%;
transform: translateY(-50%);
border:2px solid #000;
margin:10px;
}
<div class="outer">
<div class="inner-a"></div>
<div class="inner-b"></div>
</div>
Since you're using Bootstrap 4 you can use the flexbox utils and avoid the extra CSS..
<div class="outer d-inline-flex justify-content-center align-items-center">
<div class="inner-a">a</div>
<div class="inner-b">b</div>
</div>
https://www.codeply.com/go/fA7OzCOQVp
Related
I am currently trying to figure out a way to be able to have a layout that has a bottom-up, content-oriented resizing behavior.
I have the following situation: https://codepen.io/Flash1232/pen/JJYPVQ
What is wrong here is obviously that the wrapper divs do not wrap around the table divs. Now is there any solution for this involving just plain CSS and HTML or do I have to write something in JS like "set wrapper width to the width of its inner div"?
Thanks in advance for any clues!
Man i solved my problem with display:flex on parent element :)
You may want to consider using a flexbox. Please see below. If there is anything that needs to be different, just let me know.
.outer-div {
position: absolute;
background: black;
width: 800px;
left: 0;
top: 0;
bottom: 0;
overflow: auto;
padding: 10px;
}
.area {
overflow: auto;
display: flex;
border: 5px solid red;
background: white;
margin: 10px 40px 10px 10px;
}
.column {
background: green;
border: 5px solid blue;
}
.wrapper {
display: flex;
border: 5px solid yellow;
justify-content: center;
align-items: center;
}
.table {
white-space: nowrap;
}
.violet {
background: violet;
width: 120%;
height: 80px;
}
.red {
background: red;
width: 150%;
height: 80px;
margin-bottom: 20px;
}
.icons {
Background: yellow;
float: right;
height: auto;
width: auto;
}
<div class="outer-div">
<div class="area">
<div class="column">
<div class="wrapper">
<div class="table red">
<span>***Table Content***</span>
</div>
</div>
<div class="wrapper">
<div class="table violet">
<span>***Table Content***</span>
</div>
</div>
</div>
<div class="column">
<div class="wrapper">
<div class="table violet">
<span>***Table Content***</span>
</div>
</div>
</div>
</div>
<div class="icons">
<p>Icon</p>
<p>Icon</p>
<p>Icon</p>
<p>Icon</p>
<p>Icon</p>
<p>Icon</p>
</div>
</div>
You should read the definition of the width attribute.
https://developer.mozilla.org/en/docs/Web/CSS/width
Percentages: refer to the width of the containing block
If you set width to 150%, you explicitly say, that the child should be bigger than the parent. You can not expect, that the parent has the same width like the child, if you force the child to be wider.
I created a div based table. I'm trying to take a image, put it in top left table cell and make it responsive. I've made it responsive, but its not in the table cell I want it to be. Any help?
JSFiddle:
https://jsfiddle.net/benjones337/3c4fkb78/18/
HTML
<div class="hmTable">
<div class="hmTableRow">
<div class="hmTableCell"><p class="rspimg1"></p></div>
<div class="hmTableCell"><p class="rspimg2"></p></div>
</div>
<div class="hmTableRow">
<div class="hmTableCell">textholder</div>
<div class="hmTableCell">textholder</div>
</div>
</div>
CSS
.hmTable {
margin: 0 auto; /* or margin: 0 auto 0 auto */
display: table;
width: 50%;
}
.hmTableRow {
display: table-row;
}
.hmTableCell, .hmTableHead {
display: table-cell;
width: 50%;
height:100%;
border: 1px solid #999999;
position:relative;
}
.hmTableBody {
display: table-row-group;
}
.rspimg1{
background-image: url("https://upload.wikimedia.org/wikipedia/en/thumb/3/39/Red_triangle_with_thick_white_border.svg/1152px-Red_triangle_with_thick_white_border.svg.png");
background-repeat:no-repeat;
background-size:100% 100%;
width:100%;
height:100%;
position:absolute;
}
.rspnimg2{
}
When using background-image, the div doesn't grow with the image, so you will need to give it a height/width, either to the cell or the image div (btw, I changed your p to div, as p is for text rather than image).
Below sample I'm pretty sure look close to what you are after, and If not, drop me a comment and I'll fix it for you.
html, body {
margin: 0;
height: 100%;
}
.hmTable {
margin: 0 auto;
display: table;
width: 50%;
height: 30%;
}
.hmTableRow {
display: table-row;
height: 10%;
}
.hmTableCell, .hmTableHead {
display: table-cell;
width: 50%;
height:100%;
border: 1px solid #999999;
}
.rspimg1{
background: url("https://upload.wikimedia.org/wikipedia/en/thumb/3/39/Red_triangle_with_thick_white_border.svg/1152px-Red_triangle_with_thick_white_border.svg.png") center no-repeat;
background-size: contain;
width:100%;
height:100%;
}
.rspnimg2{
}
<div class="hmTable">
<div class="hmTableRow">
<div class="hmTableCell">
<div class="rspimg1">triangle</div>
</div>
<div class="hmTableCell">
<div class="rspimg2">square</div>
</div>
</div>
<div class="hmTableRow">
<div class="hmTableCell">textholder</div>
<div class="hmTableCell">textholder</div>
</div>
</div>
Remove position:absolute or add top:0 to .rspimg1.
Result
We try to center a CSS circle with a image and a label overlaying the circle. The circle should be horizontally centered in a bootstrap column. Goal is to have this circle always in the horizontal center. Any advise is welcome.
Please see following JSFIDDLE
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="circle1Wrapper">
<div class="circle-textSmall bubble1outer">
<div> <span class="bubbleIconSmall">
<img src="http://lorempixel.com/40/40/" />
</span><span class="bubbleHeadSmall">label</span>
</div>
</div>
</div>
</div>
<div class="col-md-4"></div>
</div>
CSS:
.circle1Wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 9999;
margin: auto;
border: 1px solid;
}
.bubble1outer {
position: absolute;
}
.circle-textSmall div {
width: 125px;
}
.circle-textSmall div {
float: left;
width: 250px;
padding-top: 15%;
line-height: 1em;
margin-top: -0.5em;
text-align: center;
color: #000;
}
span.bubbleIconSmall > img {
width: 45%;
height: auto;
}
.circle-textSmall:after {
width: 125px;
padding-bottom: 125px;
margin-left: 50%;
}
.circle-textSmall:after {
content:"";
display: block;
width: 250px;
height: 0;
padding-bottom: 250px;
background: #ccc;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
It should look like this:
#metaxos, I wanted to put this as a comment, but it is a bit long.
Even when you found a solution that works for you, I think that you may want to consider cleaning that code a bit; look how the original example got rid of most of the code and just kept one div:
.innerwrapper is unnecessary (why not put that style directly on #myCircleDiv?);
Same thing for the div that holds the image (you could put that style directly on the image!);
And the img itself can go too (and use it as background of #myCircleDiv).
This is my opinion (feel free to ignore it), but I think you should aim for something cleaner and easier to maintain, rather than a more complex and elaborated (but unnecessary) structure (unless it is required by the user/customer). The simpler, the better.
In that sense, this (you can see it working on this jsfiddle):
<!-- HTML -->
<div id="myCircleDiv">LABEL</div>
/* CSS */
#myCircleDiv {
width:250px;
height:250px;
border-radius:50%;
display:inline-block;
line-height:375px;
text-align:center;
color:white;
background:url("http://lorempixel.com/50/50/") #ccc no-repeat 50% 38px;
}
Looks beter than this:
<!-- HTML -->
<div id="myCircleDiv">
<div class="innerWrapper">
<div>
<img src="http://lorempixel.com/50/50/" />
</div>
<div>LABEL</div>
</div>
</div>
/* CSS */
#myCircleDiv {
width:250px;
height:250px;
border-radius:50%;
display:inline-block;
background-color:#ccc;
background-size:250px 250px;
line-height:250px;
text-align:center;
color:white;
}
.innerWrapper {
width: 100%;
height: 250px;
}
.innerWrapper div {
float: left;
height: 125px;
width: 100%;
line-height: 125px;
}
.innerWrapper div img {
margin-top: 38px;
}
And the result is exaclty the same. But again... that's my opinion :)
I'm currently making a website where you can find results of Formula One races. To do so, I want to make a result page for each Grand Prix, where the results are being shown in 5 boxes next to each other. Like this:
1 2 3 4 5
But right now it looks like this
1 2
3
4 5
This is the HTML code I use:
<div id="wrap">
<div id="fp1">FP1</div>
<div id="fp2">FP2</div>
<div id="fp3">FP3</div>
<div id="qual">Qual</div>
<div id="race">Race</div>
</div> <!--End wrap div-->
And this the CSS I use:
#wrap{
width: 100%;
height: 600px;
background-color: #000;
border: 1px solid white;
}
#fp1{
width: 20%;
height: 600px;
background-color: #333;
float: left;
}
#fp2{
margin-left: 20%;
width: 20%;
height: 600px;
background-color: #666;
}
#fp3{
margin-left: 40%;
width: 20%;
height: 600px;
background-color: #333;
}
#qual{
margin-left: 60%;
width: 20%;
height: 600px;
background-color: #666;
float: right;
}
#race{
width: 20%;
height: 600px;
background-color: #333;
float: right;
}
Anybody who knows how to fix it?
please check this: http://jsfiddle.net/itz2k13/KAwEz/
#fp1{
width: 20%;
height: 600px;
background-color: #333;
float: left;
}
.....
You can use a generic class, since styles are repetitive. see this for efficient one: http://jsfiddle.net/itz2k13/KAwEz/1/
else you can follow inline-block method, and further in time column and display:flex will be usefull:
http://codepen.io/seraphzz/pen/IosFk
#wrap {
white-space:nowrap;
}
#wrap, .wrap {
/* for test */
height:200px;
overflow:auto;}
.wrap {
-moz-column-width:300px;
-webkit-column-width:300px;
column-width:300px;
}
#wrap div {
white-space:normal;
display:inline-block;
}
#wrap div , .wrap div {
/* for test */
width:300px;
height:100%;
background:#999;
}
<div id="wrap">
<div id="fp1">FP1</div>
<div id="fp2">FP2</div>
<div id="fp3">FP3</div>
<div id="qual">Qual</div>
<div id="race">Race</div>
</div> <!--End wrap div-->
<div class="wrap" >
<div id="fp1">FP1</div>
<div id="fp2">FP2</div>
<div id="fp3">FP3</div>
<div id="qual">Qual</div>
<div id="race">Race</div>
</div> <!--End wrap div-->
If you want no scroll, divide 100%/numbers of boxes (fine if window not too small :) )
cheers
One more thing i noticed other than float:left regarding structure is you can use margin-left without % and give common margin-left like 20px
I'm a tables guy, but I'll need to drag and drop some divs, so I tried doing it tabeless (the right way).
This is what I want to do:
The space between all elements should be 24px. My main problem is having the divs (1,2,3) occupying 100% of available space. The width: 100% its sending them beyond the main container.
This is my code so far:
html
<div id="mainContainer">
<div id="topContainer">Just the top one
</div>
<div id="table">
<div id="Line1Container">
<div id="container1" class="container">1
</div>
<div id="container2" class="container">2
</div>
<div id="container3" class="container">3
</div>
</div>
<div id="Line2Container">
<div id="container4" class="container">4
</div>
<div id="container5" class="container">5
</div>
<div id="container6" class="container">6
</div>
</div>
</div>
</div>
And my css
#mainContainer {
border: 1px solid lightgray;
position:fixed;
top: 80px;
bottom:20px;
left:80px;
right:80px;
overflow-y: scroll;
overflow-x: hidden;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
#topContainer {
border: 1px solid lightgray;
border-radius: 10px;
margin-left: 24px;
margin-right: 24px;
margin-top: 24px;
}
#table {
display: table;
margin: 24px;
width: 95%;
}
#Line1Container, #Line2Container {
display: table-row;
}
.container {
border: 1px solid lightgray;
display: table-cell;
width: 33%;
border-radius: 10px;
}
As you see I tried the table-cell approach, but before I have tried the float: left approach.
Thanks
Fiddle
You can't properly use px values with % values together with dynamic sizes.
You should use x% instead of 24px.
And you can use float: left on the "cells"
How about using a table for separating the divs? that way with the td padding there will always be 24px between them
check out this fiddle:
http://jsfiddle.net/5zfEq/
added:
#Line1Container {
padding:12px;
}
#inner-table {
width: 100%;
}
#inner-table td {
padding: 12px;
}
based on #Edifice fiddle .... thanks ;)