I'd like to right-align block elements in a floating container.
Assume the following markup.
<div style="float: left;">
<img style="display: block;" src="...">
<img style="display: block;" src="...">
</div>
current wanted +-----------+ +-----------+ |+-------+ | | +-------+| || | | | | || || | | | | || |+-------+ | ---> | +-------+| |+----+ | | +----+| || | | | | || |+----+ | | +----+| +-----------+ +-----------+
What I've tried:
div { text-align: right; }
- works in IE8, fails in Firefox (naturally, the images are blocks and not supposed to be affected by text-align
)img { margin: 0 0 0 auto; }
- works in Firefox, fails in IE8What else can I try? I prefer a pure CSS solution, if that's at all possible.
UPDATE
Here's a fiddle that explains the full markup: http://jsfiddle.net/Tomalak/yCTHX/3/
Setting float: right;
works for all real browsers, for IE8 it extends the image box in the row first over the entire width and pushes down the box with the text.
Center Align Elements To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.
Fixed Positioning Move Left - Use a negative value for left. Move Right - Use a positive value for left. Move Up - Use a negative value for top. Move Down - Use a positive value for top.
Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side. float:right; This property is used for those elements(div) that will float on right side.
div > img { float:right; clear:right; }
The correct way to align an element with CSS is to set text-align on the container and margin on the children elements.
Your tries are wrong since you are setting margin and text-align on the img tag. Your css should look like:
div {
float:right;
text-align: right;
}
img {
margin: 0 0 0 auto;
}
Just tested on ie8, ff and chrome.
http://jsfiddle.net/notme/wfwjf/2/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With