My outer div is position:relative and inner div is positioned absolute.
I want to set my inner div center align vertically and thinking to use top:auto and bottom:auto but it is not working. Please advice me how it can be done.
div.Container div.Right
{
width:50%;
float:right ;
border: 01px dashed green;
height:95px !important;
position:relative !important;
}
div.header-search
{
overflow:auto;
display:inline;
border:0px dashed blue;
position:absolute;
top:auto;
bottom:auto;
right:0px;
}
<div class="Right">
<div class="header-search">
<input type="text" class="searchbox" />
<input type="button" class="searchbutton" value="›" />
</div>
</div>
You can use line-height:95px; in the outer div and vertical-align: middle; in the inner div like this:
div.Right
{
width:50%;
float:right ;
border: 01px dashed green;
line-height:95px !important;
display: block;
}
div.header-search
{
overflow:auto;
border:0px dashed blue;
vertical-align: middle;
}
You can play with it here: http://jsfiddle.net/leniel/5Mm67/
If you want to horizontal align the content of the inner div, just add this in div.Right:
text-align: center;
Here's the result: http://jsfiddle.net/leniel/5Mm67/1/
the best way to achieve what you are after would be to remove the bottom:auto; style and replace the top:auto; with top:50%; . After that work out the height of the search bar that you are trying to center (say its 20px) and add a negative margin styles for half of its height, so if it was 20px the style would be margin-top:-10px;
your css would look like this:
div.header-search
{
overflow:auto;
display:inline;
border:0px dashed blue;
position:absolute;
top:50%;
height:20px;
margin-top:-10px;
right:0;
}
set .header-search to top:50% or bottom:50% then use margin-top:-(half of div height) or margin-bottom:-(half of div height); respectively. I also sometimes just simply use top:50% or bottom: 50% without the negative margins.
For example:
div.header-search
{
overflow:auto;
display:inline;
border:0px dashed blue;
position:absolute;
top:50%;
height: 500px;
margin-top:-250px;
right:0px;
}
So yeah, in this case you would have to set a fixed height.
Set in the div with position absolute: "top:50%;"
It will display the div a litle bit to low (top od the absolute div should be exacly on the 50% of parent height - relative div) but there are ways to go around this.
For example:
Do even one more div with position relative and move it higher with half of absolute div height (this doesnt look very nice in code) - You must know the divs height, if you dont you can measure the size in sth like jQuery and move div a litle higher.
Easiest way: Maybe try 45% instead of 50% (if its not pixel to pixel design).
Propably somebody has better solutions, if so I would like to see them to :)
This should work:
div.header-search
{
overflow:auto;
display:inline;
border:0px dashed blue;
position:absolute;
top:50%;
right:0px;
}
Hie, there are several methods to vertical centering of div its done through the magic of CSS.... Here is the examples and it works fine i have tested... and it works fine.
HTML:
<div id="parent">
<div id="child">Content here</div>
</div>
CSS:
#parent {position: relative;}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}
Here is other methods click here to see complete reference
Hope, it will helps you. Cheers. !!
Try setting the inner div to margin: auto 0;
Related
I have a container with position:relative and three children
with position:absolute.
HTML
<div class="container">
<div>left</div>
<div>middle</div>
<div>right</div>
</div>
CSS
div{
border:1px solid;
}
.container{
height:200px;
position:relative;
}
.container > div{
height:190px;
position:absolute;
}
.container > :nth-child(1){
background:red;
left:0;
}
.container > :nth-child(2){
//background:green;
margin:auto;
left:0;
right:0;
}
.container > :nth-child(3){
background:blue;
right:0;
}
http://jsfiddle.net/7xqwrtq2/
The children are positioned in this order: left, center and right.
How can I prevent the centered div from taking all remaining width?
I want it to be like the others where the width is adjusted to the
content. I don't want to set a fixed width neither.
Thanks in advance.
The kind of layout you are looking for cannot be achieved through absolute positioning. You've to use floats instead.
<div class="container">
<div>left</div>
<div>right</div>
<div>middle</div>
<div class="clear"></div>
</div>
div{
border:1px solid;
}
.container{
height:200px;
position:relative;
}
.container > div{
height:190px;
}
.container > :nth-child(1){
background:red;
float: left;
}
.container > :nth-child(2){
//background:green;
float: right;
}
.container > :nth-child(3){
background:blue;
overflow: hidden;
}
.clear{
clear: both;
}
is this what you need?
http://jsfiddle.net/7xqwrtq2/1/
just add 33% width to them
.container > div{
height:190px;
position:absolute;
width:33%;
}
The reason the center column is stretching is because you specify: left: 0; and right: 0; pushing the margins of the column all the way out to where it will fit.
If you change your .container > div like so:
.container > div{
height:190px;
max-width: 33%;
box-sizing: border-box;
float: left;
}
and remove all left: and right: properties from the nth-child section of the CSS, I think you'll get closer to the results you are looking for. You can tweak it, but if you fail to define at least a max-width, you may risk your furthest right column dropping down a line. Using floating columns may not be the best approach, so be sure to clear:both; to reset the layout underneath.
The box-sizing border-box property is to make sure borders and padding are taken into account with the "width" property.
If you see here:
http://jsfiddle.net/7xqwrtq2/6/
I set the 1st and 3rd columns to max-width: 25%, and the center to 50%. (I took out the max-width: 33% in .container > div) However, the three columns never take it to the full 100% width because the content in the center column isn't enough to take it there.
Assuming you don't want "equal sizes", but rather "each div expands to fill only the necessary space, let all the divs use inline-block:
.container > div{
height:190px;
display: inline-block;
}
and change only the color with the :nth-child selectors.
Here's the JSFiddle that shows it.
http://jsfiddle.net/7xqwrtq2/5/
Ok so first it's my firstquestion here on Stackoverflow and the first question ever at all...
I started learning web development two month ago and I learned HTML CSS and most of JS and some jQuery...
I never did any actual thing or experimented but now I'm trying to make my first project to start having practice..
So i've got this wrapper div and inside it I have two more divs, one is a kinda main content div and under it should be the other div which have a nice white img to blend with the overall website background.
The problem is that I cant get the second div to be under the main div and inside the wrapper div. I've simlified it here in the code... Please let me know how to do it...
Thanks and sorry if my English made you hit yourself in the face :)
The HTML
<div class="wrapper">
<div id="first"></div>
<div id="second"></div>
</div>
The CSS
.wrapper {
width:350px;
height:350px;
background-color:black;
margin: 0 auto;
}
#first{
width:250px;
height:300px;
background-color: white;
margin: 0 auto;
}
#second{
width:350px;
height:100px;
background-color: gray;
}
Edit:
I've made a Pen on CodePen to show you what I mean better...
http://codepen.io/Avisaac/pen/DgIzi
This should be the resault only the gray div should be under the red div AND on the bottom of the red div, also i want the red div to be centered inside the wrapper. [plz notice that the wrapper should have the abillity to be centered also, as it is the main content area for my site which is centered.
I also attach a prtScr I took of my monitor to explain better:
the white square is the main content (meaning #first) the white gradient on the bottom is the second div (#second) which contains this gradient. the main content should be over the gradient so that the main content blend with the pattern background.. Hope I made it clearer
http://img841.imageshack.us/img841/2882/qg6j.jpg
The heights and widths don't match.
Try to add more to the wrapper's height, it's just 350px but if you add the two other div's height, it's 400px.
As #DevlshOne mentioned if your mean by under is overlapped try this:
.wrapper {
width:350px;
height:350px;
background-color:black;
margin: 0 auto;
position: relative;
}
#first{
width:250px;
height:300px;
background-color: white;
margin: 0 auto;
position: absolute;
top: 0; left: 0;
}
#second{
width:350px;
height:100px;
background-color: gray;
position: absolute;
top: 0; left: 0;
}
fiddle for this : here
But if your mean is one in top and other in bottom try this;
.wrapper {
width:350px;
height:350px;
background-color:black;
margin: 0 auto;
overflow: hidden /* or scroll or auto */
}
#first {
width:250px;
height:300px;
background-color: white;
margin: 0 auto;
}
#second{
width:350px;
height:100px;
background-color: gray;
}
another fiddle for this one: here
I want to center an image and its title inside a div with this css code
.box {border:2px solid #0094ff;}
.title {background-color:pink;color:white;height:10px; line-height:3px; padding:10px;}
.content {color:#333;padding:10px;}
.box {
-moz-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
}
.titleIkon{
margin-right:2%;
display:table-cell;
vertical-align:middle;
}
By the look of this fiddle http://jsfiddle.net/7kx4r/ i can tell that nor the icon or the text is centered.How do i fix this?.
Remove unnecessary CSS and use the following CSS:
.title {background-color:pink;color:white; padding:10px; }
.titleIkon{
margin-right:2%;
display:inline;
}
DEMO
You need to make .title class display: table-cell;
.title{
margin-right:2%;
display:table-cell;
vertical-align:middle;
}
Fiddle
Note: Table-cell doesn't work in Old IE browsers
use text-align with your div having class title as
text-align: center;
check this fiddle http://jsfiddle.net/7kx4r/4/
something like this?
http://jsfiddle.net/7kx4r/8/
just add width:XXXpx; margin:0 auto;
Try it with this CSS:
.box {border:2px solid #0094ff;}
.title {background-color:pink;color:white;height:10px; line-height:3px; padding:10px;}
.content {color:#333;padding:10px;}
.box {
position:relative;
-moz-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
}
.titleIkon{
position:absolute;
top:50%;
margin-top: -8px;
}
What's going on here:
position:relative creates a new offset context for .box's children.
position:absolute tells .titleIkon to use offset parameters (left, right, top, bottom) relative to .box
top:50% tells .titleIkon that it should consider it's top edge position to be 50% of the height of the parent.
margin-top: -8px tells the browser to move the image up by half it's height (16px / 2 = 8px)
just define display:table-cell; vertical-align:middle; to your .title class.
its work IE8 to IE 10
see the dmeo - http://jsfiddle.net/7kx4r/10/
Hope you want this.
give text-align: center if you want only the pink line to be in center.http://jsfiddle.net/7kx4r/17/
I want to create a robust css style that works whith almost all browser (included IE7, firefox 3)
that show me two columns and one footer divided by dotted border.
I was trying to implement the following code,
but I have one problem:
when I apply border-right-style:dotted; to left class
A and B are not at the same horizontal level.
please halp me to fix the css style.
Click here for the current example.
HTML
<div class="container">
<div clas="left">A</div>
<div class="right">B</div>
<div class="footer">C</div>
</div>
CSS
div.container {
background:#eee;
margin: 0 auto;
width: 750px;
}
.left{
background:#ddd;
float: left;
width: 50%;
border-right-style:dotted;
}
.right {
background:#eee;
float: right;
width: 50%;
}
.footer {
background: none repeat scroll 0 0 #eef;
clear: both;
border-top-style:dotted;
}
The problem that you're experiencing is that the border of the element is not contained within the defined width of that element; so the element is 50% of its parents width, but with an additional width added by the border.
If you reduce the width of the elements to, for example, 48%, then it seems to work as you'd like:
div.container {
background:#eee;
margin: 0 auto;
width: 750px;
}
.left{
background:#ddd;
float: left;
width: 48%;
border-right-style:dotted;
}
.right {
background:#eee;
float: right;
width: 48%;
}
JS Fiddle demo.
Edited with update,
You could, for Firefox and Chromium (FF5.x and Chromium 12.x on Ubuntu 11.04) use:
div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box; /* Left this in, but it doesn't seem to work... */
}
JS Fiddle demo.
Which incorporates the border width into the width of the element; with this approach you could retain the width: 50%; on the elements and borders would sort themselves out. Unfortunately it doesn't work on Opera or, presumably, IE.
Fixed
http://jsfiddle.net/euYTQ/19/
What you've got to remember is that a border counts + of the % assigned.
So say you have a box thats 100px's wide (100%), and you put one side with a 1px border (1%), thats actually 101%. So in your case, it was breaking to the next line of space, hence giving you your error.
In my fix i simply set the right container to 49%. Which would be great for fluid solutions, or if you have a fixed layout, set it to a fixed value.
Remember, padding is the same too... it will count + of the assigned size or percent.
Hope this helps!
The reason A and B are on different levels is because they don't fit into one width. You have them each declared with width: 50% but one of the also has a border. Border width is added to the width of the div - thus the two divs plus the border don't fit into horizontal spacing.
For example, try putting width: 49% on each of them - and you'll see the difference. This is not ideal, as you don't always know the width of the viewport. If you can work with exact pixel widths, it would be easier. Try this CSS for a change:
div.container {
background:#eee;
margin: 0 auto;
width: 750px;
}
.left{
background:#ddd;
float: left;
width: 374px;
border-right:dotted 2px black;
}
.right {
background:#eee;
float: right;
width: 374px;
}
.footer {
background: none repeat scroll 0 0 #eef;
clear: both;
border-top-style:dotted;
}
This is because 50% + 50% + 1px(the border) is higher than 100%.
If your .container isn't going to change width's you could give them both a fixed pixel value.
However if your .container is going to change width's you could try adding another element that contains the border alone like so:
.border {
height:100%;
width:0;
border-left:3px dotted #000;
position:absolute;
left:50%;
top:0;
}
Don't forget to give .container a position:relative;.
#Antojs; padding & border add width to the element if the element in percentage it's create problem. So; can give width to one like this:
div.container {
background:#eee;
margin: 0 auto;
width: 750px;
}
.left{
background:#ddd;
float: left;
width: 50%;
border-right-style:dotted;
}
.right {
background:#eee;
overflow:hidden;
}
Now in .right if you give border & padding it's not effect anything & you can also use css3 box-sizing: border-box; but it's not supported by IE7
check this fiddle http://jsfiddle.net/euYTQ/30/
The problem is that the border adds width to the div with .left. As the container div appears to be of fixed width, you could simply give the .left and .right elements fixed width values too (or reduce their percentage widths), and make .left slightly narrower:
.left{
background:#ddd;
float: left;
width: 372px;
border-right-style:dotted;
}
.right {
background:#eee;
float: right;
width: 375px;
}
Here's an updated fiddle. I would also suggest reading up on the box model to get an idea of how borders, padding etc. add on to width.
http://jsfiddle.net/euYTQ/18/
50% and 50% = 100% so no space for the border.
Put your div right in the div left
<div class="left">section left
<div class="right">section right</div>
</div>
and change a little the css
.left{
background:#ddd;
float: left;
width: 50%;
}
.right {
background:#eee;
float: right;
border-left-style:dotted;
}
Example : http://jsfiddle.net/euYTQ/28/
I have two div like:
<div class="outer">
<div class="inner"></div>
</div>
then I give them style like:
.outer{ background:yellow; position:absolute; width:80%; height:80px; margin:0 10%;}
.inner{ background:red; position:absolute; margin:0 11px; width:100%; height:80px;}
I want the "inner" in "outer" ,as well the left and right have both 11px space,but it can't be achieve,only the left have the 11px gap,the "inner" seems always have the same length as the father's length
Then I think maybe setting the outer padding with 11px will be work.However ,it still doesn't work……
Why this happened?So how can I solve this problem?Is that possible with the effect?
Here is the only case
The margins will add up to the width which is already stretched to the outer DIV by (width 100%) what you can do is the following - link:
.outer{ background:yellow; position:absolute; width:80%; height:80px; margin:0 10%; padding: 0 11px}
.inner{ background:red; height:80px;}
Removing position: absolute; (or changing it to relative) and width: 100%; from .inner will give you exactly what you want. Then, if you really need an element with position: absolute; inside, put it in .inner.
An example