i am trying to vertically align a div inside another div at the bottom and i do not want to use relative/absolute positioning. below is my markup. it seems to work. but i am not sure whether this is the best solution. can anyone recommend a better way? also, in FF if i remove the border around the container, it stops working. does anyone know why?
thanks
konstantin
<html>
<head>
<style type="text/css">
.container
{
background-color: #ffff00;
height: 100px;
line-height: 100px;
border: solid 1px #666666;
}
.container .content
{
margin-top: 60px;
background-color: #ffbbbb;
height: 40px;
line-height: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">test</div>
</div>
</body>
</html>
Do use absolute positioning. I think it is probable that the reason you do not want to use absolute positioning is based on a misconception. Namely, if the container has the position attribute as well, absolute positioning will not be in regard to the whole page, but in regard to the container, and then you will get what you want with:
.container
{
position: relative;
}
.container .content
{
position: absolute;
bottom: 0px;
}
Now, no matter the sizes, your content will be will be at the bottom of the container.
That will work... only thing is you won't be able to put anything in the empty top 60 pixels.
I believe that if you're looking for the best solution, you should indeed use relative/absolute positioning.
Is there any specific reason that you're trying to avoid relative/absolute positioning?
Related
So I'm found an article on responsive design (here) and I tried to make something like what it had on part of the tutorial. The site said to divid the size of the element by the size of the container that the element(s) are in. (the reason I divided by 1000 and not 1050 is because the margins on the div#main make it 1000px even though the header is 1050px) If that doesn't make sense than the link can explain it. It looks fine with my browser at full size, but if I shrink the window to much then it doesn't resize the way it should. I'm not exactly sure what part of my code is wrong but if someone could help me that would be great! Here's a link to the page I made. And here is my source code:
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
margin: 0;
height: 100%;
width: 100%;
}
header {
height: 100px;
max-width: 1050px;
margin: 0 auto;
}
#main {
border-radius: 25px;
background-color: #aaa;
height: inherit;
max-width: inherit;
margin: 25px;
}
.box {
width: 47.5%;
height: 75%;
margin: 1.25%;
background-color: #444;
border-radius: 15px;
float: left;
}
</style>
</head>
<body>
<header>
<div id="main">
<span class="box">
</span>
<span class="box">
</span>
</div>
</header>
</body>
</html>
Maybe if I explain what's happening you'll see that there actually is no problem.
The inner boxes have a fixed height based on 75% of the parent container's height. Therefore, the heights of all elements stay the same. However, your margins are fractions of the parent element's width, therefore they change with the page width. As the page gets smaller, the margin gets smaller. Since a div naturally lies as high on the page as it can, it moves toward the border of its parent.
All this is expected with your design. To fix it, set fixed top and bottom margins:
.box {margin: 12px 1.25%;}
How do I create a div that has a fixed height and stays on the bottom of the page, and another one above it occupying the remaining vertical space?
Something like this should achieve what you're looking for.
Try like this
See Demo
Use height: inherit for your first div which takes the remaining height available
html
<div id='container'>
<div id='first'>
First Div content
</div>
<div id='second'>
Second div content
</div>
</div>
Css
#container{
width: 600px;
height: 450px;
border: 1px solid black;
}
#second{
position: relative;
bottom: 100px;
height: 100px;
background-color: green;
}
#first{
height: inherit;
background-color: red;
}
I don't think any of the other examples really work nicely when the page is resized.
This type of thing is best accomplished with a few lines of javascript, as its not something that CSS does a great job of generally speaking.
See here for a working demo. mod.it requires that you view the demo in chrome but the code in the demo is cross browser and will work anywhere.
https://mod.it/6hQaRsEL
I don't want to center a div, I want the contents of a div to be centered. I would like horizontal and vertical alignment.
Sorry, if this is too easy or whatever, but this is kind of a hassle to get it right.
Grae
I am using IE7
If you know the height and width of your image, position it absolutely, set top/left to 50% and margin-top/left to negative half the height/width of your image.
#foo {
position:relative; /* Ensure that this is a positioned parent */
}
#foo img {
width:240px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin-left:-120px;
margin-top:-100px;
}
Live example: http://jsfiddle.net/Zd2pz/
I know you've said that dont want to center a div but to achieve your requirement in a cross browser way would be easier using a jquery plugin and a fake div that contains your element to be centered.
I have successfully centered almost anything using this very small plugin that can center any block element.
The only other way I know are the answer that you already received from #simshaun & #Prhogz
EDIT: As per comment request
Include the script in your head tag
<script type="text/javascript" src="<%: Url.Content( "~/_assets/js/jquery.center.min.js" )%>"></script>
Now if you have a DIV that you want to center inside your markup simply use it as
$(document).ready(function() {
$("#myDIV").center({ vertical: false });
});
although the following is obsolete, it still works for almost all browsers
<center>
<div>
your html
</div>
</center>
however, visit this link
http://www.110mb.com/forum/vertical-horizontal-alignment-of-image-within-div-t31709.0.html
For horizontal alignment, use text-align:center;
For vertical alignment, see for example the W3 style guide
If you know the inner element's height beforehand,
CSS:
.container {
text-align: center; /* Center horizontally. */
/* For demo only */
border: 1px solid #000;
height: 500px;
margin: 20px;
width: 700px;
}
.container img {
margin-top: -167px;
position: relative;
top: 50%;
}
HTML:<div class="container">
<img src="http://farm6.static.flickr.com/5004/5270561847_7223069d5e.jpg" width="500" height="334" alt="">
</div>
Example
Yo. There's a tendency in placing divs to follow each other vertically, but what i'm trying to accomplish right now is to is basically to place a number of divs (two) inside a parent div like so:
<div id='parent'><div id='onediv'></div> <div id='anotherone'></div> </div>
And i'd like to place 'anotherone' just to the right of 'onediv'. Sadly, float:right is pretty much ruining the layout with the divs popping out of their parent divs and whatnot. Any suggestions are welcome.
Edit: It might be worth noting that the parent div and 'anotherone' has no height elements at all, with 'onediv' planned to be thought as the "height support" div, allowing the contents of 'anotherone' to make the parent div larger at will.
Edit again: Here's the CSS for the specified stuff:
.parent
{
width: 90%;
margin: 0 auto;
border:solid black 1px;
}
.firstchild
{
width: 20%;
margin: 5px;
border: solid black 1px;
height: 180px;
}
.secondchild
{
width: 60%;
border:solid black 1px;
margin: 5px;
}
You can float both inner divs and give the outer div an overflow so that it grows with the inner divs.
Example:
#parent {
overflow: hidden;
}
#parent div {
width: 50%;
float: left;
}
Try this:
<div id="parent">
<div id="onediv" style="float:left;"></div>
<div id="anotherone" style="float:left;"></div>
<div style="clear:both;"></div>
</div>
I think this is what you want (note the re-ordering of DOM elements):
<div id="parent">
<div id="anotherone"></div>
<div id="onediv"></div>
</div>
/*CSS*/
#anotherone{
float:right;
width:50%;
}
#onediv{
float:left;
width:50%;
}
Note, if this is what you want, IE6 will still mess it up. ;-)
You certainly need to specify a width as indicated in #Kevin's answer to get the layout you described, simply specifying float left/right will not have the desired effect. Try specifying the width in pixels rather than a percentage. Failing that or if that's not appropriate for you, I think you possibly need to specify the width of the outer div (through css if you like).
#onediv { float: left; width: 50%; } #anotherone { float: right; width: 50%; }
Just use the <span> tag. Its the equivalent of except it doesn't start a new row.
I have some HTML+CSS code that wants to layout several divs. The layout is like this: all divs stay in a parent div whose size is fixed. Then each child div should stay on its own line, and use the minimum height for drawing its content. The last div should consume all remaining height, so that the parent div is entirely filled.
This code shows my approach using CSS float and clear properties:
<html>
<head>
<style>
.container {
width: 500px;
height: 500px;
border: 3px solid black;
}
.top {
background-color: yellow;
float: left;
clear: left;
width: 100%;
}
.bottom {
background-color: blue;
height: 100%;
float: left;
clear: left;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="top">top1</div>
<div class="top">top2</div>
<div class="top">top3</div>
<div class="top">top4</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
However, the last div overflows from the its parent. I guess it is because of the width: 100%.
Is there any way to solve this problem? I want to avoid setting the overflow attribute of the parent, and also I have to avoid using absolute positioning. If somehow I could trick the last div to use the height of the parent minus the sum of height of the other divs.
Add:
div.container { overflow: hidden; }
It's not overflowing because it's 100% width. It's overflowing because it's a float and thus removed from the normal layout. Changing the overflow property will change how the browser caters for contained floats.
Oh and if you aren't already, make sure you're using a DOCTYPE. It particularly matters for IE.