Jump to content
Stef's Coding Community
Sign in to follow this  
Dinthi

CSS Positioning, giving me headaches.

Recommended Posts

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.

post-36089-017692100 1317633317_thumb.jpg

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

(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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

I'm out of time for the moment - pesky day jobs. I'll look some more later - maybe somebody else can spot the problem?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...