i'm trying to fix the position of a div while this div's alignment is centered, but when i enter position (whether fixed or absolute) alignment to center is disturbed. what's the cause?
#stage {text-align: center; position:fixed;}
You need to define a width for the fixed-position element. By default it is only as wide as its contents and aligned to the left top.
The way you describe it, probably width: 100% would be the adequate value, which stretches the element across the whole width, in which case the text-centering you applied will be effective.
Related
I am trying trying to make a div's width as wide as it's content. Here's a fidle to show what I mean:
http://jsfiddle.net/djxpU/
I want the blue area to be as wide as the white. I tried float:left and display:inline-block, however they won't work with position:absolute;. Any workarounds?
If you want the white area to fit the blue parent, you'd set the width of the white to 100% #X{
width:100%;
}
Block-level elements actually do this naturally. The problem you have is, absolute positioned elements are taken out of the normal flow, so the block can't wrap around your white boxes.
Is there a reason you need them positioned absolute?
EDIT: If you just wanted the white boxes to be centered, here you go: http://jsfiddle.net/Marconius/djxpU/1/
Code (because I have to): margin: 0 auto;
By default a div will be the width of its parent and will display as block. Here is an example of the divs filling the available space while still maintaining the left margin.
Apply this to your 'X' divs: { margin-left: 120px; height: 40px; background-color: white;}
http://jsfiddle.net/yz3Dk/
I have a div inside a div. The .outer div has overflow set to hidden and is 200px wide. The .inner div is 300px wide and hides fine per the overflow spec.
What I'd like to do is find a way to align the inner div so that it cuts off the overflow on the left side instead of the right.
I could use positioning and negative margins but ultimately the inner div is variable width, so I'm hoping there's a way to accomplish this without 'hard-coding' anything?
Here's the fiddle: http://jsfiddle.net/xCYPc/
Try setting float: right; on the .inner
Just add direction: rtl to your .outer div, see working fiddle
From http://www.w3.org/wiki/CSS/Properties/direction :
The direction property specifies the base writing direction of blocks
and the direction of embeddings and overrides for the Unicode
bidirectional algorithm.
Also, it specifies the direction of table column layout, the direction
of horizontal overflow, and the position of an incomplete last line in
a block in case of 'text-align: justify'.
Make .outer position:relative and .inner position:absolute;right:0. That will keep the inner div aligned right regardless of its width.
I have a slider, with a div that contains the controls previous, start/stop sliding, next.
I set "text-align" to left, center and right, respectively, and display to "inline". I have no idea, now, how to fill the whole width.
Here is the markup:
<div id="external_promo_controls">
<div id="promo_previous"></div>
<div id="promo_auto_controls"></div>
<div id="promo_next"></div>
</div>
And the CSS:
#external_promo_controls div{
display: inline;
}
#promo_previous {text-align: left;}
#promo_auto_controls {text-align: center;}
#promo_next {text-align: right;}
I guess I could have it done with floating elements, however I got quite a mess trying to have a correct combination of elements being on one line and centering the element in the middle. I’d like to avoid positioning elements with pixel value, since it would break as soon as I change text, font, or size or the container, which are all events that will eventually occur.
simple to use floats - this fiddle should set you on the right path:
http://jsfiddle.net/Q4paq/
New example with DIVs containg a link with a hover state.
http://jsfiddle.net/Q4paq/1/
try this. I am not sure it will work or not but suppose all three inner divs has width of 100px each then
outerDiv specify the width to be 300px with no margin and padding
innerDiv width:100px and margin and padding are 0px and float : left.
if you want to specify margin and padding then summation of all three innerDiv's width + padding + margin + border * 3 should be the width of the outer div.
Here is the JSFiddle link:
http://jsfiddle.net/stapiagutierrez/48yGU/34/
When I use padding: 10px; on the #middle div, I thought it would make the contained divs inside become smaller to fit the padding.
This is partially true, it's pushed from the top and left/right, but it's overflowing from the bottom.
Any explanation for this, and a solution for this common case? So far, I've used overflow: hidden; but this feels like a hack. But maybe since I'm new to CSS this is how you're supposed to handle it.
You need to add clear after the floats like this: http://jsfiddle.net/48yGU/38/
Edit: the reason its overflowing from the bottom is because float does not have size. so the container thinks there is nothing there and just draws the padding on both sides (thats why it looks line height). what clear does is it sticks to bottom of floats and have size, so its pushing the container bottom to the bottom of the floats.
It's because the floated DIVS are positioned out of the normal flow, in which padding would normally consider the height and width of contained elements.
I've got a container that's set to a max-width:780px and height is undeclared. Inside the container, there's an image slideshow. Everything on the page is responsive, so as the width decreases, the image (who's width is set to 100%) adjust's the heights container.
The slideshow change's the images to display:static; and position:absolute; which no longer "holds open" the container because it's not seen as content of the container
Is there any creative solution out there to take the height of a child element that's absolutely positioned?
Example below has NO height declared on the main container.. nothing's holding it open.
http://dhut.ch/test/santos/
Thank you!
Are the images all the same dimensions? If yes, you can use a percentage padding-top on the element that contains the images.
So if your images are all, say, 760px wide by 500px tall, that's 500/760 = .65789
Which as percentage would translate into something like:
#main {
position: relative;
max-width: 760px;
padding-top: 65.789%;
}
The reason this works is because with padding if it's set with a percentage, it is calculated as a percentage of the width. As the element shrinks in width, the height will shrink proportionately and the box will remain in the same ratio of width to height. The images, positioned absolutely, won't be adding to the height of the box.
This'll work as long as your images are all the same aspect ratio and you're not expecting that ratio to change. If you'll be using a lot of random images, this isn't for you.
I recently had a similar problem with an image that I needed to absolute position at the top of a Zurb Foundation templated page in order to pull it out of the flow and reset its dimensions (Image had to stretch to edges of wrapper, instead be enclosed by its parent .row padding). However, of course, this meant that all the fluid responsive elements below it popped right up over the top of the image. Setting a margin-top or positioning the sibling elements below meant a rigid top space that didn't resize with the width of the browser.
To get around it, I placed a duplicate of the image right after the absolute positioned image and set its visibility: hidden; I had to add a little bit of extra margin bottom to make up for the difference in height, but the end result is everything on the page flowing exactly to the height of the image in use.
I've also used the padding trick described by unexplainedBacn above, and it's a great trick as well. It takes a little bit of math, but I voted that answer up. Great solution.
I think you'd better change your approach. For sliders, the best practices is to float child elements of the container, and also use one of the known techniques to prevent parent's great collapse. So, I suggest that you remove the position: absolute CSS rule from images and float them inside your <div id='main'>, then use any of these methods to force it to encompass it's children:
div#main {overflow: hidden;}
div#main:after {content: ''; display: block; clear: both; visibility: hidden;}
Add a <div style='clear: both;'> to the end of your main div container.
Remove the absolute position. I would avoid inline styling as well.