Here is an image of my problem:
http://www.rhexi.com/images/uploads/example.jpg
I am trying to align multiple side-by-side divs to the bottom within a parent div. The end result I am trying to achieve is a bar graph, where you have a parent container, and multiple bar divs a the bottom within the parent.
I have successfully embedded the child bar divs within the container div, but they are all aligned top. How do i get it to align bottom?
I do not want to use position: absolute and bottom: 0 since these bars need to be floating.
Here is my code:
<div style="width: 100px; height: 50px; padding-bottom: 1px; border: 1px solid #000;">
<div style="width: 20px; height: 20px; background: #000; margin-left: 1px; float: left;"></div>
<div style="width: 20px; height: 10px; background: #00f; margin-left: 1px; float: left;"></div>
<div style="width: 20px; height: 5px; background: #f00; margin-left: 1px; float: left;"></div>
</div>
Thanks for the help!
If you want to continue using this technique, but need skybondsor's answer to be aligned with the bottom of the "screen" without using absolute positioning on each bar, just make use of your margin style. Your margin-top should be equal to:
margin-top = height_of_graph - height_of_bar
So, in the example set by skybondsor, this worked for me:
<div style="width: 100px; height: 50px; padding-bottom: 1px; border: 1px solid #000;position:relative;">
<div style="width: 199px; height: 50px; position: absolute; bottom: 0;">
<div style="width: 20px; height: 20px; background: #000; margin-left: 1px; float: left; margin-top: 30px;"></div>
<div style="width: 20px; height: 10px; background: #00f; margin-left: 1px; float: left; margin-top: 40px;"></div>
<div style="width: 20px; margin-top: 45px; height: 5px; background: #f00; margin-left: 1px; float: left;"></div>
</div>
</div>
Hope this helps.
How about creating 3 divs instead of 1? Something like this:
<div style="width: 20px; height: 100%; margin-left: 1px; float: left;">
<div style="height: 80px;"></div>
<div style="height: 100%; background: #000;"></div>
</div>
..
I'm not sure if this is what rfausak is also getting at, but position: absolute, bottom: 0 is the only way to do this. Fortunately, nesting one level deeper will allow you to achieve the effect without losing your floats.
<div style="width: 100px; height: 50px; padding-bottom: 1px; border: 1px solid #000;position:relative;">
<div style="width: 199px; height: 50px; position: absolute; bottom: 0;">
<div style="width: 20px; height: 20px; background: #000; margin-left: 1px; float: left;"></div>
<div style="width: 20px; height: 10px; background: #00f; margin-left: 1px; float: left;"></div>
<div style="width: 20px; height: 5px; background: #f00; margin-left: 1px; float: left;"></div>
</div>
</div>
Maybe make each bar a div nested inside another div and then make the background of the container div the color you want your bar to be, with the nested div the color of the background of the chart. Then, rather than giving the nested div the height you desire, you can give it the inverse.
E.g. something like:
<div style="width: 100px; height: 50px; padding-bottom: 1px; border: 1px solid #fff;">
<div style="width: 20px; height: 50px; background: #000; margin-left: 1px; float: left;">
<div style="width: 20px; height: 30px; background: #fff;"></div>
</div>
<div style="width: 20px; height: 50px; background: #000; margin-left: 1px; float: left;">
<div style="width: 20px; height: 20px; background: #fff;"></div>
</div>
<div style="width: 20px; height: 50px; background: #000; margin-left: 1px; float: left;">
<div style="width: 20px; height: 10px; background: #fff;"></div>
</div>
</div>
Related
1)
I've got 2 divs, placed in 1 big div (container for them). They're supposed to be like small cards with informations. Here, I have a problem. When I have 2 cards next to each other and one card is simply higher, second one moves like it's aligned to bottom of 1st card, but I want to have it aligned allways on top (here is a code and fiddle).
<div class="main-cards">
<div class="card" style="width: 65%;">
<h1>CARD 1</h1>
<p>small</p>
<p>small</p>
<p>small</p>
</div>
<div class="card" style="width: 25%;">
<h1>CARD 2</h1>
<p>small</p>
</div>
</div>
.main-cards{
position: relative;
height: auto;
width: 80%;
margin-left: auto;
margin-right: auto;
top: 150px;
text-align:center;
background-color: #6ab5dd;
}
.card{
display: inline-block;
background-color: white;
height: auto;
margin: 10px;
margin-top: 40px;
padding: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
FIDDLE: https://jsfiddle.net/4px7kc4v/2/
How I want it:
2)
How could I do 3 cards vertically centered in one big container to center, but in this layout? (look at img)
Because I have this problem: https://jsfiddle.net/sx7ryv70/
Thanks for everyone's time! Have a nice day!
1)
Add this to the css of the cards:
vertical-align: top;
2) Having div's as inline-blocks force them to be on the same 'row' as if they are huge text characters. Try fitting the smaller cards together in their own container.
Add vertical-align: top; to .card
Your solutions:
[link](https://jsfiddle.net/Atula/4px7kc4v/3/)
[link](https://jsfiddle.net/Atula/sx7ryv70/1/)
Here look at this JSfiddle
HTML
<div class="main-cards">
<div class="card" style="width: 55%; height: 300px; float:left;"></div>
<div class="card" style="width: 55%; height: 300px; margin-top: 50px; float: left;"></div>
<div class="card" style="width: 25%; height: 650px;"></div>
CSS
.main-cards {
position: relative;
height: auto;
width: 80%;
margin-left: auto;
margin-right: auto;
top: 50px;
text-align: center;
background-color: #6ab5dd;
padding: 30px;
}
.card {
display: inline-block;
background-color: white;
height: auto;
margin: 10px;
margin-top: 40px;
padding: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
All you need to remember is the floating principle.
So I'm trying to get divs to fit perfectly in a wrapper using fixed pixels for width and height. Although I'm confused as to how the pixels don't add up properly.
HTML
<div class="div1">
<img src="image.png" alt="image" class="image">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
<div class="div4">
</div>
</div>
CSS
#wrapper {
height: 455px;
width: 690px;
background-color: grey;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
overflow: hidden;
white-space:nowrap;
}
.div1 {
display: inline-block;
margin-bottom: 10px;
vertical-align:top;
}
.image {
max-width: 172px;
max-height: 172px;
border-radius: 2%;
border: 4px solid blue;
}
.div2 {
height: 172px;
width: 277px;
border: 4px solid blue;
display: inline-block;
margin-left: 30px;
background-color: purple;
}
.div3 {
width: 159px;
height: 188px;
display: inline-block;
margin-left: 30px;
border-left: 4px solid blue;
border-right: 2px solid blue;
border-top: 2px solid blue;
vertical-align: top;
background-color: purple;
}
.div4 {
background: url(image.png) no-repeat center;
background-size: cover;
width: 690px;
height: 265px;
}
If the parent div is 690px wide why can't the child divs add up to 690 with calculated widths, margin and boarders.
(div1)180 + 30 + (div2)285 + 30 + (div3)165 = 690px
If you look at div 3 it's right border can't be seen. You have to reduce the width by 7px to see it.
This is also happening vertically with a 190px div3 height meant to touch div4 exactly but is off by 4px.
Is this a browser issue? Default Alignment issues I'm not aware of? I'm really curious to know why this happens!
Any feedback would be appreciated. : )
If you put comments like this in your HTML you can fix the top but for the image in the 2nd line I dont know yet I continue trying
OK SO I did put the 1st line in a div "test" and gaved him display:block and overflow hidden to take away the the space under and then I did give the div1 fixed heigth and width 180px (image+border)
#wrapper {
height: 455px;
width: 690px;
background-color: grey;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
overflow: hidden;
}
.test{
display:block;
overflow: hidden;
}
.div1 {
height:180px;
width:180px;
display: inline-block;
margin-bottom: 10px;
vertical-align:top;
}
.image {
max-width: 172px;
max-height: 172px;
border-radius: 2%;
border: 4px solid blue;
}
.div2 {
height: 172px;
width: 277px;
border: 4px solid blue;
display: inline-block;
margin-left: 30px;
background-color: purple;
}
.div3 {
width: 159px;
height: 188px;
display: inline-block;
margin-left: 30px;
border-left: 4px solid blue;
border-right: 2px solid blue;
border-top: 2px solid blue;
vertical-align: top;
background-color: purple;
}
.div4 {
background: url('http://lorempixel.com/690/265/cats') no-repeat center;
background-size: contain;
width: 690px;
height: 265px;
display:block;
overflow: hidden;
}
<div id="wrapper">
<div class="test">
<div class="div1">
<img src="http://lorempixel.com/172/172/cats" alt="image" class="image">
</div><!--
--><div class="div2">
</div><!--
--><div class="div3">
</div><!--
--> </div><div class="div4">
</div>
</div>
have you checked out box-sizing feature?
Here is some links that might be helpful.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
I had previously thought that both of the code blocks below would correctly center a div (with some issues with older browsers of course). The first method uses text-align: center whereas the second method uses left and right margins of auto. However, the first block of code below does not center the inner div as I was expecting. Any ideas why?
<div style="text-align: center; background-color: red;">
<div style="border: solid 1px black; width: 100px; height: 100px; background-color: blue">Not working</div>
</div>
The following code does center the div:
<div style="background-color: red;">
<div style="border: solid 1px black; width: 100px; height: 100px; background-color: blue; margin-left: auto; margin-right: auto">Works</div>
</div>
Here is my JSFiddle
It's a block-level element, its position won't be effected by the text-align property. If you set it to display-inline, it will work.
<div style="text-align: center; background-color: red;">
<div style="border: solid 1px black; width: 100px; height: 100px; background-color: blue; display: inline-block;">It will work now</div>
</div>
The div that is centered has margin-left: auto and margin-right: auto, the div that doesn't work lacks any margins.
See this DEMO
On the top box, I added: margin: 0 auto which is shorthand for: margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto;
I am trying to vertically align a div (the "p" element in this example but it could be anything a div a link, an image, etc.) which needs to have its position property set to absolute. I followed this example: http://davidwalsh.name/table-cell-position-absolute
But I can get it to work. Here is the code:
<div style="width: 400px; height: 48px; background-color: #EEE; margin: 0 auto;">
<div style="display: table; position: relative; border: 1px solid blue; width: 100%; height: 100%;">
<div style="display: table-cell; border: 2px solid green;">
<div style="position:relative; overflow: auto; height: 100%;">
<p style="position:absolute; bottom:0; right:0; font-size: 18px; color: black; border: 1px solid orange;">VERTICALLY CENTER ME PLEASE!</p>
</div>
</div>
</div>
</div>
And the jsfiddle: http://jsfiddle.net/bqm7wudc/2/
Could someone suggest a solution please?
I actually sorted the problem that way:
<div style="display: table; position: relative; border: 1px solid red; width: 960; height: 48px; margin: 0 auto;">
<ul style="display: table; vertical-align: middle; border: 1px solid orange; padding: 0px; position:absolute; left: 700px; margin: 0; height: 100%;">
<li style="display: table-cell; vertical-align: middle; font-size: 20px; font-weight: 900; padding-right: 20px;">toto</li>
<li style="display: table-cell; vertical-align: middle; font-size: 20px; font-weight: 900; padding-right: 20px;">titi</li>
</ul>
</div>
The text is defined as the content of a list. The ul element is itself a table (positioned using the absolute mode), while the li elements are table cells. This seems to work.
Updated fiddle: http://jsfiddle.net/bqm7wudc/7/
So I have a header and I'm not really sure how I should code the three element boxes that should be slightly below it, but still on the end of it, like the picture below:
One way, is perhaps position absolute and margin-top, or should I perhaps slice the images, so the top of the boxes is a picture with the header background...
.box {
position: absolute;
margin-top: -30px;
}
Or how should I do it?
Next time you should post some code of what you've tried. Against my better judgement, I made exactly what you drew.
http://jsfiddle.net/xD69h/
HTML:
<div id="a">
<span id="a-text">A</span>
<div id="b">
<span id="b-text">B</span>
</div>
<div id="c">
<span id="c-text">C</span>
</div>
</div>
CSS:
#a {
width: 100%;
height: 150px;
background-color: #EFE4B0;
border: 3px solid #FFABCA;
color: #B97A57;
}
#a-text {
float: left;
}
#b {
width: 200px;
height: 150px;
background-color: #7092BE;
border: 4px solid black;
border-radius: 5px;
color: #B97A57;
float: left;
margin-top: 50px;
margin-left: 50px;
}
#c {
width: 200px;
height: 150px;
background-color: #B97A57;
border: 4px solid #B97A57;
color: white;
float: left;
margin-top: 50px;
}