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).
Related
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
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;
}
My divs are displaying a staircase effect, as shown below. Usually in tables you can use vertical-align: top, not sure how to do this for divs.
____1_____
_____2_____
______3_____
The CSS I have so far is:
.areadiv
{
float:left;
display: inline-block;
height:auto;
margin:0 auto;
width:130px;
padding:5px;
}
The HTML is:
<div>
<div class="areadiv">
content
</div>
</div>
I'm with #bartolsthoorn that your CSS is quite confusing. But rather than using float I'd use only display: inline-block. And when you use inline-block you have to remember to set vertical-align as well as most (all?) browsers default to middle:
.areadiv {
display: inline-block;
vertical-align: top;
width: 130px;
padding: 5px;
}
That's all you need.
Ok firstly the width of the containing div must be set = or > than the combined widths of the floats, that's how it knows to move on to the next line.
For example..
.areadiv
{
display: inline-block;
vertical-align: top;
width: 130px;
padding: 5px;
}
.containerdiv
{
width: 421px; /* ( 130 + 10 ) x 3 + 1 just in case */
}
And the HTML:
<div class="containerdiv">
<div class="areadiv">
</div>
<div class="areadiv">
</div>
<div class="areadiv">
</div>
</div>
Your CSS doesn't make so much sense with the layout you're are trying to achieve, it should be:
.areadiv {
float: left;
display: block;
width: 130px;
padding: 5px;
}
The margin: 0 auto; is used for centering container divs and you don't need the inline-block.
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>
I have a div that contains three elements, and I am having problems correctly positioning the last one. The div at the left has to be at the left, the one in the middle needs to be centered, and the third one needs to be to the right.
So, I have something like:
#left-element {
margin-left: 9px;
margin-top: 3px;
float:left;
width: 13px;
}
#middle-element {
margin:0 auto;
text-align: center;
width: 300px;
}
#right-element {
float:right;
width: 100px;
}
My html looks like this:
<div id="container-div">
<div id="left-element">
<img src="images/left_element.png" alt="left"/>
</div>
<div id="middle-element">
I am the text inside the middle element
</div>
<div id="right-element">
I am the text in right element
</div>
</div>
Any ideas?
Thanks!
You haven't included css for your container div, but whenever it contains floating elements you should hide overflow like so:
#container {
overflow: hidden;
width: 100%; /* for good measure */
}
When you position the middle div you are setting margins that span the entire container, so any further elements are getting positioned on the line below. Note, at least for most modern browsers, further. If you reorder your elements, like so:
<div id="container">
<div id="left-element">
<img src="images/left_element.png" alt="left"/>
</div>
<div id="right-element">
I am the text in right element
</div>
<div id="middle-element">
I am the text inside the middle element
</div>
</div>
You should find it works. Better method, as I'm not quite sure whether that is supposed to work, would be to use css positioning. Apply the following css:
#container {
overflow: hidden;
width: 100%;
min-height: 36px; /* Remember absolute positioning is outside the page flow! */
position: relative;
}
#left-element {
position: absolute;
left: 9px;
top: 3px;
width: 13px;
}
#middle-element {
margin: 0 auto;
text-align: center;
width: 300px;
}
#right-element {
position: absolute;
right: 0px;
top: 0px;
width: 100px;
}
I think you problem is that you floated the left and right element but not the center one. Try something like this:
CSS:
<style>
#container { display:block; margin:0; padding:0; width:640px; height:400px; outline:1px solid #000; }
#left-element { float:left; display:block; margin:10px; padding:0; width:200px; height:380px; background:#ccc; }
#middle-element { float:left; display:block; margin:10px 0; padding:0; width:200px; height:380px; background:#eaeaea; }
#right-element { float:left; display:block; margin:10px; padding:0; width:200px; height:380px; background:#ddd; }
</style>
HTML:
<div id="container">
<div id="left-element">Left Element</div>
<div id="middle-element">Middle Element</div>
<div id="right-element">Right Element</div>
</div>
The problem is specifically that the middle div has a width set but is not floated, meaning it is still a block level element. Even though the div itself does not go the entire width of the container, it is still treated as such. You need to do 2 things - float the middle div, then clear the floats so the container grows with the height of the child divs. The clearfix method is preferred since it does not cause issues with CSS3 properties that naturally extend outside the bounds of the element they are applied to (box-shadow, text-shadow, etc).
http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
I had the exact same issue. I used this approach. I made the center element display inline-block. That way I didn't have to give the elements specific width or the main container a specific height. The blocks only took up as much space as the content inside. Hope this helps.
.main-nav {
text-align: center;
padding: 2em 3em;
background: #f4f4f4;
}
#logo {
margin: 0;
width: 50px;
float: left;
margin-top: 18px;
}
#logo-link {
float: left;
display: inline-block;
}
.name {
display: inline-block;
}
.nav {
float: right;
margin-top: 18px;
}
.nav li {
float: left;
margin-right: 15px;
margin-top: 5px;
}
.nav li:last-child {
margin-right: 0;
}
<header class="clearfix">
<div class="main-nav">
<img src="img/site-logo.svg" alt="Munchies" id="logo">
<div class="name">
<h1>The Munchies Family Site</h1>
<h2>Designer</h2>
</div>
<nav class="nav clearfix">
<ul>
<li>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
strong text