I've inherited a design where an image is aligned with the right hand side of the viewport using "float:right". Now I'd like to add some tagline text either above or below that image, which will also align with the right hand side of the viewport. I must not understand the box model whatsover and/or how to use float, because my efforts result in the tagline and image rendering next to one another, or the image left-aligned with the beginning of the tagline.
Below is my CSS that right aligns just the tagline. Thanks in advance.
<div style="margin:5px; float:right;">
<p>dexygen: Powering the Desk Wide Web</p>
</div>
put <div style="clear: both";></div> after your image :)
Try adding clear:right; to your <div> to force it to clear it and display beneath it as you want.
Perhaps you can use clear: both on the image to not allow anything besides it. Otherwise, can't you just float a div with the image and the <p>-tagline (or use a <br>? That should put them on separate lines.
Related
Im learning html and css for now. Anyway, I am following a course, and have a queston.
This is my example code with logo of BBC and text next to it: http://i.imgur.com/kii6UPi.png
And once I add float: left; to logo, text moves up: http://i.imgur.com/SIDrCVx.png
Can anyone explain to me why this happens?
This is because by default your browser is rendering the image and the text as inline elements, therefore the baseline, or bottom of the image and text is lining up.
When you apply float:left to the image, it forces the image to display as a block rather than inline, so the text no long aligns baselines with it.
you can control them using different divs. <div class="wrapper"> <div>logo</div> <div>text</div> <div> you can control them separate, but try using float:left on the text as well, that might help.
Put simply, an img in html by default will take up the entire line that it's height occupies.
When you give an element the property of 'float', you tell it to become part of the regular flow of the page, and other elements can now wrap around it.
You may want to read up on both the float property and the inline-block
I just installed Foobar on my blog but the customer support hasn't responded yet after a few weeks to my query.
I'm basically applying this custom modification offered by them (http://codecanyon.net/item/foobar-wordpress-notification-bars/full_screen_preview/411466) to add a Like button to the toolbar at the top.
What I'm struggling with is to align some Text before the <div id="social_target"></div>, so that the text and the Likebutton will be aligned to look like "Like Us On Facebook! LIKEBUTTON".
Right now when I add text before the <div id="social_target"></div>, the text appears but the Likebutton appears underneath the text so it isn't visible at all.
How would I do this?
I don't know exactly how wordpress works and if you have access to the html code, but if yes, try putting the text inside a div and applying some css to it, something like this should work:
<div style="width: 400px;">
<div style="float:left;">Like us on Facebook!</div>
<div id="social_target"></div>
</div>
The value of the width is just a guess, you can adjust it.
A few things to check:
Is the Div that your entire code (the text and the social_target div) being put into too small? If so, it'll push the Div onto the next line. You'll need to edit the size of the Div you're putting this stuff into.
Make sure you apply CSS to the Div so that it stays on the same line. Alternatively, you could use a span:
<span id="social_target"></span>
Otherwise, Divs will get pushed to a new line unless you specify something like:
#social_target { display:inline-block; }
or
#social_target { float:right (or left); }
Like Lucas has in his code above.
I'm sure this is some stupid CSS mistake, but in this template website I'm making, whenever I put more than one line of text in the content div, it misplaces the two background divs on either side of it. Here is the HTML and CSS:
http://pastebin.com/txmQzbx3
I have tried everything I can think of, but I don't know what could be wrong with it.
First, there's no such thing as float:center. If you remove that and change the position value for your content div from relative to absolute, then it works.
http://pastebin.com/B9tXgXYj
If you want to keep it fixed width then just add float: left to the content css
If you want to have it fluid then you'll want to take a look at using the display: table|table-row|table-cell css properties to do it
Try placing your backgroundright div above content div,
<div id="backgroundright">
</div>
<div id="content">
<p></p>
</div>
Hope this helps
I'd be glad if you could help me with some positioning. Here is the website.
Problem is my footer. I can't make it show always below container (if text container goes below img). If text is short enough to not go below img its ok. I tried many solutions, but non of them seemed to work for me. Solution to this could be making slider div with background, but I can't use it because I want it to fit the screen (so I need to use <img> inside it.) Any help would be much appreciated. Long story short:
<div id="container">
<div class="slider"><img with background</div>
<div id="page absolute div">
content
</div>
</div>
<div id="footer"></div>
Another solution could be stretching "container" height when "page" div keeps getting bigger, but its not possible (from what I know) because its position is absolute.
[EDITED]
www[dot]fami[dot]nazwa.pl/cc/apro/wp-content/themes/apro/style.css
div id dol is footer
how website looks to me: http://i.stack.imgur.com/yjY2a.png
i want footer (div id dol) to be below that absolute div with content
I see nothing wrong with your page, so I don’t understand what you are trying to do. However, have you considered using floats and clearing with your footer?
using firefox to see the code and css, I can't find a 'footer'....?
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...