Very simple concept:
div-1 has a width of 90% and a height of 1000px,
div-2 has a width of 20% (of div-1) with no height.
Can I centre div-2 both horizontally and vertically within div-1 using CSS?
Sure it is. Use position:relative; on the outer container, position:absolute on the inner, and a few more styles (listed below)
.outer {
width:90%;
height:1000px;
position:relative;
}
.inner {
height:2px; /* To make it visible */
width:20%;
position:absolute;
left:40%;
top:50%;
transform:translateY(-50%); /* Optional; positions it perfectly in center.
Alternatives include using negative margins
or javascript to compensate.Needs some prefixes*/
}
Demo
I'm not sure why you'd want an element to have a height of 0...
Related
I had faced problem in right content center of page.
my HTML page is 2 column page left column is Fixed (height 100% and width 350px ) and right side content width is 575px so i want to right side content center in all screen for example screen width is 1600px so its take right side content center in 1250px (1600px-350px.
Thank you advanced
http://jsfiddle.net/md3Dp/5/
http://caniuse.com/#feat=calc
calc() is a native CSS way to do math. We can now set a dynamic width to the content column.
Desktop support for calc() is fairly ok. Added a fall back when calc() is not supported. Based on the max-width of 1600px of the parent added % width fall back.
html,body {
margin:0;
padding:0;
height:100%;
}
.left {
width:21.875%;/* fall back */
width:-moz-calc(350px);
width:-webkit-calc(350px);
width:calc(350px);
float:left;
background:red;
}
.main {
width:100%;
max-width:1600px;
margin:auto;
min-height:100%;
position:relative;
overflow:hidden;
}
.content {
width:78.125%;/* fall back */
width:-moz-calc(100% - 350px);
width:-webkit-calc(100% - 350px);
width:calc(100% - 350px);
float:left;
background:green;
}
You can use a relative parent.
Have a container for right content, absolutely position it and apply left equal to the fixed width of the left div, and apply right:0 to extend it to the remaining width.
Then simply make use of the old (hence having more browser support) margin:0 auto to position the content in center of right container div...
<div id='wrap'>
<div id='left'>one</div>
<div id='right'>
<div id='content'></div>
</div>
</div>
css
html, body {
height:100%;
}
#wrap {
position:relative;
height:100%;
}
#left {
display:inline-block;
width:150px; // in your case 350
height:100%;
border:1px solid;
}
#right {
position:absolute;
top:0;
left:150px; // width of left content
right:0px;
height:100%;
}
#content {
width:575px;
height:100%;
margin:0 auto;
border:1px solid;
}
JSFiddle
use jquery to calculate the width on the basis of screen resolution and then apply the width dynamically if you put the code here i can tell you the jquery code to how to apply the dynamically.
calculate the width on the basis of resolution you can get from this function in javascript:
window.innerWidth
Remove the float: left property from right_content div and add the text-align: center on the parent div i.e right one div.
First I'll list my code and the link to JSFiddle.
HTML
<div id="wrapper">
<div id="container">
<div id="content">
Here is the content
</div>
</div>
</div>
JS
body,html{height:100%;}
#wrapper{
height:100%;
background-color:green;
}
#container {
display: inline-block ;
height:100%;
width:100%;
background-color:red;
text-align:center;
vertical-align:middle;
}
#content
{
display:inline-block;
background-color:blue;
}
http://jsfiddle.net/x11joex11/b4ZBg/
(Newer one with more content for vertical center testing)
http://jsfiddle.net/x11joex11/sDWxN/11/
What I'm trying to do is vertically center the blue highlighted DIV in the center of the red div. Is there a way to do this using inline-block and not table-cells?
The height of the containing div also HAS to be 100% not a set pixel amount.
The content will also be variable height
I am trying to avoid table-cell display because of browser bugs, but if it's the only option I would like to know that also. Any solution to this issue would be appreciative.
The art of vertical centring with inline-block is to understand that the inline-level elements are centred in their line-box. So you need to make the line-height match the height of the containing box.
The line-height is determined by a combination of the line-height setting of the containing block and the content of the line.
However the line-height of the containing box cannot be set in terms of a percentage of the height of the containing box, so that provides no solution.
Instead, we can create some content on the same line as the content we want to align that's the height of the containing block using
#container:before {
display:inline-block;
content: '';
height:100%;
vertical-align:middle;
}
which will force the line height be tall enough to contain that content.
The other thing necessary is to note that vertical-align is applied to the boxes being aligned, rather than the containing box.
The result is http://jsfiddle.net/9j95x/
You can use:
top: 50%;
position: relative;
on #content, like so:
#content
{
display:inline-block;
background-color:blue;
position: relative;
top: 50%;
}
Fork: http://jsfiddle.net/brandonscript/sDWxN/9/
Here's my quick response: http://jsfiddle.net/H9nHh/
Basically use:
display:table; for #container
and display:table-cell; for #content. I then created another div with a class for x to style it to your needs.
Not sure what I am getting wrong here, but let's say I have two divs, and an h1 element (or P1) for that matter that looks like this:
<div class="wrapper">
<div class="top">
<h1>Content header</h1>
</div>
</div>
I want my element to appear in the 'center middle' of the inner div, that is it's immediate parent. To achieve this, I give it a margin-top:50% & a margin-left:50% with the understanding that this would render it exactly towards the center middle of the div. But while it does get it to the middle, it doesn't quite get it to the center. Infact it seems to position itself relative to the outer div, the one with class wrapper.
I have recreated this using jsfiddle here:
http://jsfiddle.net/KLRsN/
Am I specifying the selectors wrong or is my positioning in itself incorrect?
-the above ans isnt completely correct as the text will still not be completely centered vertically.
.wrapper{
margin:5px;
max-height:250px;
min-height:250px;/*not required only height:250px will do*/
border:1px solid green;
}
.content
{
margin:5px;
border:1px solid black;
height:100px;/*you have to give the parent element a height and a width within which you wish to center*/
width:100px;
position:relative;/*giving it a position relative so that anything inside it will be positioned absolutely relative to this container*/
text-align:center;/*aligning the h1 to the center*/
}
.content h1{
border:1px solid black;
position:absolute;
top:50%;
left:50%;
line-height:50px;
width:50px;
margin-left:-25px;/*half the width of the h1 so that it exactly centers*/
margin-top:-25px;/*half the height of the h1 so that it exactly centers*/
}
explanation:
-ever element in html is in the form of a rectangular box so applying margin-top:50% is aligning the top of that box to 50% of the parent element and not the text inside the box.
-that is the reason the text is not exactly aligned to the center.
-also it is essential to provide the parent element(within which you wish to center the h1) a width and height.
The correct way to do what you are looking for would be by using absolute and relative positioning.
-give the .container a position value of relative and the h1 a value of absolute
-by giving the h1 a width and height we then apply a negative left margin equal to half the width and a negative top margin equal to half the height so that the text is exactly centered.
also for more on positioning - check out the following link
If you want to display text content at a middle you can use text-align:center , or you can apply width to your h1 tag and use margin:auto. To position it vertically middle use relative position and top:50% . Try this css
.wrapper{
height:250px;
min-height:250px;
border:1px solid green;
}
.content{
position:relative;
top:50%;
border:1px solid black;
}
.content h1{
border:1px solid blue;
margin:auto;
width:100px;
background:red
}
Hope it helps
So I tried to experiment with CSS pseudo class before and after. I tried to use those pseudo to create header element.This is to reduce using div to hold left and right images. This is code for HTML
<header id="mastHead">
<h1>Branding</h1>
</header>
So I have 3 images to create traditional header element which is 20px width for left and right side with 100px height and for the middle, 1px width and 100px height which will repeat horizontal. And here my CSS
#mastHead {
background:url(images/headMiddle.jpg) repeat-x top left;
width:1000px;
height:100px;
overflow:hidden;
}
#mastHead:before {
content:"";
display:block;
background:url(images/headLeft.jpg) no-repeat top left;
width:20px;
height:100px;
float:left;
}
#mastHead:after {
content:"";
display:block;
background:url(images/headRight.jpg) no-repeat top left;
width:20px;
height:100px;
float:right;
}
#mastHead h1 a {
display:block;
width:200px;
height:41px;
background:url(images/logo.png) no-repeat;
}
So the problem is if I remove h1 element, it will align perfectly but if I put these element, it will push the ::after pseudo-class down and it will take leftover space according to it height.How can I make this h1 element to take just middle space without affecting the ::after space?
I made a fiddle with your example: http://jsfiddle.net/3Dcw3/ (only set width to 500 to fit in a fiddle and set background to visualize them)
And here is a fixed version: http://jsfiddle.net/3Dcw3/1/
The points are:
Add position:relative; to the header.
Use absolute positioning instead of floating.
Add paddings so the blocks would position over them.
I'm trying to make this layout happen without javascript.
I have a parent div and a child div that contains content which keeps being appended. I want the child to be bottom aligned inside the parent and grow vertically. I also want the parent div to scroll when the height of the child > height of parent.
The first part is pretty easy with:
#child { position:absolute; bottom: 0 }
The second part is difficult because absolutely positioned elements are outside of the content-flow and won't trigger scrolling.
The parent div spans the entire height of the browser window (which I don't know at design-time)
Edited to show that it is possible
Turns out it IS possible to provide the dynamic layout described without using javascript. There is a way (using just CSS) to have a div bottom aligned that causes scrolling when it overflows it's parent.
The trick is to make the scrolling happen on the child, setting it's max-height to 100% (i.e. the parents height) and then bottom aligning the child with position:absolute;. You only need to make sure the parent has position:relative or absolute.
Here is the simple CSS to make it work:
#parent{
position:absolute;
/* these parts are obviously not necessary */
width:500px;
top:10px;
bottom:10px;
}
#child{
position:absolute;
bottom:0px;
right:0px;
left:0px;
overflow-y:auto;
/* this is the key */
max-height:100%;
}
This is reflected in the following jsfiddle: http://jsfiddle.net/epgdn/5/ simply resize the run-window until the child is bigger than the parent and the parent will scroll appropriately.
You won't be able to do this with CSS alone. If you position the child at top:0, you'd be fine since the page is being processed from top down (so do the scroll bars).
body { font-size:1.2em; height:50%; color:#735005; }
div { margin:0; padding:0; }
#parent {
border:1px solid red;
height:100%; max-height:400px;
overflow:auto;
position:relative;
width:300px;
}
#child, #child2 { /* #child2 is STRICTLY here to illustrate the desired effect */
border:1px solid blue;
position:absolute;
bottom:0;
}
#child2 { visibility:hidden; top:0; }
<div id="parent">
<div id="child">scroll scroll scroll ... scroll scroll scroll scroll</div>
<div id="child2">scroll scroll scroll ... scroll scroll scroll scroll</div>
</div>
Obviously, you don't want to hard code duplicate code for a UI effect. Server-/client-side scripting would be needed.