I am trying to create a big rectangle with some child rectangles slotted inside it in HTML. I thought it would be simple but my CSS is visibly poor :(.
Currently, I am able to create the outer div and the inner divs with fixed positions and that breaks if the screen resizes etc. I want to make it responsive. The fiddle is # https://jsfiddle.net/q4smybcv/
.outer-div {
display: inline-block;
height: 150px;
width: 30px;
border: 3px solid grey;
margin-left: 10px;
margin-right: 10px;
}
.inner-div {
position: fixed;
border: 1px solid blue;
}
<html>
<head>
</head>
<body>
<div class="outer-div">
<div class="inner-div" id="inner-div-4" style="width: 28px; height: 28px; top: 248px; left: 469px;"></div>
<div class="inner-div" id="inner-div-3" style="width: 28px; height: 28px; top: 220px; left: 469px;"></div>
<div class="inner-div" id="inner-div-2" style="width: 28px; height: 28px; top: 192px; left: 469px;"></div>
<div class="inner-div" id="inner-div-1" style="width: 28px; height: 28px; top: 164px; left: 469px;"></div>
</div>
</body>
</html>
Any help is appreciated
Flexbox can manage all this without positioning at all.
We can add the inner divs in order and then switch the order they layout using flex-direction. After that it's just a matter of alignment to whichever end you require,
.outer-div {
display: inline-flex;
flex-direction: column-reverse;
height: 150px;
width: 30px;
border: 3px solid grey;
margin-left: 10px;
margin-right: 10px;
vertical-align:top;
}
.top {
justify-content: flex-end;
}
.bottom {
justify-content: flex-start;
}
.inner-div {
border: 1px solid blue;
width: 28px;
height: 28px;
display: flex;
justify-content: center;
align-items: center;
}
.blue {
background:lightblue;
color:white;
}
.push {
margin-top:auto;
}
<div class="outer-div top">
<div class="inner-div blue">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
</div>
<div class="outer-div top">
<div class="inner-div blue push">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
</div>
<div class="outer-div bottom">
<div class="inner-div blue">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
</div>
I really really recomend you read this: Grid-Layout-Tutorial with examples
It wont take you more than 20 minutes to find what you need
Here a lil snipped of my current Project:
.upper-grid-container {
display: grid; // most important
grid-template-columns: repeat(4, 1fr); //it sooo easy to tell how many columns you want
grid-template-rows: auto;
grid-column-gap: 0.1rem;
grid-row-gap: auto;
}
That way I was able to create this very dynamic layout
You can do it using flex very easily. Also, you can use grid as well.
.outer-div {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
height: 150px;
width: 80%;
border: 3px solid grey;
margin-left: 10px;
margin-right: 10px;
}
.inner-div {
min-width: 50px;
border: 1px solid blue;
margin: 20px;
}
<html>
<head>
</head>
<body>
<div class="outer-div">
<div class="inner-div" id="inner-div-4" style="width: 28px; height: 28px; top: 248px; left: 469px;"></div>
<div class="inner-div" id="inner-div-3" style="width: 28px; height: 28px; top: 220px; left: 469px;"></div>
<div class="inner-div" id="inner-div-2" style="width: 28px; height: 28px; top: 192px; left: 469px;"></div>
<div class="inner-div" id="inner-div-1" style="width: 28px; height: 28px; top: 164px; left: 469px;"></div>
</div>
</body>
</html>
Fixed position puts your content relative to the viewport. However the problem is you inline sytles. You'r top: and left: properties. Because you need a REALTIVE positioned element to wich those divs can refer.
.container {
position: relative;
}
.outer-div {
display: inline-block;
position: absolute;
height: 150px;
width: 30px;
border: 3px solid grey;
margin-left: 10px;
margin-right: 10px;
}
.inner-div {
border: 1px solid blue;
width: 28px;
height: 28px
}
<html>
<head>
</head>
<body>
<div class="container">
<div class="outer-div">
<div class="inner-div" id="inner-div-4"></div>
<div class="inner-div" id="inner-div-3"></div>
<div class="inner-div" id="inner-div-2"></div>
<div class="inner-div" id="inner-div-1"></div>
</div>
</div>
</body>
</html>
Related
How can I center this image that I have in this div in a way that it won't move the 'line' div? I want the line to be touching the top of the square too.
.black {
background: black;
}
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
Here is one way to prevent it from disrupting the flow layout of your container:
you can make the container a position of relative, and the image a position of absolute, positioned off the top and left by 50%, then transform it so that the center of the image is in the center position.
You could also just make the image a background-image of the div instead of using an image element, which may be easier to manipulate.
.black {
background: black;
}
.square {
position: relative;
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
</div>
I'm not sure I understand your exact desired end goal. But, if I understand correctly, you could create a flex parent to justify the image, and then position the line absolutely within that. See -
.black {
background: black;
}
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.image {
height: 60px;
width: 60px;
}
.line {
width: 4px;
background-color: red;
position: absolute;
left: 0;
top: 0;
bottom: 0
}
<div class="square black">
<div class="line"></div>
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
</div>
You can just use these css for .square and .image
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
position: relative;
}
.image {
height: 60px;
width: 60px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
You can easily center a image by using CSS position absolute. By making the position of square black class "absolute" and apply to properties "top: 45%;" and "left: 47%" . By applying this your problem will be definitely solve.
.black {
background: black;
}
.square {
display: flex;
align-item: center;
justify-content: center;
width: 200px;
height: 500px;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
</div>
</div>
.black {
background: black;
}
.square {
position: absolute;
top: 45%;
left: 47%;
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
position: absolute;
top:50%;
left:50%;
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
.black {
background: black;
}
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
I have created a div and inside the div I have made bars for which I have to set max-height and height as 100% but I do not know what is the problem as the height 100% is not showing. Can anyone help me out with this. I want to show the bars height to be placed according to the values but the problem is the height is only showing when I am setting height in pixels it is not working when I place height as 100% I want to show the height to be 100% can anyone help me out with fixing this issue for me please would be grateful for your help.
Here is my code -
.bar_graph {
width: 341px;
height: 258px;
background-color: #fff;
position: absolute;
top: 15px;
left: 15px;
padding: 20px 12px;
display: block;
border: 1px solid #a3a3a3;
}
span.line_gr {
display: block;
background-color: #3d4a7b;
margin: auto;
width: 24px;
max-height: 177px;
margin-left: 0;
height: 100%;
}
.bars_area {
width: 238px;
float: right;
position: absolute;
bottom: -8px;
right: 0;
}
.bars {
float: left;
margin: 0 10px;
margin-top: 20px;
height: 100%;
width: 27px;
}
.bars >p {
font-size: 12px;
margin: 0;
line-height: 30px;
font-weight: bold;
}
.head_graph > h2 {
font-size: 14px;
font-weight: bold;
margin-bottom: 6px;
color: #000;
}
.bar_main {
height: 200px;
position: relative;
}
.bar_main > .line {
height: 60px;
width: 100%;
border-top: 1px solid #ccc;
line-height: 20px;
font-size: 12px;
}
<div class="bar_graph">
<div class="head_graph"><h2>Heading</h2></div>
<div class="bar_main">
<div class="line">3000,000 Mil</div>
<div class="line">200,000</div>
<div class="line">100,000</div>
<div class="line"></div>
<div class="bars_area">
<div class="bars">
<span class="line_gr"></span>
<p>2016</p>
</div>
<div class="bars">
<span class="line_gr"></span>
<p>2015</p>
</div>
<div class="bars">
<span class="line_gr"></span>
<p>2014</p>
</div>
<div class="bars">
<span class="line_gr"></span>
<p>2013</p>
</div>
<div class="bars">
<span class="line_gr"></span>
<p>2012</p>
</div>
</div>
</div>
</div>
I do not know what is the problem as the height 100% is not showing
A height in percent only works if the parent element also has a height (either set explicitly, or implicitly based on other properties, such as an absolute positioned element with top and bottom given).
Your .bars_area does not have such a height, so trying a height in percentage on the children won’t work either.
As others says it won't work. I can suggest you a different approach if you like you can do it.Use div instead of span.Remember I am just suggesting you another approach according your code not an answer.
.bar_graph {
width: 341px;
height: 258px;
background-color: #fff;
position: absolute;
top: 15px;
left: 15px;
padding: 20px 12px;
display: block;
border: 1px solid #a3a3a3;
}
.inner {
position: absolute;
width:5px;
height:200px;
background: grey;
bottom:25px;
}
span.line_gr {
display: block;
background-color: #3d4a7b;
margin: auto;
width: 24px;
max-height: 177px;
margin-left: 0;
height: 100%;
}
.bars_area {
width: 238px;
float: right;
position: absolute;
bottom: -8px;
right: 0;
}
.bars {
float: left;
margin: 0 10px;
margin-top: 20px;
height: 100%;
overflow: hidden;
}
.bars >p {
font-size: 12px;
margin: 0;
line-height: 30px;
font-weight: bold;
}
.head_graph > h2 {
font-size: 14px;
font-weight: bold;
margin-bottom: 6px;
color: #000;
}
.bar_main {
height: 200px;
position: relative;
}
.bar_main > .line {
height: 60px;
width: 100%;
border-top: 1px solid #ccc;
line-height: 20px;
font-size: 12px;
}
<div class="bar_graph">
<div class="head_graph"><h2>Heading</h2></div>
<div class="bar_main">
<div class="line">3000,000 Mil</div>
<div class="line">200,000</div>
<div class="line">100,000</div>
<div class="line"></div>
<div class="bars_area">
<div class="bars">
<div class="inner"></div>
<p>2016</p>
</div>
<div class="bars">
<div class="inner"></div>
<p>2015</p>
</div>
<div class="bars">
<div class="inner"></div>
<p>2014</p>
</div>
<div class="bars">
<div class="inner"></div>
<p>2013</p>
</div>
<div class="bars">
<div class="inner"></div>
<p>2012</p>
</div>
</div>
</div>
</div>
First set .bars_area to height 100% and then set position relative on .bars
I hope it is what you want.
.bar_graph {
width: 341px;
height: 258px;
background-color: #fff;
position: absolute;
top: 15px;
left: 15px;
padding: 20px 12px;
display: block;
border: 1px solid #a3a3a3;
}
span.line_gr {
display: block;
background-color: #3d4a7b;
margin: auto;
width: 24px;
max-height: 177px;
margin-left: 0;
height: 100%;
}
.bars_area {
width: 238px;
float: right;
position: absolute;
bottom: -8px;
right: 0;
height: 100%;
}
.bars {
float: left;
margin: 0 10px;
margin-top: 20px;
height: 100%;
width: 27px;
position: relative;
}
.bars >p {
font-size: 12px;
margin: 0;
line-height: 30px;
font-weight: bold;
}
.head_graph > h2 {
font-size: 14px;
font-weight: bold;
margin-bottom: 6px;
color: #000;
}
.bar_main {
height: 200px;
position: relative;
}
.bar_main > .line {
height: 60px;
width: 100%;
border-top: 1px solid #ccc;
line-height: 20px;
font-size: 12px;
}
<div class="bar_graph">
<div class="head_graph"><h2>Heading</h2></div>
<div class="bar_main">
<div class="line">3000,000 Mil</div>
<div class="line">200,000</div>
<div class="line">100,000</div>
<div class="line"></div>
<div class="bars_area">
<div class="bars">
<span class="line_gr"></span>
<p>2016</p>
</div>
<div class="bars">
<span class="line_gr"></span>
<p>2015</p>
</div>
<div class="bars">
<span class="line_gr"></span>
<p>2014</p>
</div>
<div class="bars">
<span class="line_gr"></span>
<p>2013</p>
</div>
<div class="bars">
<span class="line_gr"></span>
<p>2012</p>
</div>
</div>
</div>
</div>
The parent element should have margins and padding set to 0. Then, the child element can be given that property of height:100%;
This question already has answers here:
Calculator keypad layout with flexbox
(2 answers)
Closed 5 years ago.
I've seen some solutions for this using flex-direction: column but that was for the entire flex container. I already have a container with a row direction and wanted to know if I could make a two row div without changing the whole layout. Here's my current situation.
I'd like to combine the blank div with the div with the equal sign. Here's my code as well. Thanks a lot!
<div class="container">
<div class="headline">
JSCalc
</div>
<div class="display">
</div>
<div class="button-container">
<div class="ac all-rows row1 clear">AC</div>
<div class="ce all-rows row1 clear">CE</div>
<div class="divide all-rows row1">÷</div>
<div class="multiply all-rows row1">×</div>
<div class="seven all-rows">7</div>
<div class="eight all-rows">8</div>
<div class="nine all-rows">9</div>
<div class="subtract all-rows">-</div>
<div class="four all-rows">4</div>
<div class="five all-rows">5</div>
<div class="six all-rows">6</div>
<div class="addition all-rows">+</div>
<div class="three all-rows">3</div>
<div class="two all-rows">2</div>
<div class="one all-rows">1</div>
<div class="all-rows">
</div>
<div class="zero all-rows">0</div>
<div class="decimal all-rows">.</div>
<div class="all-rows">=</div>
</div>
</div>
CSS:
html {
background-color: #333;
}
.container {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 20rem;
height: 30rem;
background-color: #f0f0f0;
border-radius: 3%;
}
.headline {
width: 100%;
height: 5%;
text-align: center;
font-size: 1.5rem;
margin-top: 1%;
}
.display {
height: 20%;
width: 80%;
margin: 0 auto;
background-color: #DFE2DB;
margin-top: 5%;
border: 2px solid #c6cbbf;
border-radius: 5%;
}
.button-container {
height: 75%;
width: 100%;
display: flex;
justify-content: space-around;
align-content: flex-start;
flex-wrap: wrap;
}
.all-rows {
width: 22%;
background-color: #c6c6c6;
height: 3.5rem;
display: inline-block;
margin: 1% 0 1% 0;
border-radius: 5%;
font-size: 2em;
text-align: center;
line-height: 3.5rem;
vertical-align: bottom;
}
.row1 {
margin-top: 5%;
}
.clear {
background-color: #e19ba2;
}
.zero {
width: 47%;
}
.decimal {
flex-grow: 0;
width: 22%;
}
The simplest solution is to use a pseudo and bridge the two, visually.
Add these 2 rules (and the equal class to the markup)
.equal {
position: relative;
}
.equal::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 90%; /* start 10% below the top to cover the rounded border */
height: 100%;
background: inherit;
}
Note, when you add the events, you need to add the "equal" event to both the equal button and the one above it.
Stack snippet
html {
background-color: #333;
}
.container {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 20rem;
height: 30rem;
background-color: #f0f0f0;
border-radius: 3%;
}
.headline {
width: 100%;
height: 5%;
text-align: center;
font-size: 1.5rem;
margin-top: 1%;
}
.display {
height: 20%;
width: 80%;
margin: 0 auto;
background-color: #DFE2DB;
margin-top: 5%;
border: 2px solid #c6cbbf;
border-radius: 5%;
}
.button-container {
height: 75%;
width: 100%;
display: flex;
justify-content: space-around;
align-content: flex-start;
flex-wrap: wrap;
}
.all-rows {
width: 22%;
background-color: #c6c6c6;
height: 3.5rem;
display: inline-block;
margin: 1% 0 1% 0;
border-radius: 5%;
font-size: 2em;
text-align: center;
line-height: 3.5rem;
vertical-align: bottom;
}
.row1 {
margin-top: 5%;
}
.clear {
background-color: #e19ba2;
}
.zero {
width: 47%;
}
.decimal {
flex-grow: 0;
width: 22%;
}
.equal {
position: relative;
}
.equal::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 90%; /* start 10% below the top to cover the rounded border */
height: 100%;
background: inherit;
}
<div class="container">
<div class="headline">
JSCalc
</div>
<div class="display">
</div>
<div class="button-container">
<div class="ac all-rows row1 clear">AC</div>
<div class="ce all-rows row1 clear">CE</div>
<div class="divide all-rows row1">÷</div>
<div class="multiply all-rows row1">×</div>
<div class="seven all-rows">7</div>
<div class="eight all-rows">8</div>
<div class="nine all-rows">9</div>
<div class="subtract all-rows">-</div>
<div class="four all-rows">4</div>
<div class="five all-rows">5</div>
<div class="six all-rows">6</div>
<div class="addition all-rows">+</div>
<div class="three all-rows">3</div>
<div class="two all-rows">2</div>
<div class="one all-rows">1</div>
<div class="all-rows"></div>
<div class="zero all-rows">0</div>
<div class="decimal all-rows">.</div>
<div class="all-rows equal">=</div>
</div>
</div>
Another way is to wrap the 3/2/1/0/./ and the /=/ into 2 groups, make those wrappers flex row containers and then adjust their width's/margin's to match the rest of the buttons.
I have following HTML:
<div className={`page-header-profile-photo-container`}>
<div className="user-picture">
</div>
<div className="user-name">
<p>Sample GmbhH</p>
</div>
</div>
And my css:
.page-header-profile-photo-container{
position: absolute;
top: 10%;
right: 130px;
width: 200px;
}
.user-picture {
position: relative;
top: 10%;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #787567;
}
.user-name{
position: absolute;
top: 5%;
}
This renders like following:
I want to have some space between circular div and text. page-header-profile-photo-container's position has to be absolute.
How can I fix this?
First of all correct your syntax like className to class and try the following code. No need to position:absolute in user-name class
.page-header-profile-photo-container{
width: 200px;
position: absolute;
top: 10%;
right: 130px;
}
.user-picture {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #787567;
display: inline-block;
vertical-align: middle;
}
.user-name{
display: inline-block;
vertical-align: middle;
}
<div class=page-header-profile-photo-container>
<div class="user-picture">
</div>
<div class="user-name">
<p>Sample GmbhH</p>
</div>
</div>
Don't use absolute positioning in user name. Absolute positioning puts an item in a particular position no matter what (doesn't care if it gets overlapped)
Using flex-box it will work good for me. Hope this help.
.page-header-profile-photo-container{
background-color: #f5f5f5;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
position: absolute;
height: 50px;
top: 10%;
right: 130px;
padding: 5px 10px;
width: 200px;
}
.user-picture {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
/*background-color: #787567;*/
}
.user-picture img{
border-radius: 50%;
display: block;
height: auto;
max-width: 100%;
}
.user-name{
font-size: 15px;
}
<div class=page-header-profile-photo-container>
<div class="user-picture">
<img src="http://placehold.it/40x40" alt="Profile Picture" />
</div>
<div class="user-name">
<p>Sample GmbhH</p>
</div>
</div>
I have 4 div, which look something like this
Desired output:
Current code:
<div class="center aligned" style="width: 100%;height: 7em; padding: 2em; position:absolute;">
<div class="ui small grey label fluid progress_padding_top_bottom" style="z-index:1;height: 7em; border-radius: 0; padding-right: 0; padding-left: 0; background-color: #E8E8E8 !important;">
<div style="background-color: #21BA45; width: 5%; height: 7em; float:left;"></div>
<div style="background-color: #ffdd00; width: 20%; height: 7em; float:left;"></div>
<div style="width: 100%;" class="center aligned">ABC</div>
</div>
Update: This is a part of a progress bar, so both red and yellow width will change
Wrap the colored divs in their own container and position it absolutely unde rthe content.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.wrapper {
width: 50%;
margin: 1em auto;
background: lightgrey;
height: 7em;
display: flex;
justify-content: center;
align-items: center;
position: relative;
font-weight: bold;
}
.content {
position: relative;
z-index: 1;
}
.underlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.red {
height: 100%;
background: red;
width: 25%;
float: left;
}
.yellow {
height: 100%;
background: yellow;
float: left;
width: 25%;
}
<div class="wrapper">
<div class="content">ABC</div>
<div class="underlay">
<div class="red"></div>
<div class="yellow"></div>
</div>
</div>
This produces what you're trying to putput
https://jsfiddle.net/wcsfnbuL/
<div class="center aligned" style="width: 100%;height: 7em; padding: 2em; position:absolute;">
<div style="background-color: red; width: 15%; height: 7em; float:left; margin: auto;"></div>
<div style="background-color: #ffdd00; width: 15%; height: 7em; text-align: center; vertical-align: middle; line-height: 7em; float:left; margin: auto;">ABC</div>
<div class="ui small grey label fluid progress_padding_top_bottom" style="z-index:1;height: 7em; border-radius: 0; padding-right: 0; padding-left: 0; background-color: #E8E8E8; float: left; width: 15%"></div>
</div>