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.
Related
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.
How do I vertical align floating elements?
I currently have 3 elements (an image floated left, another image floated right and a div with a margin:0 centered) in a wrapping div. These are currently aligned at the top but I want them to aling at the bottom of the div.
How can this be achieved without using position absolute on them as this is a responsive layout? I have tried making them display:inline-block and vertical-align: bottom but that does not help anything.
In order to use vertical-align on some element, that element must have display:table-cell; css style. http://jsfiddle.net/StPYR/
Your jsfiddle updated: http://jsfiddle.net/chCjT/16/
Instead of floating the elements you need to give them display:inline-block; css property
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.
Basically, I want to center text, ignoring any floating sibling elements.
At first, I thought this wouldn't be a problem, as I was under the impression that a floating element did not take from the width of any sibling elements.
Example (I want the red text to be at the center of the blue box, despite the green text)
How is this best achieved?
You can't. If it were centered within the parent box, then the float would overlap the content at some point, which would be defeating the point of the float. There are two approaches you can use here. If you know the width of the float, you can apply an equal negative right margin. Otherwise, you can absolutely position the element like this.
Here's a link to a working fiddle: http://jsfiddle.net/cD657/3/
(in your example, you opened a <span>, and closed it with </div>)
I made it a div and gave it margin: 0px auto; and a width. -seemed to do the trick
You can keep as you have it but just adding padding on the opposite side with the same pixel value as the width of the floating element.
.parent{
text-align: center;
}
.centered.element{
padding-left: [width of floating element]px;
}
.floating.element{
float: left;
}
To find the width easily just use Developer Tools in any modern browser to Inspect the element.
See fiddle here: http://jsfiddle.net/cD657/369/
Note: This may not work if the centered element has an assigned background color.
i´ve got elements inside a containing div with a class.
i could use text-align: center on the div and that will center all elements.
how could i position the elements with exact pixels from the left?
(i dont want to use css on the element but on the containing div)
You can use padding-left on the container div. However this will augment the width of the div itself, since you're adding left padding to it. To solve this problem you should use margin-left on the inner divs, for example:
/* apply a margin left to all the divs
* inside div.container
*/
div.container div {
margin-left:20px;
}
The closest you could get with only the div is to play with the padding, but the correct solution would be to apply left/top to the inner elements.
Also, this belongs on doctype.com.
Set position: relative
Set top: ..px
Set left: ..px
I think this solution is prettier than setting margins/paddings.
(I'm typing this on an iPhone can't format it for ya)
Hello this is what your looking for
< div style="position:absolute;height:100px;width:100px;top:100px;left:100px;">
You can put that style on any tag you want Enjoy!
and to be into the middle use I.E
< div style="position:absolute;top:0px;left:50%;">