I am using a div with 2 elements inside and I want to position my 1st element to be vertically aligned top and 2nd element to the bottom of the div. The div is the right portion of my page and equal to the height of my main content.
#right {
float:right;
width: 19%;
background:#FF3300;
margin-left:2px;
padding-bottom: 100%;
margin-bottom: -100%;
}
#right .top {
display:block;
background-color:#CCCCCC;
}
#right .bottom {
bottom:0px;
display:block;
background-color:#FFCCFF;
height:60px;
}
HTML:
<div id="right">
<span class="top">Top element</span>
<span class="bottom"><img src="images/logo_footer1.gif" width="57" height="57" align="left" class="img"> <img src="images/logo_footer2.gif" width="57" height="57" align="right" class="img"></span>
</div>
I want the right div to be like this:
alt text http://christianruado.comuf.com/element.png
If you specify position: relative for #right, and then position: absolute for the two internal elements, you should be able to use top/left/bottom/right attributes to achieve the effect you want.
Try this.
#right {
position:relative; <-- add this
float:right;
width: 19%;
background:#FF3300;
margin-left:2px;
padding-bottom: 100%;
margin-bottom: -100%;
}
}
#right .top {
position:absolute; <-- add this
top: 0px; <-- and this
display:block;
background-color:#CCCCCC;
}
#right .bottom {
position:absolute: <-- add this.
bottom:0px;
display:block;
background-color:#FFCCFF;
height:60px;
}
Adding position:relative; to the parent and position:absolute; with top and bottom will tell your spans that they're meant to be positioned absolutely within your parent and force them to stick to the top and bottom of your div.
Make #right {position:relative}
Make #right .top {position:absolute, top:0}
Make #right .bottom {position:absolute, bottom:0}
Related
I've created a JSFiddle to describe what I mean:
http://jsfiddle.net/3yGLT/
I want my .top section to be affected by the height of the .floated-div, as you can see. At present, my .floated-div content drops over the .bottom section, which is not what I want. The height of the .floated-div needs to dictate the height of the .top section, effectively pushing .bottom down to make room for it.
I thought Clear divs were the solution I wanted, but it's not giving me the behaviour I'm after. I think this would only apply if the main content of .top was in a similar div to floated-div and not embedded in this way.
I can add things like clears, but I can't adjust the structure of this code as it's something that's generated through the CMS.
HTML
<section class="top">
<h1>test</h1>
<p>some content</p>
<div class="floated-div">
<h2>aside content</h2>
<p>some aside content</p>
<p>some aside content</p>
<div class="clear"></div>
</div>
<div class="clear"></div>
</section>
<section class="bottom">
</section>
CSS
.top{
width: 60%;
height:auto;
background:#f1f1f1;
}
.floated-div{
width:40%;
position:absolute;
right:0;
top:0;
}
.clear{
clear:both;
}
.bottom{
width: 100%;
height:100px;
background:#d1d1d1;
}
The problem is that your .float-div doesn't actually float. Because of the "position: absolute" rule it would never affect the height of the parent container (that's the meaning of absolute positioning). To make it float you need to remove this rule and add "float:right" to the div. In this case clearance will do its work.
floated-div {
float: right;
width: 40%;
}
Here is working example: http://jsfiddle.net/qvgz4/
i added this to your css and it worked :
.floated-div > p{margin:0;} /**added**/
.floated-div > h2{margin-bottom:0;}/**added**/
.top{
width: 60%;
height:auto;
background:#f1f1f1;
margin-bottom:5%; /*** added to avoid div overlap **/
}
basically <p> is taking extra area in floated-div1, cleared them through margin!!
If I understand the question correctly, I think the best option is to go with a display:table, like this CSS:
.top{ display:table; width:100%;}
.top .side { display:table-cell; padding:.5em;}
.top .left { width:60%; background:#f1f1f1;}
.top .right { width:40%;}
http://jsfiddle.net/3yGLT/8/
If you want the height of the top block to adapt to the height of the floated div, then you cannot absolutely position the floated div. Your only option then is to float it to the right.
But that will place it below the H1 and P that come before it. The only way to avoid that is to take the H1 and P out of the flow of the document. We do that with absolute positioning.
This solution works only if the height of the floated div is always going to greater than the H1 and P. You will also need to fiddle with the left and top positions of the H1 and P to get it just right.
http://jsfiddle.net/3yGLT/15/
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.top {
height:auto;
background:#f1f1f1;
}
.top > h1,
.top > p {
position: absolute;
width: 60%;
left: 10;
}
.top > p {
top: 40px;
}
.floated-div {
width:30%;
float: right;
}
.bottom{
width: 100%;
height:100px;
background:#d1d1d1;
}
Without touching html , you can do as below
.top{
width:100%;
background:#f1f1f1;
float:left;
}
.top > h1{
width:60%;
float:left;
position:relative;
}
.top > p{
width:60%;
float:left;
position:absolute;
margin-top:50px; // margin-top depend on your h1 height
}
.top .floated-div{
width:40%;
float:right;
}
.clear{
clear:both;
}
.bottom{
width: 100%;
height:100px;
background:#d1d1d1;
float:left;
}
My HTML structure is basically this -
<div id="header">
<div class="container">
</div>
</div>
<div id="content">
<div class="container">
</div>
</div>
<div id="footer">
<div class="container">
</div>
</div>
Ignore any elements except <div id="header">
I want to align <div class="container"> inside <div id="header"> at exactly bottom center. I'm using the following CSS code-
#header{ width:1062px; height:326px; background-color:#110000; text-align:center; position:relative; }
#header .container{ width:940px; height:262px; background-color:#220000; margin:0px auto; position:absolute; bottom:0px; }
There are height differences between the parent (#header) and child (#header .container) DIVs. Removing position:absolute; from the child centers it but it sticks to the parent's top instead of bottom. Keeping position:absolute; sticks it at the bottom but aligns it to the left.
How do I align it both center AND bottom at the same time?
I tried all the solution above but it didn't work when you resize the browser window. This solution is mostly to be applied when you don't know the element's width. Or if the width is changed on resize.
After making some research I tried the following and it worked perfectly on all screen sizes.
#somelement {
position: absolute;
left: 50%;
bottom: 0px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
I shared this for anyone still facing this issue.
try in this way:
#header .container{
width: 940px;
height: 262px;
background-color: #220000;
position: absolute;
bottom: 0 ;
left: 50%;
margin-left: -470px;
}
try this
#header .container {
width: 940px;
height: 262px;
background-color: #220000;
margin: 0px auto;
position: absolute;
bottom: 0px;
left: 61px;
}
use this:
#header{
width:1062px; height:262px; background-color:#110000; text-align:center;
position:relative;text-align: center; vertical-align: bottom;padding-top:64px;
}
#header .container{
width:940px;
height:262px;
background-color:#999000;
margin:0px auto;
bottom:0px;
margin-bottom: 0px;
padding-top: 0px;
}
Here the jsfiddle
UPDATE:
As DenisVuyka said in comment, i should add that the above sample was as answer to this particular question with fixed height for DIV.
If you want that height of DIV don't break up things then for example you should use padding-top:10%; in the #header and height:100% in #header .container CSS.
#header{
width:462px; height:262px; background-color:#110000; text-align:center;
position:relative;text-align: center; vertical-align: bottom;padding-top:10%;
}
#header .container{
width:300px;
height:100%;
background-color:#999000;
margin:0px auto;
bottom:0px;
margin-bottom: 0px;
padding-top: 0px;
}
Here is a demo: http://jsfiddle.net/d6ct6/ .
I was trying to get this to work in my project as well. I've edited this jsfiddle:
http://jsfiddle.net/d6ct6/
<div id="header">
<div class="container">
</div>
</div>
#header {
height:100vh;
background-color:#110000;
position:relative;
}
#header .container{
width:300px;
height:40px;
background-color:#999000;
bottom:0px;
position:absolute;
left:calc((100% - 300px)/2);
}
But I've found this only works when the width of .container is fixed.
If the width of .container is not fixed you would need javascript to find it's width and then change that width in the calc.
When the widths are responsive, use this:
HTML
<div id="header">
<div id="container">
</div>
</div>
CSS
#header {
height:100vh;
background-color:#110000;
position:relative;
}
#container{
width:300px;
height:40px;
background-color:#999000;
bottom:0px;
position:absolute;
}
JS
$(document).ready(function () {
var parentWidth = $('#header').width();
var trapWidth = $('#container').width();
var deadCenter = (parentWidth - trapWidth);
var deadHalf = Number( deadCenter / 2 );
$('#container').css("right", deadHalf);
});
In case you care more about having the inside div aligned in the center and can manually set the vertical alignment.
DEMO Height I used was first div height - second div height.
#header .container{ width:940px; height:262px; background-color:red; margin:0 auto; position:relative; top: 64px; }
I would take advantage of CSS table display properties and do the following:
#header {
width:1062px;
height:326px;
background-color:#110000;
text-align:center;
display: table-cell;
vertical-align: bottom;
}
#header .container {
width:900px;
height:262px;
background-color:#cccccc;
color: white;
display: inline-block;
}
Set the #header block to display: table-cell and set vertical-align: bottom to align the child's bottom edge to the bottom edge of the parent.
The child .container element had display: inline-block and this will allow it to respond the text-align: center property of the parent.
This will work regardless of the width of the child .container.
Demo fiddle: http://jsfiddle.net/audetwebdesign/p9CxE/
This same problem was bedevilling me for an hour or so, until I realised I could add an intermediary div; this separated the vertical alignment issue from the centering.
.dparent {
border: 1px solid red;
width: 300px;
height: 300px;
position: absolute;
}
.dchild {
border: 1px solid blue;
margin-left: auto;
margin-right: auto;
width: 200px;
height: 100px;
bottom: 0px;
position: relative;
}
.dmid {
border: 1px solid green;
width: 100%;
position: absolute;
bottom: 0;
<div class="dparent">
<div class="dmid">
<div class="dchild"></div>
</div>
</div>
Do the vertical alignment first, with an absolute position and the 0 bottom. Then do the centering with margin-left and margin-right set to auto.
You might try this solution for any concerned width:
width:100%;
position:absolute;
bottom: 5px;
left:50%;
margin-left:-50%;
Good luck!
How do I center align the image to vertically and horizontally to the div.
I need to get this without fixing height or padding because the image sizes are not constant so it should be flexible with all the images.
Here is my trail
http://jsfiddle.net/yHdAx/2/
To center align an image, you have to set it's display to block, and then the left and right margins to auto. I also did this with the top and bottom margins, in the new code example. Here is the code required to make this work:
CSS
.test {
background-color:#999;
height:60%;
display:block;
vertical-align:middle;
padding-top: 25%;
padding-botton: 25%;
}
.test img {
max-width:50%;
vertical-align: ;
display: block;
margin: auto auto auto auto;
}
HTML
<div style="height:800px; background-color:#CCC">
<div class="test">
<img src="http://static.clickbd.com/global/classified/item_img/607724_0_original.jpg" />
</div>
</div>
Hey now you can used to table-cell properties in your div as like this
live demo http://jsfiddle.net/yHdAx/3/
HTML
<div style="height:800px; background-color:#CCC">
<div class="test">
<img src="http://static.clickbd.com/global/classified/item_img/607724_0_original.jpg" />
</div>
Css
.test{
background-color:red;
height:600px; display:table-cell; vertical-align:middle;
text-align:center;
}
.test img{
max-width:50%;
}
more info http://www.brunildo.org/test/img_center.html
Apply display:block to the image and set its margins to auto.
.test {
background-color:#999;
padding: 50px 0;
}
.test img {
display: block;
margin: auto;
}
Here is the fiddle, http://jsfiddle.net/yHdAx/5/
I tried to play with only one div
div {
display:table-cell;
background:red;
width:500px;
height:500px;
vertical-align:middle;
text-align:center;
}
I hope this will also help you :- http://jsbin.com/ihunuq/3/edit
What if you don't set a height on the containing div, would the desig break then?
To center the image just use
.test img {
display:block;
width:25%;
margin:0 auto;
}
You can use position: absolute.
Something like that: jsfiddle.
.test{
background-color:#999;
height:60%;
width: 100%;
position: relative;
}
.test img{
max-width:50%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
I'm trying to design a 2 column layout using divs. My left column size is fixed to 150 px. But right column is not fixed size, so I want it to extend to right boundary of the browser. I used width:auto and width:100% values in right column but they didn't work.
CSS :
html {
height:100%; width:100%
}
body {
color: #000040;
text-align: left;
padding:0;
margin:0;
height:100%;
width:100%
}
#header {
position:relative;
float:left;
background-color: #000053;
width: 100%;
height: 76px
}
#wrapper {
position:relative;
overflow:hidden;
width:100%;
height: 100%;
margin:0px auto;
padding:0;
background-color:Aqua
}
#container {
clear:left;
float:left;
overflow:hidden;
width:100%;
height:100%
}
#left_column {
position: relative;
float: left;
background-color:Fuchsia;
width: 150px;
overflow:hidden;
height:100%
}
#right_column {
position: relative;
float:left;
overflow:hidden;
background-color:Blue;
height: 100%;
width:auto }
HTML
<html>
<body>
<div id="wrapper">
<div id="header">
HEADER
</div>
<div id="container">
<div id="left_column">
LEFT COLUMN
</div>
<div id="right_column">
RIGHT COLUMN
</div>
</div>
</div>
</body>
</html>
I would remove all position statements and only put a float:left on the left column, not the right nor the container. Give the right column a margin-left:150px and it should work fine.
Except for the left-floated column, you can also remove the width:100% statements from the rest; when they're not floated, they'll be 100% wide automatically.
The overflow:hidden is only needed on the wrapper; at least if you are using it to have the div grow in height to accommodate the floats inside it.
change for the div right_column the position from relative to fixed, and width from auto to 100%. Also add left:150px;
With these changes you css for right_column will look like the following:
#right_column {
position: fixed;
left:150px;
float:left;
overflow:hidden;
background-color:Blue;
height: 100%;
width:100%; }
you can check it here http://jsbin.com/ejetu3
I have 3 divs, all contained within a parent They are in parent-div.
Here's my HTML:
<div id="header">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
And my CSS:
#left
{
float: left;
width: 334px;
background-image: ...;
}
#middle
{
float: left;
width: ???;
background-image: ...;
}
#right
{
float: left;
width: 280px;
background-image: ...;
}
I want the #left and #right divs to have static sizes and non-repeating backgrounds. However, the #middle div should resize depending on the page size. How can I write my CSS so that the #middle div changes its with dynamically, apart from the width of the other two divs?
I think:
#left
{
float: left;
width: 334px;
background-image: ...;
}
#middle
{
margin-left: 334px;
margin-right: 280px;
background-image: ...;
}
#right
{
float: right;
width: 280px;
background-image: ...;
}
and then you will need to change the order of the DIVs slightly:
<div id="header">
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
</div>
But middle should resize due to window/page size!
Unfortunately, there is no way to express the calculation you want (width: 100%-614px) in CSS. So you have to let the width default to ‘auto’, which means ‘100% minus any margins, paddings and border’, and then use margins or padding on the middle element of the same size as the left and right elements.
Mark B suggests one approach to this using floats; you can also do it by relative-positioning the parent and absolutely positioning the left and right child elements, which has the advantage of not requiring a re-ordering of the elements.
You should be further able to absolute-position the middle element by its left and right properties as suggested by John, but this ‘edge-positioning’ technique doesn't work in IE6, so instead the middle element has to have margins in the same was as the float example.
If you are just trying to put a border image on the left and right of your element you can do that more easily using nested background images:
<div id="header"><div class="left"><div class="right">
content...
</div></div></div>
<style type="text/css">
#header { background: url(/img/header-background.gif); }
#header .left { background: url(/img/header-left.gif) top left repeat-y; }
#header .right { background: url(/img/header-right.gif) top right repeat-y; }
#header .right { padding: 0 280px 0 334px; }
</style>
something like this seems to work
#left
{
position:absolute;
top:0;
left:0;
width: 334px;
border:solid 1px red;
}
#middle
{
position:absolute;
top:0;
left:339px;
right:285px;
border:solid 1px green;
}
#right
{
position:absolute;
top:0;
right:0;
width: 280px;
border:solid 1px blue;
}
also, if you made the parent div have position:relative; these three divs would be positioned absolutely within that parent.