Dinthi Posted October 3, 2011 Report Share Posted October 3, 2011 Hi there, I'm working on a lay-out for a webpage, using floats. The attached .jpg shows my problem. The right-most item doesn't shift up, even though there is more then enough space. After reading up on how floats work, i learned that a float can only move left/right and down. Not up. So i'm stuck with this problem now, how do i get my right-most item where i want it? I'm hoping you can help me out. Regards, Dinthi. Quote Link to comment Share on other sites More sharing options...
Andrea Posted October 3, 2011 Report Share Posted October 3, 2011 We really need to see your code - HTML, CSS, and any images, if applicable.- Ideally, post a link to the page you're talking about. Quote Link to comment Share on other sites More sharing options...
Dinthi Posted October 3, 2011 Author Report Share Posted October 3, 2011 Thanks for your reply, I'll see if i can get it online. I was hosting it locally at the moment of posting. Give me a minute. Regards, Dinthi. Quote Link to comment Share on other sites More sharing options...
Dinthi Posted October 3, 2011 Author Report Share Posted October 3, 2011 (Link removed) This is the page. Don't be to horrified by the code, what you see is all self-thought, and probably a mess to your eyes. Regards, Dinthi. Quote Link to comment Share on other sites More sharing options...
Andrea Posted October 3, 2011 Report Share Posted October 3, 2011 According to the validator, you're missing a closing div tag somewhere, which could be your problem. Overall, you have quite a mess of divisions here - not every element on a website necessarily needs its own division. Also, you're using HTML doctype, which is correct, but you have some XHTML closing tags . You're also relying on height settings, which can be an issue, as content from page to page does not usually fit into the same space. Quote Link to comment Share on other sites More sharing options...
Dinthi Posted October 3, 2011 Author Report Share Posted October 3, 2011 Thanks for your reply, Andrea. There was a closing div tag missing, indeed. This is now fixed. It's quite a mess indeed, and it probably could be a lot cleaner. However, i don't think this should affect the float "issue"? I'll look into the HTML/XHTML doctype thingy. (I don't really know much about doctypes at all, i just put one there because it's needed for some things to work). The height dependancy i'm aware of, but this will not be a problem(Not with this website), because the content height won't be exceeding the height i set. Lot's of point to improve on, thanks again for pointing it out! However, the float issue remains. Any other guess on what might be the problem? Regards, Dinthi. Quote Link to comment Share on other sites More sharing options...
Andrea Posted October 3, 2011 Report Share Posted October 3, 2011 I'm out of time for the moment - pesky day jobs. I'll look some more later - maybe somebody else can spot the problem? Quote Link to comment Share on other sites More sharing options...
Dinthi Posted October 3, 2011 Author Report Share Posted October 3, 2011 Hi there, I think i have managed to fix the problem. I still think it should have worked the way i had it, but here's what i did. I put the divisions in a diffrent order, i moved the one causing the problems up above most of the other divs, and gave it a float:right instead of a float:left. This seems to work fine(I'll upload it in a minute, so you can see it using the link). This seems to work fine for me. http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/ “A floating box can never end up above the upper edge of the line where it’s created. [...] The upper edge of a floating box is aligned with the upper edge of the current line box (or with the bottom edge of the previous block box, if there is no line box).” “If there isn’t enough horizontal room on the current line for the floated box, it will move downward, line by line, until a line has room for it.” So if i understand it correctly, floating boxes can only grow/move left/right and DOWN. Not up. Which is why i ran into trouble. Thanks again Andrea for assisting in finding the issue! And this forum is hereby bookmarked. I love it. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.