I got this code online and it satisfies my need of having a min-height div. But I also want the content to be vertically center aligned. Can someone please help? I have gone through many options given in these forums but they do not work in combination with this particuar css. And this particular css I must use to get a min-height div.
<html><style type="text/css">
.prop {
float:right;
width:1px;
}
#footer {
clear:both;
border-top:2px solid #000000;
text-align:left;
font-size:80%;
}
.min200px {
height:200px;
}
</style>
</html>
<body>
<div>
<div class="prop min200px"></div>
I want this content to be vertically center aligned
<div id="footer">
Copyight 2012 - xyz
</div>
</div>
</body>
You are not wrapping the text in any element. It would be tough to do then.
Keep the text in a child element and give display:inline-block; vertical-align:middle; to it and also line-height to the parent element with a value equal to the element's height. And later as the line-height value inherits to child elements, give line-height to the child element as well to make it look nice.
Changed HTML:
<div>
<div class="prop min200px">
<div>I want this content to be vertically center aligned</div>
</div>
<div id="footer">Copyight 2012 - xyz</div>
</div>
Changed CSS:
.prop{
line-height:200px;
}
.prop>div{
line-height:20px; /* or 1em */
display:inline-block;
vertical-align:middle;
}
Working fiddle
FYI, you mentioned that you are using min-height property. but you haven't used it anywhere in the code. (you just declared a class name of that property name).
<div>
I
want
this
content
to
be
vertically
center
aligned
Copyight 2012 - xyz
I got it solved. Thank you all. But I needed a minimum height no matter what the content was and so I used above css code. But in addition to that I wanted my content to be centered. So I use the below code. The extra css is for my other needs:
#font-face { font-family: MyCustomFont; src: url("file:///fonts/Roboto-Regular.ttf") }body,html,table { font-family: MyCustomFont; font-size:14.0pt;} body,html {text-align: center;vertical-align:middle;line-height: normal; margin: 0;padding: 0;width: 100%;height: 100%;}html {display: table;vertical-align: middle;text-align: center;}body {vertical-align: middle;text-align: center;}.minHeight { float:right; width:1px; height:94px; }
<div class="minHeight"></div><table height=94px align=center><tr>
<td align=center>My centered text </td></tr></table>
I would use javascript/jQuery for this. This is just to point you out in the right direction
<div id="center">
<div class="prop min200px"></div>
I want this content to be vertically center aligned
<div id="footer">
Copyight 2012 - xyz
</div>
</div>
<script type="text/javascript">
var wh= window.height,
h= $('#center').height(),
x = (wh-h)/2;
$('#center').css({"marginTop":"x"})
</script>
what this does: it checks your window heigh and your div height. it subtracts from each other. After that this value is divided by 2 (for equal space between top and bottom)
The margin-top is changed by this so you would have the equal space. This doesnt make the div Center fixed position (if you scroll it still changes) so if you want to change that you need to make some CSS adjustments to make it fixed.
Related
I was wondering if someone could explain to me why this is happening. Sorry I am new to CSS/HTML. I am working on creating and HTML layout for a basic page, currently I have three Divs. I want one container on the left (id= leftside) with 50% width and another on the right (id=rightside) with 50% width and the third container (id=narrow) below both of them at 100% width.
So currently my third div gets hidden underneath the first two unless I add the property 'top: 50%;' to that div. Can someone please explain why this is happening? I thought that since the space is already taken by my other two divs that I would not have to use the 'top' property in order for the third div to display. Why is it being hidden by the other divs?
Here is my HTML code:
<body>
<div id="leftside"></div>
<div id="rightside"> </div>
<div id="narrow"></div>
</body>
Here is my CSS code:
#leftside{
width: 50%;
height: 50%;
background-color: blue;
float:left;
}
#rightside{
width: 50%;
height: 50%;
background-color: red;
float:right;
}
#narrow{
width:100%;
height:20%;
background-color:black;
}
Whenever you do use the float for the element then don't forget to clear them.
For easier I always use overflow:hidden; to the parent div:
<div class="parent">
<div id="leftside"></div>
<div id="rightside"> </div>
<div id="narrow"></div>
</div>
.parent{overflow:hidden;}
So now, you know the key reason of hiding?
Because the first two divs have set floats so they are taken out from the "normal" flow, while the last remains the same and isn't affected by the previous two.
To be affected you can either set float also to the last element, or clear the float.
#narrow {
width:100%;
height:20%;
background-color:black;
clear: both;
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/float#Clearing_floats for more info.
I always create a spacer div and use it whenever I need to clear any previous floats or coding. This is specially useful when I have a ton of divs within a parent div.
.spacer {
clear:both;
border:none;
width:100%;
}
*other divs above*
<div class="spacer"> </div>
*other divs below*
I have a wrapper div element that contains a div that in turns contains divs inside; these divs are added or removed at runtime. The HTML and CSS look like this:
<div id="Wrapper">
<div class="InnerGreen">
<div class="InnerContent"></div>
<div class="InnerContent"></div>
</div>
</div>
#Wrapper{
width:600px;
height:50px;
margin:10px 20px;
background:blue;}
.InnerGreen{
background:green;
margin:10px auto; // this doesn't center
overflow:hidden;
display:inline-block;}
.InnerContent{
background:yellow;
height:30px;
width:40px;
float:left;
margin:3px 5px;}
I'm using inline-block to wrap the .InnerGreen inside the Wrapper; however, the margin:auto don't seem to horizontally center the div. Of course, this works if I define the width of .InnerGreen but in reality, the .InnerContent divs are a collection of divs of all different sizes so I can't set the width of .InnerGreen at runtime.
How can I make the margin:auto work? Here the the jsfiddle.
Thanks for your suggestions.
Inline elements have no margins. By telling .InnerGreen to act as inline-block, you're essentially telling it to act as inline with regards to positioning. On the other hand, you can still center it using text-align:
#Wrapper {
text-align: center;
}
See updated JSFiddle.
This may not technically be the right way of doing it, but you could put text-align:center on your wrapper div.
As far as i know, without being able to determine the width of the element, you cant use the margin:auto method. It isn't exactly elegant, but you can accomplish this with a centered table:
<center>
<table>
<tr><td align="center">
<div>This will be centered.</div>
</td></tr>
</table>
</center>
with your code:
http://jsfiddle.net/MaxPRafferty/yA7Nm/
You could just center the div using jquery, something along the lines of...
<script type="text/javascript">
$(function() {
var containerWidth = $(".InnerGreen").width();
$(".InnerGreen).css("width", containerWidth);
});
</script>
Your CSS setting for the margin should then do the rest.
You may also want to add height: auto to your style, as if you are adding internal content at runtime, it will better control the growth of the element.
I want to make a simple two column layout, where the right column is out of the container but still makes the container height expand.By using position:absolute it goes were it should but dosent expand.
This is the html code
// Note: I dont add the head tag to save space in here :)
<html>
<body>
<div id="container">
<div id="left">
</div>
<div id="right">
</div>
</div>
</body>
</html>
And the css code
#container {
width:900px;
margin:0 auto;
}
#left {
width:700px;
float:left;}
#right{
width:230px;
margin-left:760px;
position:absolute;
}
I cant use float:right, because it will floated to the right of the container. Maybe the structure has to be different I dont know.
Try setting a position: relative on #right, and giving it a margin-left greater than the width of the container: http://jsfiddle.net/8MEqL/
This is what I am trying to do :
HTML
<div class="container">
<div id="one" class="child">One</div>
<div id="two" class="child">Two</div>
<div id="three" class="child">Three</div>
<div id="four" class="child">Four</div>
</div>
CSS
<style type="text/css">
.container{
height:40px;
width:500px;
}
.class{
float:left;
/*...*/
}
</style>
The child divs should fill the container div how big or small it has its width. They can get big according to the container automatically.
|<---One----><---Two---><-Three-><--Four-->|
How can I do it with css?
Thanks in advance.
I've set up a test site to make sure this works:
First, you'll need to keep float to "left" to keep everything on the same row. Next, set width to "25%", to space out the elements. Finally, set text-align to "center" to center the elements, as in your diagram. Remember, if you change the number of elements, you'll need to modify the "25%" to a value that evenly spaces out the elements. (Use 100 / numElements).
.child {
float: left;
width: 25%;
text-align: center;
}
Does anyone know a way to do this without using width percentages, so that it will auto-spread the elements if they are removed or added?
You can set the .child width to 25%, like this:
.child { width 25%; }
You can test it out/play with it here.
Total width is 500 so each child div should be 125px wide. You got the right idea using the float:left;
The solutions that have been given to you are correct. Just be careful if you have margins/borders/paddings in the inner divs, because in that case the 25% would break the layout (margin, borders and paddings are not included in the percentage).
This is what I'm trying to do:
Example http://img689.imageshack.us/img689/5761/cssautowidth.th.jpg
(Larger image.)
When the <nav> element is present in the design, I want it to look like the example below. Is it possible to do this while the #content div has got a percentage value set? I'm just curious to see whether this is possible without using two different styles for the #content (both with different width values.)
Just floating doesn't seem to do it.
The reason I want the #content to have a percentage value in the first example is because I have a background image in #body that creates the illusion of an outer glow.
Edit: I just removed the need for using the width percentage by using margins instead.
Check the example here: http://css.maxdesign.com.au/floatutorial/tutorial0816.htm
What you should do is to set float:right and width on your <nav> element, and leave #content without any float or width, just set margin. This way content will try to occupy all given space and wont 'fall' into navigation.
Then, if you hide <nav> element, content will automatically resize (but also you will need to remove padding from the right).
This is example code:
<style type="text/css">
#container { width:700px; margin:0 auto; border:1px solid #000; }
#nav { display:none; }
.double #nav { width:10%; float:right; display:block; }
#content { margin-right:10%; border-right:1px solid #000; }
</style>
<div id="container" class="double">
<div id="nav">nav content</div>
<div id="content">page content</div>
</div>
Now, if you removed class="double" from container element you will see content is correctly resized to take 90% of given space. If you want to take 100% - just add .double before #content in style.