I want to have an avatar image with two divs on its right that are vertically aligned to it.
https://jsbin.com/qafiroquve/1/edit?html,css,output
I've read so many posts about this, but none of them seems to help me.
What is the best approach to having the image on the left with 30% of the main div's (header) width, and the info div with 70% of it?
If either of the info divs (name or position) has too much text, I want the info div to get vertically aligned to the image on its left.
I also want this info div to have a margin with the image.
I've tried so many options: float: left on avatar div, display: inline-block on both avatar and info, width: 30% and 40% . I don't want to use bootstrap for this purpose as it complicates things and I want to keep it as simple as possible.
You can use either table-cell how #w3debugger suggested or you can take advantage of a quick css hack to align vertically:
.yourclass{
position:absolute;
top: 50%;
transform: translateY(-50%)
}
But that needs the parent of .yourclass to be position:relative and be of type display:block; If your parent is block it will take the height of the block that is inside it, so the avatar, that is next to .yourclass needs to be display:block as well,
I edited your example:
HTML:
<div class="header">
<div class="avatar">
<img src="http://i.imgur.com/pBcut2e.jpg" />
</div><div class="info">
<div class="name">Important person here </div>
<div class="position">CHIEF DIGITAL STRATEGIST & CO-FOUNDER</div>
</div>
</div>
CSS:
.header {
width: 500px;
background: aqua;
margin: 0 auto;
padding: 10px;
position: relative;
}
.avatar img {
width: 30%;
border-radius: 50%;
}
.info{
box-sizing: border-box;
padding: 0 40px;
width: 70%;
position:absolute;
right: 0;
vertical-align: top;
top: 50%;
transform: translateY(-50%)
}
Live preview:
https://jsbin.com/gogewefizo/1/edit?html,css,output
Unfortunately, vertical-align didn't work with float elements. You should use display: table-cell or `display: inline-block in order to meet your requirements.
Please check the code below.
.header {
width: 500px;
background: aqua;
margin: 0 auto;
padding: 10px;
display: table;
}
.avatar img {
width: 150px;
}
.avatar,
.info {
display: table-cell;
vertical-align: middle;
}
<div class="header">
<div class="avatar">
<img src="http://i.imgur.com/pBcut2e.jpg" />
</div>
<div class="info">
<div class="name">Important person here</div>
<div class="position">CHIEF DIGITAL STRATEGIST & CO-FOUNDER</div>
</div>
</div>
Related
I'm trying to do something that doesn't seem to have been asked. I have a jsfiddle:
http://jsfiddle.net/kahanu/zo7yj3s0/4/
I have two floated divs side-by-side, the left div has content that creates height of the parent div. The right div will simply have buttons that need to be vertically centered in whatever height the left div creates. So there are no known dimensions, either height or width.
Here's what I have:
<div class="parent">
<div class="line">
<div class="left">
<p>This is some content to create some height to the div. </p>
<p>This is some content to create some height to the div. </p>
<p>This is some content to create some height to the div. </p>
<p>This is some content to create some height to the div. </p>
<p>This is some content to create some height to the div. </p>
<p>This is some content to create some height to the div. </p>
<p>This is some content to create some height to the div. </p>
</div>
<div class="right">
<button>Center me vertically</button>
</div>
</div>
</div>
And this is the CSS:
html, body {
height: 100%;
width: 100%;
font-size: 13px;
}
.parent {
height: 10%;
width: 100%;
background-color: grey;
font-size: 1.6em;
display: table;
}
.line {
display: table-cell;
vertical-align: middle;
background: blue;
}
.left {
float: left;
width: 50%;
background-color: yellow;
}
.right {
float: right;
width: 50%;
background-color: red;
height: 100%;
vertical-align: middle;
text-align: center;
}
I feel like I'm close, I'm just missing an important concept.
So how can I vertically center the button in the right-hand div?
Vertical align only applies to inline or inline-block elements. It affects the
alignment of the element itself, not its contents (except when applied
to table cells) When it’s applied to a table cell, the alignment
affects the cell contents, not the cell itself
Read more on this here: http://www.impressivewebs.com/css-vertical-align/
What you can apply this CSS to your button.
button{
position: relative;
top: 50%;
transform: translateY(-50%);
}
If you're into using mixins you can simply write a vertical alignment rule and reuse throughout your project.
Mixin:
#mixin vertical-align($position: relative) {
position: $position;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
CSS:
button {
#include vertical-align();
}
CODEPEN DEMO
Instead of floating the divs you could set their display to table-cell instead:
.left {
display:table-cell;
width: 50%;
background-color: yellow;
}
.right {
width: 50%;
background-color: red;
height: 100%;
vertical-align: middle;
text-align: center;
display:table-cell;
}
jsFiddle example
I'm trying to create a list of items where each item in the list contains essentially two columns ... the left column some text, and the right column 2 buttons for yes/no. I want the two buttons on the right to be vertically aligned with the text. For aesthetic reasons, I want a min-height on the list item. I finally figured out that a floating div must be inside an absolute div for the 100% height to work. The problem is now that I have an absolute div inside my original relative div, it no longer expands to accommodate text longer than min-height. I've read so many articles and tried so many different combinations of height/relative/absolute/float/clear/overflow and nothing has worked for my situation. Is there a solution to this?
In my example here http://jsfiddle.net/THBFY/4/ I need the red box to be the same height as the blue box so that the vertical align works.
<div class="list_container">
<div class="list_item">
<div class="item_text">
My text in this item. This could be a variable length creating a div ranging from about 75-150px in height. This is a lot of text to make it longer although I am not really saying anything here. It is only to make the blue box taller than the red box.
</div>
<div class="item_buttons">
<div class="buttons_inner">
<div class="button button_yes">Y</div>
<div class="button button_no">N</div>
</div>
</div>
</div>
</div>
.list_container { position: relative; width: 400px; }
.list_item { position: relative; min-height: 70px; overflow: hidden; border: #000000 solid 1px; }
.item_text { float: left; width: 340px; background-color: #0066BB }
.item_buttons { display: table; float: right; width: 50px; height: 100%; background: #FF0000; }
.buttons_inner { display: table-cell; vertical-align: middle; }
.button { display: block; margin-left: auto; margin-right: auto; height: 40px; width: 40px; background-repeat: no-repeat; }
.button_yes { background-image: url("images/yes.gif") }
.button_no { background-image: url("images/no.gif") }
When I add in the inner div with position:absolute http://jsfiddle.net/THBFY/5/ the problem is the height no longer increases to show all of the text.
<div class="list_item_inner">...
.list_item_inner { position: absolute; height: 100%; }
But if I now change the min-height of the outer div from 70 to 200 http://jsfiddle.net/THBFY/6/, you can see that the 100% height on the red box is in fact working, so my problem is either in the first situation without the absolute position, I need the red box to stretch, or in the 2nd situation with the absolute div, I need the container to stretch.
HTML:
<div class="list_container">
<div class="list_item">
<div class="item_text">My text in this item. This could be a variable length creating a div ranging from about 75-150px in height. This is a lot of text to make it longer although I am not really saying anything here. It is only to make the blue box taller than the red box.
</div>
<div class="item_buttons">
<div class="buttons_inner">
<div class="button button_yes">Y</div>
<div class="button button_no">N</div>
</div>
</div>
</div>
</div>
CSS:
.list_container { position: relative; width: 400px; }
.list_item { border: #000000 solid 1px; display:table; }
.item_text { display:table-cell; width: 340px; background-color: #0066BB }
.item_buttons { display:table-cell; width: 50px; background: #FF0000; }
.button { display: block; margin-left: auto; margin-right: auto; height: 40px; width: 40px; background-repeat: no-repeat; }
.button_yes { background-image: url("images/yes.gif"); }
.button_no { background-image: url("images/no.gif"); }
fiddle
I'm trying to make a floating div have a height that fills in the parent div.
http://jsfiddle.net/sergep/2qPZ2/1/
The structure is as follows:
Parent div______________________
| Middle child
| Left child - float:left
| Right child - float:right
The problem is that the left child has less text than the right, meaning the right increases the height of the parent div (to fit the div), but the left floating div does not follow suit.
The css looks like so:
.bottomcontainer {
bottom: 0;
position: absolute;
width: 100%;
height: auto;
}
.bottomleft {
background: #346CA5;
float:left;
width: 50%;
}
.middle {
background: #FFCE3C;
}
.bottomright {
background: #65B237;
float:right;
width: 50%;
}
How can I make the blue .bottomleft class stick to the bottom of the .bottomcontainer? - I'm trying to make responsive, so I don't want to use actual pixel sizes!
Consequently, how do I make the text inside vertically align middle?
Use display:table-cell; on the child divs, see here for an example that can be extrapolated
I misunderstood the question. You can fix that by adding an extra div around .bottomleft and .bottomright and display it as table / tablecells:
HTML:
<div id="nav"></div>
<div id="container">
<div class="bottomcontainer">
<div class="middle">
<h2>Intro tag line here</h2>
</div>
<div class="bottom">
<div class="bottomleft">
<h2>Tag line here</h2>
</div>
<div class="bottomright">
<h2>Longer tag line goes here</h2>
</div>
</div>
</div>
</div>
<div name="content" id="content"></div>
CSS:
.bottom {
display: table;
}
.bottomleft {
display: table-cell;
background: #346CA5;
opacity: 1.0;
width: 50%;
vertical-align: middle;
}
.bottomright {
display: table-cell;
background: #65B237;
opacity: 1.0;
width: 50%;
}
And updated Fiddle 2
Delete the float, and add an absolute positioning:
.bottomleft {
background: #346CA5;
opacity: 1.0;
position: absolute;
bottom: 0;
width: 50%;
vertical-align: middle;
}
Also check the updated Fiddle.
I have a div that comprises a graphic background overlaid with text. I want to center this element horizontally and vertically. But I can't get the text to center vertically. So far, I have the following code:
<div id="step">
<div id="background">
<img src="buttonbackground.png" class="stretch" alt="" />
</div>
<div>
<h3>some text</h3>
</div>
</div>
In the CSS:
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
z-index: -1;
}
#step {
text-align:center;
color:white;
}
.stretch {
width:200px;
height:40px;
}
Using the table-cell/vertical-align technique I've seen often referenced elsewhere doesn't quite work.
Given that it's an H3 i'm assuming it's a heading so it's probably gonna be one line of text. If that's the case just set the line-heightof the h3to the height of the container.
If instead it's a paragraph you can do this:
#centeredDiv {
position:absolute;
top: 50%;
left: 50%
margin-top:-20px ;(half the height of the container)
margin-left: -100px; (half the width of the container)
}
Don't mix pixels with percentages.
Try:
#step {
text-align: center;
vertical-align: center;
color: white;
height: 40px;
}
EDIT:
Alternatively, you could try explicitly setting the height of #background to 40px instead of 100%. It should achieve the same effect.
I have two div elements inside one div element. These two div elements are both 50% wide and other one is floated to left and the other is floated to right. The right floated div contains one high picture (in different heights) and left floated div contains text. On the left div these texts are separated into three different sized rows and the whole left div should be as high as the right div. How am I able to do this using only CSS? Here's my example code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
margin: 0;
}
.container {
width: 100%;
height: 100%;
overflow: auto;
background: #FF0;
}
.left {
float: left;
width: 50%;
background: #F0F;
}
.left .first {
height: 20%;
}
.left .second {
height: 50%;
}
.left .third {
height: 30%;
}
.right {
float: right;
width: 50%;
}
.right img {
display: block;
max-width: 100%;
}
p {
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<div class="first">
<p>First</p>
</div>
<div class="second">
<p>Second</p>
</div>
<div class="third">
<p>Third</p>
</div>
</div>
<div class="right">
<img src="http://upload.wikimedia.org/wikipedia/commons/3/3a/Centara_Grand_Hotel.jpg" alt="" />
</div>
</div>
</body>
</html>
The short answer is that you can kind of do this, but I don't think it will behave the way you expect.
You would have to declare explicit heights for the two <div>'s -
.left, .right {
height: 100px /*or whatever height you want*/;
}
If this is a static page, and the image never changes, you can manually enter the pixel amount.
If the picture is going to change, and you don't know what the height is going to be, you cannot get the left div to match the height of the right div using plain CSS.
There are ways to fake it (see the faux columns technique), but you cannot programmatically get one div to change it's height to match another one.
There are ways to do this with JavaScript, but I'm not going to get into them because you asked about CSS (and I hate using JS to manipulate layout like that - it's very unreliable).
Also: if your containing div, .container, collapses, it's because you need to either float it, or apply a clearfix technique.
There are a few things you need to do:
You need to float the containers.
You need to add an extra container and nest the divs in the following order:
<div class="container2">
<div class="container">
<div class="left">
<div class="first">
<p>First</p>
</div>
<div class="second">
<p>Second</p>
</div>
<div class="third">
<p>Third</p>
</div>
</div>
<div class="right">
<img src="http://upload.wikimedia.org/wikipedia/commons/3/3a/Centara_Grand_Hotel.jpg" alt="" />
</div>
</div>
</div>
Then you need to relative position your containers and move them to the right. After that, you'll move your content divs from the left.
For your CSS:
.container {
width: 100%;
float: left;
position: relative;
right: 50%;
}
.container2 {
width: 100%;
float: left;
overflow:hidden;
position:relative;
}
.left {
float: left;
width: 50%;
left: 50%;
position: relative;
background: #F0F;
}
.right {
float: left;
width: 50%;
left: 50%;
position: relative;
}
Please see this page if you're having difficulties.