I have two divs, one inside another. The width of the outer div is given in percentage and the inside div is given an position:absolute. I want to align the inner div in the center of outer div irrespective of the outer div's width percentage.
It works fine when position:absolute is removed from the inner div, but I need that. Any help would be greatly appreciated.
I have the following code:
<div class='container' style='width:70%; position:relative'>
<div style='position:absolute; text-align:center' align='center'>
//contents
</div>
</div>
You can do the following:
Add text-align:center to the .container div:
.container{
text-align:center;
}
If you're trying to center another div or an image etc within .container then set those items to have the following margin:0 auto;, e.g.
.container > div{
margin: 0 auto;
/* note that div needs to be a block element and needs a given width */
}
That should help with your problem.
Related
I have a problem about bottom alignment of a div and I don't find any solutions.
All div are contained in a main div, one is left floated and all other must be place on the right of it;
Just one of them it must be bottom aligned, but trying with position absolute and bottom tag it's placed over the floated one.
CSS:
#container {width:730px;position: relative;min-height:120px;}
#image_box {width:220px; float:left; padding-right:10px;background:#222;color:#FFF;}
#box_dx1 {width:500px;background:#666;}
#box_dx2 {width:500px;padding-top:10px;background:#999;}
#box_dx3 {width:500px;padding-top:10px;background:#CCC;}
HTML:
<div id="container">
<div id="image_box">Box Sx Image <br>Row<br>Row<br>Row<br>Row<br>Row<br>Row</div>
<div id="box_dx1">Box Dx Title</div>
<div id="box_dx2">Box Dx Description</div>
<div id="box_dx3">Box Dx Param</div>
</div>
Moreover div's heights are variable, image_box is optional(cannot exist) and text of box_dx2 could wrap under the image_box.
Any ideas?
Thanks!
If the height of box_dx1, box_dx3 and image-box is always going to be same, you could just set a min-height for box_dx2. That way, if you add more content to box_dx2 it will eventually become taller than the image and text will wrap around it. In your example it would be something like:
#box_dx2 {
width: 500px;
padding-top:10px;
background:#999;
min-height: 70px;
}
jsFiddle
However, if the height of those boxes isn't fixed, maybe the easist thing is to calculate the min-height using some jQuery.
When I put a scrolling div (i.e. <div style="width:200;height:200;overflow-y:scroll;">) inside of another div that has an overflow attribute it treats the second div like I don't have dimensions set (height 200 and width 200). The scroll bar on the right shows up but it wont work because every time I add content the div just drops instead of making it scroll.
First divs css:
#slide1_container
{
width:976px;
height:520px;
overflow:hidden;
position:relative;
margin:0 auto;
}
Nested div:
overflow-y:scroll;
You're missing the px on the dimensions in your div's inline styles.
<div style="width:200;height:200;overflow-y:scroll;">
Should be
<div style="width:200px;height:200px;overflow-y:scroll;">
How can i fix the unwanted margin of the "right" div.
The right floated div is margined like you can see here:
JSFIDDLE: http://jsfiddle.net/s9Ssh/1/
The effect i wanted to achieve is to keep .mid layer always centered no matter the lenght of side div's text.
HTML:
<div class="main">
<div class="left">left</div>
<div class="mid">
Vpis podjetja
|
Iskanje
</div>
<div class="right">right</div>
CSS:
.main {
text-align:center;
width:100%;
}
.left {
float:left;
}
.mid {
}
.right {
float:right;
}
Maybe this will help: http://jsfiddle.net/sbhomra/s9Ssh/4/
I have basically absolutely positioned the left and right div's and set the middle div to stay in the center by using margin:0 auto.
Edit
Fixed padding on left and right div's, so they are not too close the side of the page.
http://jsfiddle.net/s9Ssh/3/
Move the right floated element before the middle element in the markup. It appears on a new row because the middle element isn't floated (and is a block level element).
Alternatively you can also float the middle element or set it to inline/inline-block.
EDIT: Although to clarify, if you float the mid element then you have to fiddle around with css a little since it will break your text-align. :P
try to add display: inline-block; to .mid element
example fiddle : http://jsfiddle.net/XSdJA/
I've this code :
.outer
{
width: 1000px;
float: left;
overflow: scroll;
}
.inner
{
width : 500px;
float: right ;
}
<div class='outer'>
<div class='inner'>
.....
</div>
<div class='inner'>
.....
</div>
<div class='inner'>
.....
</div>
</div>
I want to float those inner divs to right , ( one beside the other ) , and enable scrolling on the outer div when inner-Divs' width exceed parent width
Is my question clear ?
Thanks guys.
I think what you want is something like this: http://jsfiddle.net/cWpGS/2/.
Note the properties prefixed with * are needed for IE7. You should apply these two properties with an IE7 specific stylesheet instead of what I did here.
As Alejandro mentions, using floats you cannot achieve what you need. Instead, use inline-block and set nowrap to the parent div. Reset the wrap on the inner divs and you're done.
In the example you posted the inner divs have a width of 500px, and the outer div a width of 1000px, so you will not see any scrolling bars anyway.
Setting the inner divs to 1000px and the outer div to 500px, you should remove the "float:right" attribute to see the horizontal scrollbar. You can place the divs at the right side with a "margin-left:auto;" instead, but in this case it does not make any sense because the inner divs are greater than the outer div
I have come across some methods of centering a div within a div, but those usually requires the element to be centered to have a fixed width and height. Is there a way to do it if the inner div to be centered will be of variable width and height (example: centering an image inside a frame of a fixed size, and the image could be of variable width/height)
horizontal centering can be done with CSS:
#containerDiv {
text-align:center;
}
#innerDiv {
margin: 0 auto;
text-align: left;
}
For vertical centering I use Javascript if the containerDiv doesn't have a fixed height.
The only ways to center variable width in all browsers (that I know of) is with
<table align="center" cellpadding="0" cellspacing="0"><tr><td><div>This div is variable width and is centered.</div></td></tr></table>
or JavaScript
As for center horizontal that would force you to use JavaScript (I think)
IE needs a "text-align: center" on the top-level element.
For example, your body element has "text-align: center",
and your container has "margin: 0 auto".
Then IE will center it.
You can set back "text-align" to left on your container if you don't want its content centered.
Centering the width is easy...you probably already know this, but just set the left and right margin to auto. For height, unfortunately, I've only seen weird positioning work-arounds. You'd think that they'd make a similar margin for top/bottom, but alas, no. I'll try to find a link on the work-arounds.
<div style='width:400px;height:200px;background-color:#CCCCCC;'>
<div style='margin:0px auto;width:30px;height:30px;background-color:#0000CC;'> </div>
</div>
EDIT: Found link that might help on the vertical part:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
You could use the display attribute to make a table-cell out of it:
DIV.container {
min-height: 10em;
display: table-cell;
vertical-align: middle }
...
<DIV class="container">
<P>This small paragraph...
</DIV>
However, this recommendation does not really work for me. But this one does:
https://stackoverflow.com/a/6284195/156481