I have div containers that are placed below each other on a web page. (Its a "one pager")
I want to place a div at the bottom inside each of these divs.
Here is the css for the div that i want to place it inside.
#useit {
width: 100%;
height: 1550px;
background-color: #333333;
float: left;
}
Anyone know how to do it?
Without seeing at least the style for the containing element, what I can provide is this:
.container {
position:relative;
}
.inner {
bottom:0;
position:absolute;
/* other properties */
}
Related
I made a button inside the div body and i want to show it on the right side of my div but when i zoom the page it get outside from the div body need help?
<style>
.mydiv
{
max-width:65%;
min-height:30px;
margin-left:20%;
margin-right:16%;
}
.a
{
max-width:100px;
height:20px;
position:relative;
margin-left:220px;
}
</style>
<html>
<div class="mydiv">
<button class="a">example</button>
</div>
</html>
I think this is happening because (for your div)
max-width:65%;
in the css...if you zoom in enough the button (which has max-width of 100px) is now exceeding the width of your div. Try setting your div to a number of pixels larger than 100px. If you want the button on the right side of the div, try setting the width to a number such as 300px.
max-width:300px;
then try zooming in. Also note IE6 and earlier do not support max-width.
You don't show us much context, but it may work positioning the button to the right using position:absolute;right:0;. (Note you'll need position:relative; on the container to keep it inside the container element)
.mydiv {
position: relative;
max-width: 65%;
min-height: 30px;
margin-left: 20%;
margin-right: 16%;
background: tan;
}
.a {
position: absolute;
right: 0;
max-width: 100px;
height: 20px;
}
Okay so this is quite hard to explain but basically I position the title div perfectly so that it is centered in the header div.
It remains in this position on some computers.
However, on other computers it jumps further down the page - even with the same positioning attributes. (This is tested on the same web browser.)
I have tried with absolute, relative etc. positioning, still no luck!
Note: This div contains text.
CSS:
#header {
position:relative;
height:170px;
background-color: #30A7BF;
margin:0px auto;
padding: 1px;
}
#title {
position: relative;
top: -20px;
left: 315px;
}
Thanks!
Hi is difficult to understand exactly your issue but I can give you a few tips to have a nice center vertical and horizontal:
For horizontal alignment you can use display:inline-block if you want all the div centered:
#header {
text-align:center;
}
#title {
display:inline-block;
}
For vertical align use line-height equal to the total height
#header {
line-height:170px;
}
This only work for one line text if you want another option tell me
And the demo here http://jsfiddle.net/8JLzy/7/
Edit
To work with a text of more than one line you can do this : First your html add a wrapper inside #title:
<div id="header">
<div id="title">
<div class="center">Your Title</div>
</div>
</div>
And on the CSS work with display property:
#title {
display:table;
height:100%;
margin:auto; /*Make the horizontal*/
}
#title .center {
display:table-cell;
vertical-align:middle;/*Make the Vertical*/
}
New demo http://jsfiddle.net/8JLzy/16/
use line-height, not position:relative
#header {
/*position:relative;*/
height:170px;
background-color: #30A7BF;
margin:0px auto;
padding: 1px;
font-size:1em;
}
#title {
line-height:0.5em; /* for example, or instead use padding-top: */
padding-left: 315px;
}
I have a holder div that has specific dimensions, and has a single child element of varying height, and I am trying to align it to the baseline. Currently, I have a second element that is the same fixed height as the container which makes it aligned to the bottom, but if it is on its own, it sticks to the top, regardless of what rules are applied.
So, how can I vertically align an element to the bottom of a container if it is the only child element?
EDIT
While in the process of putting up the code that I am using, I came up with a solution which I have posted. The initial problem is similar to that, but without the position rules, and display:inline-block on the child elements. That is pretty much the long and short of it...
Damn it, thought of a solution after posting the question which works nicely:
Parent Element:
.parent {
height:200px;
position:relative;
width:200px;
}
Child Element:
.parent > * {
bottom:0px;
left:0px;
position:absolute;
right:0px;
}
The height of the Child element is then defined by block elements within it, but it sticks to the bottom
One way using table-cell
Assuming the bare bones markup:
<div class="wrap">
<div>Some content...</div>
</div>
the following CSS will do it:
.wrap {
border: 1px solid red;
height: 200px;
width: 200px;
display: table-cell;
vertical-align: bottom;
}
Major advantage: works with both inline and block level elements.
Disadvantage: Older browsers don't recognize display: table-cell
Demo at: http://jsfiddle.net/audetwebdesign/eXKbt/
Alternate way using inline-block
You can also do it this way by applying the following CSS:
.wrap2 {
border: 1px solid red;
height: 200px;
width: 200px;
}
.wrap2:before {
content: "";
width: 0;
height: 190px;
display: inline-block;
}
.wrap2 div {
display: inline-block;
width: 190px;
border: 1px dotted red;
vertical-align: bottom;
}
However, this approach involved using a pseudo-element to define a fictitious inline block to set a baseline nearly the full height of the box and then using vertical-align on the child element. There were some issues related to the width but it can be made to work.
See earlier fiddle for demo.
Not much detail to go off of, but maybe something like this
.container {
position: relative;
}
.child-element {
position: absolute;
bottom: 0;
}
Basically, the current setup has space between the top of the page and the #header div. I want to remove that space. Tried searching, came up with adding
position:absolute;top:0;left:0;
to the #header div, it works (positions it at the top without space) but the rest of my divs loose all their structure. How to position it at the very top and preserve the current layout of the rest of the divs?
I am also using an image underneath the divs as a background. Using this code.
body
{
background-image:url('../imagez/bestone1400.jpg');
background-repeat:no-repeat;
background-position:top, center;background-size:100%; 2000px;
}
Thanks in advanced.
#container
{
width:100%;
}
#header
{
background-color:#FFA500;
height:400px;
}
#leftcolumn
{
background-color:#FFD700;
height:200px;
width:10%;
float:left;
}
#content
{
background-color:#EEEEEE;
height:200px;
width:80%;
float:left;
}
#rightcolumn
{
background-color:#FFD700;
height:200px;
width:10%;
float:right;
}
#footer
{
background-color:#FFA500;
clear:both;
text-align:center;
}
There is likely padding or margin on html or body. Try something like:
html, body {
padding: 0;
margin: 0;
}
There may also be padding or magins on divs or other elements, so a universal selector might work:
* {
padding: 0;
margin: 0;
}
But it is generally good practice to implement a css reset, like this one, which may be the best solution.
You should remove the Default browser padding, margin and border, use:
/*reset default browser settings */
html, body {
margin: 0px;
padding: 0px;
border: 0px;
}
I have a layout with a middle aligned paging.
The paging is middle-aligned be this trick:
.pager_wrap
{
float: left;
position: relative;
left: 50%;
}
.pager
{
float: left;
position: relative;
left: -50%;
}
This seems to be working fine.
But there was a request to add a facebook like button the right side of the pager, but NOT affecting the position and middle alignment of the paging.
I was thinking about somehow putting the facebook like in a div right after the .pager-wrap div, and somehow modifying its vertical alignment to be over the .pager-wrap div.
I'm no mage in css and these kind of problems tend to take extremely long time to figure out. Can someone help me out on this one?
.button
{
float: right;
position: relative;
right: 10%;
}
Instead of float your can give display:inline-block to it's & text text-align:center to it's parent for center your paging DIV . May be you write like this:
.pager_wrap
{
background:red;
text-align:center;
}
.pager
{
background:yellow;
display:inline-block;
*display:inline /*IE*/
*zoom:1;
text-align:right;
padding:10px;
}
.facebook{
float:right;
width:30px;
height:40px;
background:blue;
}
Check this http://jsfiddle.net/DdPtv/
Place the facebook icon in a div, position it relatively, float to the right and if needed apply a z-index to bring it higher on the stack.