This fiddle demonstrates the problem.
I'm trying to align an image and a button to the right, on two separate lines, as a joint unit. I created a wrapper div ("right-stuff"), with position:relative, so I can use position:absolute on its child, the button.
The problem is I don't know of a good way to align the button to the right without hurting the height calculations.
What I did is give it position:absolute and right:0, but this removes it from the flow, and causes the container ("right-stuff") not to include it - see how the red background doesn't reach it, although it "should".
Another problem is that the next item in the flow after "right-stuff" will need a margin-top to be in the correct position, or otherwise I have to either give "right-stuff" a width I calculate myself, or an artifical margin (that takes into account the button height). Too much knowledge here.
Is there a better way to get both items to act as a coherent unit, that is "right aligned", but without taking things out of the flow?
Obviously this is not the first time someone has asked this question, but I haven't found an answer here that addresses these specific concerns without ugly hacks (like manually adding a margin-bottom equal to the button's height).
Edit: text-align is a decent solution (better than what I thought of anyway). One caveat: It assumes the button is indeed textual, and doesn't work on the image itself. This is ok in my example because the image is the widest thing in the container - but what if I had another element in the container that was wider than the image? How would I keep the image aligned to the right?
Yes, since both of those elements (img and button) are inline-block you can simply use text-align: right.
What's wrong with text-align right?
<div id="nContainer">
<div id="nRight-stuff">
<div id="nRight-img">
<img src="http://sharecare.files.wordpress.com/2008/04/cute-animals-1.jpg?w=490" />
</div>
<button id="nRight-btn">A right aligned button</button>
</div>
<br style="clear: both" />
</div>
#nRight-stuff {
float: right;
text-align: right;
}
Fiddle
check out the editted fiddle at http://jsfiddle.net/HXH5Z/4/
basically i've just brought the button back in the flow, but enclosed it in a div, aligning the content (text-align) to the right. The same could be achieved by just adding the text-align: right rule to the #right-stuff div, but i don't know if you also want the image to be aligned to the right inside that div...
Related
I'm trying to create a div which is part of an image. It will automatically move if the image will be moved (for example, the browser size has become smaller, and the image will move. The div will follow the image). However, I have no idea how to do that. I tried the following method:
<div class="wrapper">
<img src="2.jpg">
<img src="1.jpg">
<div class="play1" style="position:absolute; top:100px; left:100px">Content</div>
</div>
Note: The wrapper has 'relative' as position style
I thought: In case this is impossible, I could create two divs with the image as background. So, each image has it's own div. But, how would I place those two divs next to eachother, and make them "split" if the browser gets smaller. I know how to place two divs next to each other, but how would I make it possible that if, the browser gets smaller, the second image will move below the first image.
p/s For the off-topic voters: I do not have a piece of code for my second question, because I simply have absolutely no clue how I would do that. I could paste a piece of code where two divs are next to each other, but that's all.
float is perfect for this. For each div in question, give it the style float:left; (assuming you want the first one to line up to the left) or float:right; (if you want the first one to line up to the right). The divs will be side-by-side normally, but the second one will get bumped down if they don't both fit.
Here: http://jsfiddle.net/QNEmF/12/
CSS:
#media all and (max-width:500px){
#sidebar, #content { float:none; width:100%; }
}
First make them float when screen(browser) size will get to 500px or lower. they'll switch to above css, thus stacked one above the other.
With Ed Cottrell's help, I managed to do exactly what I wanted. To place the two divs next to each other, I used
display: inline-block;
I am currently developing a site and have encountered a strange problem with getting two of my divs to stay on the same line. The page in question is here: http://bit.ly/13QE7Zi and the divs I'm trying to fix are the text div in the middle and the small image beside it. In the CSS, I have these divs set to take up 1000px (20+640+20+300+20) which is the width of the container element, but if I do this, the second div gets pushed onto the next line. It only works if I decrease the width of the text div by 3 px, which is undesirable because then the edge of the image is not aligned with the right side of the page properly. This occurs in Chrome and Firefox. I'd prefer not to use floats because that breaks other aspects of the page. How do I get these two divs to stay on the same line and still fill the full 1000px of width?
The reason this is happening is because you have a 'space' character between your two inline blocks.
HTML doesn't really ignore all white space. You can have 1000 spaces and new lines between two elements and HTML would condense all those down into 1 single space when displaying.
Your inline blocks are setup in such a way that they there widths add up to be exactly 1000px, however you have a new line in between your two containing elements which condenses down to 1 space. Your precise measurement doesn't account for this extra space and so your inline blocks wrap to the next line.
Instead of decreasing your text's width by 3 px, decrease the padding-right on .looktrai-text it won't change the way it looks but will give enough room for both to fit.
You can use border-box box-sizing. That way the width of the elements will include the padding and the borders.
You can simplify your code, and even implement text wrapping around the image by doing the following.
Disclaimer: This is a suggestion based on the results you are trying to achieve.
Remove the .looktrai-text and .looktrai-sidediv divs
Format the HTML inside of #looktrai-content like this:
<div id="looktrai-content" class="clear">
<img src="content/looktrai_side.jpg" alt="" class="align-right" />
<p>My paragraph text</p>
<p>My second paragraph</p>
</div>
Add the following CSS:
img.align-right {
float: right;
margin: 0 20px 20px;
}
The result will look something like this: http://codepen.io/anon/pen/yjdxh
This is a cleaner, simpler approach that allows you to reduce code, and maximize flexibility.
I would use float: left for the text div, and float: right for the image div and remove the display: inline-block property. This creates a clearing issue for the footer, but this is easily fixed using one of the many 'clearfix' hacks. My preferred method is using a .group class on the parent container div, as per this article on CSS Tricks. In your case this would be <div id="looktrai-content" class="group">
So I'm pretty new to both css and html but this is not the first time that I have used floats to achieve 2 divs sitting next to each other. This time it is not working properly and I've been tinkering around for about 3 hours and I figure I should call on some help.
I have edited the portion of my website in jsFiddle to assist in describing my problem:
http://jsfiddle.net/9QRcP/10/
The problem isn't that you're not assigning your divs to float: right, but that your divs are small enough that you can fit multiple of them within the page width, so they're doing exactly what they should do.
To fix this, though, we would add clear:right to #about_side and #about_side_footer, but that won't force them to be level, so it doesn't quite fix the problem.
To fix that problem as well, instead of floating each individual piece of your #greeting_wrapper and #about_wrapper left and right, respectively, float the wrappers left and right instead.
#greeting_wrapper {
float: left;
}
#about_wrapper {
float: right;
}
#greeting_header, #greeting, #greeting_footer, #about_side_header, #about_side, #about_side_footer {
float: none;
}
I found that you need to float #greeting_wrapper and #about_wrapper. These wrappers are the important elements. As far as I can tell, the children of these divs shouldn't need to be floated as well.
Also currently those divs are taking on the width of the body which is 960px thus forcing both divs onto a new line.
I had a fiddle with your code: http://jsfiddle.net/9QRcP/15/
I haven't bothered to correct the alignment, but left is now on left and right is now on right.
By my own admission this isn't a very good approach to this. A few pointers:
you can use 'clear: left' to force an element on the left to move to a new line http://www.w3schools.com/cssref/pr_class_clear.asp
you should probably contain your left and right elements in 2 seperate containers (e.g. class="container left" and class="container-right" ). Clear left for any sub-element in the left container that you want to move to the next vertical level, and likewise for elements in the right container. This will allow you to easily break your page up into columns. Here 's one I prepared earlier http://jsfiddle.net/9QRcP/19/ from http://www.quirksmode.org/css/clearing.html
you could probably save yourself a lot of work by using a grid system, e.g. http://960.gs/
The issue is with the width of your wrapper. If you increase the width, the floated div will take its place on the right.
Okay so this question is asked all over teh interwebs, including on this site multiple times. But I can't seem to apply the answers to others' problems to my own. So here's my specific case:
<div class="logo-align_container">
<div class="logo_image">
<img src="images/logo.png" />
</div>
<div class="logo_text">
<div class="site_name">
<h1>foo</h1>
</div>
<div class="site_slogan">
<h2>bar</h2>
</div>
</div>
<br class="clearBoth" />
</div>
How do I centre logo_image and logo_text vertically and horizontally within logo-align_container? Whenever I apply the fixes scattered across the web I manage to horizontally center the divs, but logo_text will always be aligned at the top of logo-align_container, and nothing I can do repositions it.
Moreover, the image and text make up a considerable part of the page. When the window is too small for them to be positioned inline (which they currently are, through float: left on both and .clearBoth { clear: both; }, I'd like to have them collapse so that logo_text falls below logo_image (which is already happening so far) but also so that both are still horizontally and vertically aligned. If this doesn't come as part of the fix to the first problem, it'd be really great if it could be accomplished separately.
If I had to give logo-align_container a fixed height, it would be 532px.
Thank you for your time!
EDIT: wheresrhys' solution almost hits the mark. Here's what it's not accomplishing which I would like it to do: http://i.imgur.com/BhHMv.png
This fiddle demonstrates a solution: http://jsfiddle.net/wheresrhys/t6pUq/ using display:inline-block
A few points
It won't work in ie7 and below as inline-block isn't supported on elements which have display:inline by default. A decent fallback in that scenario would be to use display block and then set margin: x auto 0 on logo_wrapper, where x is a value that puts the logo and title roughly in the vertical center.
I modified the html slightly - adding a wrapper around all the elements needing to be centered is necessary, and also the comments prevent the whitespace affecting the positioning of the inline-block element.
I have a div called #background. I have most of my content in it and I want it to resize when I add more content. As far as I know the way to do this is to assign it no height?
I have done this in my layout.css file.
As far as I can see, my #background doesnt close until after the last bit of content which is what I want, but it's not working. It seems to be just stopping after my #special offers div, I#m not sure why this is?
Colm
I didn't find any background div but a backdrop one..
I guess this is the one you are talking about. You should assign "overflow: auto;" to it.
Also make sure none of its content elements are not floated, and if there are (or better yet in any case) just put a <div style="clear:both;"></div> just before you end the #background div.