If that doesn’t work then you could try adding 3 sides of borders around each of the menu and content and don’t add any border to where the two connect. Assuming there’s no space between menu and content that should give the effect of a single border around both.

i want to ask how can i make a border that will be round menu and content, becouse ive got div which separates them from other staff but it doesnt work, thanks for help, i cant find it anywhere

I probably won’t be able to answer all your questions in a comment, so maybe I’ll have to put this on the list for an upcoming post. In fact I just made a note to start that post.

My second statement about the next element wanting to sit in the same spot, probably isn’t so accurate. What happens depends some on whether the next element is an inline or block level element and it also depends on how much space there happens to be around the floated element.

A float element floats within it’s containing element. So if you have a paragraph that starts with an image (which you float left) followed by the usual text, your image will float to the left and the text will wrap around it.

If that same floated image isn’t inside the paragraph then the text will appear below the image (I think?).

Where it gets confusing is if you have a div and then float all the different elements inside that div. As far as the div is concerned there’s nothing inside it so if you give it a border on all 4 sides you’ll at most see a single line.

I’ll work on a post for next week to see if I can clear some things up for you. Seems like a good topic to cover.

I’m currently learning CSS. The 2nd edition of “CSS the missing manual” arrived today so hopefully this’ll help a lot! The 1st edition had really good reviews on Amazon.

I’ve been going through the material you presented above. Hopefully you (or someone else) can clear up my confusion though…

Under the section Menu Div, you say “when something is floated it is taken out of the normal flow and as far as the other elements on the page are concerned it’s been removed.” Also: “unless we tell it otherwise the next element on the page (in our case the content div) will want to sit in the same exact place the menu div sits”.

This is not what I observe though. If the stylesheet is trimmed to remove stuff relating to the content div and the footer div, then the content still sits to the right of the menu and not on it. That’s my main confusion.

As an aside, I’ve been trying to learn from w3c spec about floats and found this paragraph: “Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, line boxes created next to the float are shortened to make room for the margin box of the float. If a shortened line box is too small to contain any further content, then it is shifted downward until either it fits or there are no more floats present. Any content in the current line before a floated box is reflowed in the first available line on the other side of the float. In other words, if inline boxes are placed on the line before a left float is encountered that fits in the remaining line box space, the left float is placed on that line, aligned with the top of the line box, and then the inline boxes already on the line are moved accordingly to the right of the float (the right being the other side of the left float) and vice versa for rtl and right floats.”

When it talks about line boxes created next to the float, I don’t really know what that means. I know what a line box is, but when it says “next to”, does that mean as a sibling in the document, of as a child somewhere of a sibling in the document? In the case you present, the content is a div (therefore a block box) which contains a line box with “Content”. Is this line box “next to” the floated menu using the terminology of the w3c site?

I feel like I’ve just dumped my worries off to an agony aunt, apologies. Any clarifications you might be able to provide will be gratefully received!!

Regards,

PUK