This is a problem that for some odd reason I run into only sometimes. But how would I set a floated DIV's margin? I use negative pixels and seem to achieve the results, but when I view the page in the editor window of a CMS (ezPublisher) it looks totally disgusting and broken, but in the browser it is fine (being broken in the editor window will not fly here)
When I set an element to float:right, it kicks it way far to the left of the page, when I set the margin-left dimensions, it doesn't go anywhere.
So in short, I'm trying to ask: when I float an element to the right, what side to I set the dimensions on? margin-left? or margin-right?
Here is the page with
http://scope-stage.scholastic.com/issues/09_01_13/
.articleCover {
float:right;
width:210px;
margin-top:-190px;
margin-left:-20px;
}
Furthermore, I always though that you place floated elements before the element that they float next to in the markup. However, I see it either way sometimes. Thanks for the help, and I hope I was clear on my issue.
Related
I am making a website currently, and when I created a row of buttons a few of them were slightly shifted from the line.
My website: (unfortunately just a template so I can't really send you the link)
Code:(HTML)
Code:(CSS)
It seems weird to me as the buttons are set 100% of the height of their container, so technically they aren't suppose to get out of it anyway. I tried messing with the width and height of the container, but nothing seems to work. Perhaps I am missing something simple.
If any other parts of the stylesheet needed I can post it.
I'm not sure if everyone got my problem. I'm saying that it's pretty weird that while the button's height is set 100%, a few of the buttons still manage to move slightly down from the majority of buttons.
I believe the issue is your margin.
The GameBtn puts a margin on all sides, whereas the MenuBtn sets a margin to the left only. This will jack things up.
Not sure, however, why you position the container element absolute. But, that may be another discussion. Also, you have a top AND a margin-top property set in the container element. You can remove one of those. If you meant to center the container element, you can just position it relative and set the margin to margin: 65px auto 0;
I have been searching for an answer to this for some time.
i want to add space to the bottom of my web page, as content sits too close to edge.
I have tied 'padding-bottom' in wrapper tag, in body tag and in style tag.. not working.
any help on this appreciated..
thanks,
Keith.
http://www.reddogonline.eu/av.html
you have a serious design problem.
all your elements are relatively position with top offset, that cause the wrapper and body to be actually smaller then you think. because this offset is not taken in consideration when determining the wrapper height. (so the height of the wrapper is only the sum of his children height, without the offset between them)
when you add padding-bottom to the wrapper or the body, it works (of course), but you don't see it. because your elements overlaps the wrapper..
you will be able to see that I'm right by setting overflow:hidden; to the wrapper (or inspecting your site with a tool). suddenly, half of your content disappears..
you need to remove the position:relative; from your elements, and use margin-top instead of top to make the desired space between the elements.
That way: the wrapper and body height will be set right, and the padding will work as you expect it.
You're positioning relatively all your elements. That's causing the padding/margin problems too. Why would you position your elements like this?
Try removing relative positioning and add top/bottom margins to your elements. The results will be the same in terms of visual effect.
It will also be much simpler adding new sound boxes, as you don't have to calculate a top positioning for each one.
My nav bar correctly links to my 'work' section, but if I click ABOUT on the nav bar, it drops down to about 300px above the 'about' h2. I feel it may have to do with positions, displays? I can get the ABOUT anchored link to correctly go to the about section if I add
#about{
margin-top: 360px
}
Although this appears to be a poor patch on a larger problem with my construction. I've tried doing a lot of different things but I keep ending up with my work, about, and contact section starting to overlap into each other which I can't understand either. The divs dont seem to be stacking properly or something. ANY help is greatly appreciated.
http://wrobbins.me is the site. Thanks.
The link takes you exactly to where the about element is, it's just that the text in the element is pushed down by the job elements in the block above.
The problem is the jobwrap element. The floating elements inside it doesn't affect its size, so it has the height zero.
Add overflow:hidden to the #jobwrap style, and it will contain its children, and the about element will start below it.
When you use floats you should "clear" its parent or block you want to be below. Now your #jobwrap block have zero height and there is the problem with #about position. Use #about{cloar:both;} as hotfix and read more about floats and clearfix.
I'll admit that CSS is not my cup of tea, so it's possible that I'm missing something obvious here. My problem is that when I have an element that has both CSS properties of "clear: both;" and "height: 100%;" the element actually ends up going past the page height. Here is an example: http://jsfiddle.net/d9mv7/
Notice that the blue frame causes a scrollbar to appear and exceeds the page height despite being "100%". When "clear: both" property is removed, it renders as expected (JsFiddle still adds an unneeded scrollbar, but when rendering normally, I don't have that issue).
My intent is to have the bottom div (the blue one in JsFiddle) go until the bottom of page height, but stop at the bottom of the page, drawing the border correctly, same way as on the sides. The problem is that I do have content above the div that has a float property, requiring div to have the "clear: both" property to render correctly (unless there is another way without having to hardcode the pixel size).
I've tried wrapping both the top (float element) and bottom div inside an additional div, such that their height is relative to that div instead of the page. This seemed to make the overlap smaller (and scrollbar shorter), but did not make it go away. Using "overflow: hidden;" will not work for me either, since it still makes the div and the content go beyond the bottom, only hiding the scrollbar. How do you guys suggest I handle this (preferably without JavaScript)?
As the two other posters suggested, I ended up going with a JavaScript solution. If someone can find a CSS-only solution that makes no assumptions about size/contents of the divs, please post it and I will change the accepted answer. Here is how I'm handling it for now (this uses jQuery, but similar logic can be done with native JS):
$('#second-panel').height(document.height-$('#first-panel').height());
Alternatively, if your divs have margins/padding/borders that are thick enough to matter and you want them included in the measurements as well (because element.height() doesn't), you can use outerHeight:
var secondPanel = $('#second-panel');
var borders = secondPanel.outerHeight()-secondPanel.height();
secondPanel.height(document.height-$('#first-panel').outerHeight()-borders);
This looks a lot easier than I am probably making it sound. I have a content div, 600px wide. It is constantly, for the sake of this argument, in the middle of my page. It is set in the middle using
margin: 0px auto;
In the top right hand corner of this div, I have set a second div, which contains options (it will be share options, such as Facebook, Twitter, etc.). It is currently controlled using CSS, no Javascript. When my cursor is away from the Options div, it remains as a button. When my cursor is over the Options div, it expands. I want for it to expand over my content, but for my content to still wrap around the original (in this case) 50px square box.
I have two test pages currently uploaded:
Test 1 - This displays the Options div in the correct place (set using float: right;), but when I roll over it, the content wraps around the reiszed div.
Test 2 - This makes sure my div floats over my content, but it is set using position: absolute, and it remains at the top right hand corner of the page.
I have missed something, I know I have. Are there any suggestions as to how I can get it working together? I would prefer solely CSS, but I am not opposed to Javascript, either standalone or using jQuery (I'd prefer that, since other scripts I use in my site use the jQuery framework). Code is 100% inline for this example, CSS is using and not tags, so if you wish to look, it's all there.
Test 2 would be perfect if you set position: relative; on the containing div and then added a spacer div that remained in the flow of the document: http://jsfiddle.net/sl1dr/GyvM4/
use z-index with absolute postion. Set the z-index to be higher than the content.
Try this fiddle
It's 1:30am where I am so this is not my best work. Hopefully it should be cross browser compatible.
note I changed #options to options for re-use.
http://jsfiddle.net/7T2c6/ I got it with no extra DOM. However I did move the location of the anchor tag. Outer div no longer provides style, just spacing. Inner elements are position absolute and provide all style. Just my variant. :)
Use position:absolute without defining a top/right/left/bottom value, and add a z-index value. This will keep it in an absolute position but since it's not really specified, it will remain at the required location, causing it to overlap other objects. Play with margin to move it around.