I'm struggling trying to find a way to vertically align two images on two different columns
but I don't know how to do it.
Here the css of the two columns:
.left {
width: 50%;
height: 100%;
float: left;
text-align: center;
}
.right {
width: 50%;
height: 100%;
float: left;
text-align: center;
}
http://jsfiddle.net/6o6zwqLb/
I guess it should be pretty simple.
DEMO: http://jsfiddle.net/j55dxbe3/
I would use inline-block and make sure that my inline-block elements have no gap in the html (I used a comment to do this rather than making the font-size:0px on the parent and then putting a font size on the children).
HTML
<div id="center">
<div class="left">
<img src="http://placekitten.com/g/250/375" width="250" height="375" />
</div><!-- comment to close gap
--><div class="right">
<img src="http://placekitten.com/g/333/500" width="333" height="500" />
</div>
</div>
CSS:
.left, .right {
width: 50%;
height: 100%;
display:inline-block;
text-align: center;
vertical-align:middle;
}
Displaying your elements as table cells should cure what ails you:
#center {
...
display: table;
}
#center > div {
display: table-cell;
vertical-align: middle;
}
Demo
.left > img {
margin-top: 62px;
}
A margin-top of 62px on the smaller image will move it down where it is (about) 62px to the bottom of the page.
Demo
Related
http://jsfiddle.net/fretwiz/LuShM/
I have a divs stack on top of each other, and inside those divs there's two inline-block divs. One div with 80% width i floated to the left and the other one width 20% just take the right side.
I wanted to make the right div center vertically, the parent row divs may dynamically resize according to the content of the floated div.
Is there a solution other than using tables?
<div id="container">
<div id="content-wrapper">
<div id="publication_date">21 October 2014</div>
<div id="title">Curie-Cancer and DNA Therapeutics partner in the fight against cancers that resist conventional therapies</div>
</div>
<div id="bookmark">
<img src="http://lorempixel.com/output/abstract-q-g-30-30-4.jpg" />
</div>
</div>
<div id="container">
<div id="content-wrapper">
<div id="publication_date">21 October 2014</div>
<div id="title">Curie-Cancer and DNA Therapeutics partner in the fight against cancers that resist conventional therapies</div>
</div>
<div id="bookmark">
<img src="http://lorempixel.com/output/abstract-q-g-30-30-4.jpg" />
</div>
</div>
You can do it without using tables, Try this with CSS :
#container {
border-bottom: 1px solid #ebebeb;
padding-bottom: 30px;
overflow: hidden;
height: 100%;
position: relative;
}
#content-wrapper {
width: 80%;
float: left;
}
#bookmark {
position: absolute;
width: 20%;
text-align: center;
right: 0;
top: 50%;
-ms-transform:translateY(-50%); /* IE 9 */
-webkit-transform:translateY(-50%); /* Chrome, Safari, Opera */
transform:translateY(-50%); /* Standard syntax */
}
Demo
Hope this will help you ...
Is this what you want check the demo
This is the most simple and straight forward way to do this just add display:table and table-cell to container and content wrapper,bookmark
Css
#container {
border-bottom: 1px solid #ebebeb;
padding-bottom: 30px;
overflow: hidden;
height: 100%;
display:table;
}
#content-wrapper {
display: table-cell;
width: 100%;
float: left;
}
#bookmark {
width: 20%;
display: table-cell;
vertical-align:middle;
text-align:center;
}
Output
Can you sacrifice the display: inline-block; on the bookmark? If so, try adjusting the css;
http://jsfiddle.net/LuShM/3/
#container {
display: table;
/*previous styles*/
}
#bookmark {
/*previous styles*/
display: table-cell;
vertical-align: middle;
}
I'm using different DIV tags to act as tables and I want to get another DIV at the bottom of the content DIV.
<div class="table">
<div class="table-row">
<div class="table-information">
Content
</div>
<div class="table-content">
More content
<div class="extra">
Here's the extra content
</div>
</div>
</div>
</div>
Here's the CSS:
.table {
display: table;
}
.table-row {
display: table-row;
}
.table-information {
background-color: #eaeaea;
height: 150px;
padding: 10px 15px;
width: 150px;
}
.table-content {
display: table-cell;
height: 150px;
padding: 10px 15px;
}
.extra {
vertical-align: bottom
}
As you can see I have vertical-align: bottom; for the extra class. I want to have the content within that DIV at the bottom and not right below the text More content. But nothing happens when I'm trying this solution.
http://jsfiddle.net/edgren/3jjbV/
How can I solve this problem?
Thanks in advance.
Here is 1 way to achieve that
.table-content {
display: table-cell;
height: 150px;
padding: 10px 15px;
position:relative;
width:150px;
}
.extra {
vertical-align: bottom;
bottom:0;
position:absolute;
}
I do it by adding relative position to the container table-content and then absolute positioning bottom to the extra.
here is a fiddle
Another way is like this:
.extra {
vertical-align: bottom;
display:table-cell;
height: 150px;
width:150px;
}
Here is a fiddle for the 2nd option.
From these 2 options personally i would go with the 1st one,
but you should be careful with the fixed widths and heights (because of the absolute positioning).
Okay so I've started making myself a website for a project that I'm working on. I'm currently sorting out the layout for my website but am stuck on the navbar.
I want my navbar to span 100% of the website, and horizontally/vertically center my buttons (images).
What I've got works ... but I'm just wondering if I'm doing it the most efficient way?
Here is my html.
<div id="wrapper">
<div id="header">
<div id="navbar_left">
</div>
<div id="navbar_buttons">
<img src="../Originals/button_home.png" />
<img src="../Originals/button_logo.png" />
</div>
<div id="navbar_right">
</div>
</div>
</div>
Here is my CSS:
#wrapper {
width: 100%;
margin: 0 auto;
padding: 0;
}
#header {
height: 123px;
width: 100%;
background-image: url(../../Originals/header_background.png);
}
#navbar_left {
width: 25%;
height: 123px;
float: left;
}
#navbar_buttons {
height: 123px;
width: 50%;
float: left;
line-height: 123px;
text-align:center;
}
#navbar_buttons::after {
content: ".";
visibility: hidden;
}
#navbar_right {
width: 25%;
height: 123px;
float: left;
}
Check out this jsFiddle for one example of how you could simplify your markup and CSS. It makes use of inline-block for your images.
HTML (using the header element):
<div id="wrapper">
<header>
<img src="http://placehold.it/200x100" />
<img src="http://placehold.it/200x100" />
</header>
</div>
And CSS:
header {
text-align: center;
background: #222;
}
header img {
display: inline-block;
vertical-align: bottom;
}
Note that a div is display: block by default, so you don't need to specify the width of 100%: it will fill the available width. Similarly, you don't need to declare a margin or padding as they aren't doing anything.
I'd also avoid declaring a fixed height if you can avoid it: just let your parent div expand to the height of its contents.
I'm a newbie when it comes to CSS. I'm working with a HTML content which I would want to look like 3 columns in a single row. I've the following HTML with embedded style:
<style type="text/css">
#main {
width: 100%;
height: 250px;
}
#left-side {
width: 20%;
float: left;
height: 100%;
}
#in-the-middle {
width: 60%;
text-align: center;
display: inline-block;
height: 100%;
}
#right-side {
width: 20%;
display: inline-block;
height: 100%;
}
</style>
<div id="main">
<div id="left-side" align="left">
Hello left
</div>
<div id="in-the-middle" align="center">
Hello center
</div>
<div id="right-side">
Hello right
</div>
</div>
Looks simple, but unfortunately the "Hello right" text gets displayed at the left side of the page. I have set the display for the #right-side to be inline-block, expecting it to show up adjacent to the "Hello center" div, but it doesn't seem to take effect. Can anyone see what I'm missing here?
Since the elements become rendered inline, white-space in your HTML code will affect the rendering. Since there is whitespace between your divs, the browser will render several pixels of white spaces between them.
If you want to use inline-block without float, the solution is to remove the white spaces between each ending tag </div> and opening <div> tag, like his:
<div id="left-side">
Hello left
</div><div id="in-the-middle">
Hello center
</div><div id="right-side">
Hello right
</div>
See live action here: http://jsfiddle.net/LbNGq/
Use your right-side div width as slightly small then it shows in the same column
#right-side {
width: 19%;
display: inline-block;
height: 100%;
}
See Demo
Use float:left with display: inline-block
try this css script
<style type="text/css">
#main {
width: 100%;
height: 250px;
display: inline-block;
}
#left-side {
width: 20%;
float: left;
height: 100%;
}
#in-the-middle {
width: 60%;
text-align: center;
display: inline-block;
height: 100%;
float:left;
}
#right-side {
width: 20%;
display: inline-block;
height: 100%;
float:left;
}
I've got two div containers.
Whilst one needs to be a specific width, I need to adjust it, so that, the other div takes up the rest of the space. Is there any way I can do this?
.left {
float: left;
width: 83%;
display: table-cell;
vertical-align: middle;
min-height: 50px;
margin-right: 10px;
overflow: auto;
}
.right {
float: right;
width: 16%;
text-align: right;
display: table-cell;
vertical-align: middle;
min-height: 50px;
height: 100%;
overflow: auto;
}
<div class="left"></div>
<div class="right"></div> <!-- needs to be 250px -->
See: http://jsfiddle.net/SpSjL/ (adjust the browser's width)
HTML:
<div class="right"></div>
<div class="left"></div>
CSS:
.left {
overflow: hidden;
min-height: 50px;
border: 2px dashed #f0f;
}
.right {
float: right;
width: 250px;
min-height: 50px;
margin-left: 10px;
border: 2px dashed #00f;
}
You can also do it with display: table, which is usually a better approach: How can I put an input element on the same line as its label?
It's 2017 and the best way to do it is by using flexbox, which is IE10+ compatible.
.box {
display: flex;
}
.left {
flex: 1; /* grow */
border: 1px dashed #f0f;
}
.right {
flex: 0 0 250px; /* do not grow, do not shrink, start at 250px */
border: 1px dashed #00f;
}
<div class="box">
<div class="left">Left</div>
<div class="right">Right 250px</div>
</div>
You can use calc() Function of CSS.
Demo: http://jsfiddle.net/A8zLY/543/
<div class="left"></div>
<div class="right"></div>
.left {
height:200px;
width:calc(100% - 200px);
background:blue;
float:left;
}
.right {
width:200px;
height:200px;
background:red;
float:right;
}
Hope this will help you!!
If you can flip the order in the source code, you can do it like this:
HTML:
<div class="right"></div> // needs to be 250px
<div class="left"></div>
CSS:
.right {
width: 250px;
float: right;
}
An example: http://jsfiddle.net/blineberry/VHcPT/
Add a container and you can do it with your current source code order and absolute positioning:
HTML:
<div id="container">
<div class="left"></div>
<div class="right"></div>
</div>
CSS:
#container {
/* set a width %, ems, px, whatever */
position: relative;
}
.left {
position: absolute;
top: 0;
left: 0;
right: 250px;
}
.right {
position: absolute;
background: red;
width: 250px;
top: 0;
right: 0;
}
Here, the .left div gets an implicitly set width from the top, left, and right styles that allows it to fill the remaining space in #container.
Example: http://jsfiddle.net/blineberry/VHcPT/3/
If you can wrap them in a container <div> you could use positioning to make the left <div> anchored at left:0;right:250px, see this demo. I'll say now that this will not work in IE6 as only one corner of a <div> can be absolutely positioned on a page (see here for full explanation).
1- Have a wrapper div, set the padding and margin as you like
2- Make the left side div the width you need and make it float left
3- Set the right side div margin equal to the left side width
.left
{
***width:300px;***
float: left;
overflow:hidden;
}
.right
{
overflow: visible;
***margin-left:300px;***
}
<div class="wrapper">
<div class="left">
...
</div>
<div class="right" >
...
</div>
</div>
Hope this works for you!
There are quite a few ways to accomplish, negative margins is one of my favorites:
http://www.alistapart.com/articles/negativemargins/
Good luck!
set your right to the specific width and float it, on your left just set the margin-right to 250px
.left {
vertical-align: middle;
min-height: 50px;
margin-right: 250px;
overflow: auto
}
.right {
width:250px;
text-align: right;
display: table-cell;
vertical-align: middle;
min-height: 50px;
height: 100%;
overflow: auto
}
If you need a cross browser solution, you can use my approach, clear and easy.
.left{
position: absolute;
height: 150px;
width:150px;
background: red;
overflow: hidden;
float:left;
}
.right{
position:relative;
height: 150px;
width:100%;
background: red;
margin-left:150px;
background: green;
float:right;
}
Use the simple this can help you
<table width="100%">
<tr>
<td width="200">fix width</td>
<td><div>ha ha, this is the rest!</div></td>
</tr>
</table>