The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Can anyone solve this? (CSS)

I need to do a design like the one I attached using CSS. I can't solve how to do it. Is it possible? The thing that troubles me is the left box that joins with the right box; as you can see the right box has a border BUT the border does not go all the way down. Any ideas or suggestions?

The boxes have a fixed width, but the height of the main box and the lower left box are fluid (change in size depending in the content).

I think the only option here is to use backgound images that include the borders instead of using the css drawn borders.

Update: After playing with this for a while I have this design which is already html and css.

I am using a version of the nifty corners to generate the rounded corners.
Now, I have one problem: if you look at the main big box, you can see that I included an image of the bent corner. I was not able to draw the bottom border because if I add a bottom border then the border is placed at the bottom of the image anulating the bent corner effect. Any ideas on how can I draw the bottom border without it going above the picture??

My final task is to try to join the bottom left box with the right box but I have the same problem: how can I remove the border in the intersection of those boxes? The only way I can think of is a large bottom image that includes the bottom border but I prefer not to use that option.

UPDATE 2: I made it! I was able to join the lower left box with the main one. What I did is I overlaped them a little bit so that the left box is above the large one and it blocks the border.

The only piece I am missing is the bottom border. Any ideas in how can I do it? (my problem is that if I put a bottom border it goes below the vorner image I have) I neet the border to stop at the image.

If your folded corner graphic includes the background colour, you should be able to use negative 1px margins on the graphic to "pull" it over the css borders, thereby covering the border corner.

To offer any further suggestions regarding "cutting out" the top left box from the rest of the layout, we would probably need to see your complete present code and graphics, preferably by way of a link to an online site mockup, in order to play around with it.

Wow, centauri, I must accept your solution is pretty clever. I never thought of that.. what I ended up doing is adding two sepparate divs floating left. one of the divs contains the border and has a specific width (total width - width of the corner image), then I added the image in the remaining space.

I am almost there! I had to change the format of the divs because even though I achieved to overlap one box with the other, I could not make both boxes to align at the bottom (in each browser they looked different). So I had to change all the boxes to "float left" and then I was able to align them BUT now I still have a border to deal with.

Here is the image of what I have right now:

All I need to do now is get rid of the border that is in the intersection of both boxes. The boxes are aligned using float left. I think I can not use the negative border trick because one table ends 1 pixel before the other one starts.

You can see where the css archive is stored as well as the image by viewing the source of the page.

What I need to do is:
- getting rid of the border where the left box and the right box intercepts.
- right now the boxes are fixed. If there is a way to do them fluid in height that would be awesome. I was not able to do it because id one box grows then the other one does not align at the bottom.
- compatibility with IE 6, IE 7, and Firefox. (safari would be nice too) I do not care about opera..
- I was able to add the bottom border without interfering with the image, but if there is a better way to do it please tell.

Leave it with me - I have a few ideas which should work and have the benefit of reducing some of the separate classes you have now, but it will be a few hours until I get back to my other PC to have a play.

I started with a clean slate, and used the same element names where possible - there are a number of divs which I managed to eliminate.

New designs should use a strict doctype, as you are not transitioning existing code, and due to lack of support for xhtml, html 4.01 strict is currently the best choice.

In my css, I started with a universal selector zeroing browser default margins and paddings for a known starting point. Below the header, I put all content in a #mainContent div with a 186px left margin to clear everything on the left. An #xsnazzy div is not required. I put the bottom border on the .xboxcontent divs, and used an absolutely positioned <b> tag to place the bottom right corner fold, using negative values to cover the original border.

The sidebar just covers the lower section and is actually within #mainContent, but positioned absolutely aligned to the bottom and pulled to the left with a negative value so that it just overlaps #mainContent's left border.

As the #mainContent div is position:relative, the #xsnazzy_logo div can also be included within it and positioned absolutely relative to it (if that makes sense). The inclusion of these divs within #mainContent also assists with the css due to the cascade.

I am wordless....
the design is perfect. it is exactly what I needed. It is amazing how can stuff that looks impossible can actually be done. I need to keep studying because I am new at using css I just do not finish to get the logic because the stuff I do looks different in every browser. I was very good at doing layouts with tables but I believe that is not used now. anyways, thank you very very very much !!! !! I'll start analizyng your code right now to see how did you solved the borders issue.
I owe you big

The #sidebar1 div I set up to not have any right border, and I included it within the #mainContent div. As #mainContent has its position property set to "relative", any absolutely positioned elements within it will be positioned with respect to #mainContent. So I absolutely positioned #sidebar1, aligned it to the bottom of #mainContent minus 1 pixel to align the border, and puuled it 181px to the left with the negative "left" value - this leaves #sidebar1 positioned so it just covers the left border of #mainContent.

The same technique is used to pull the logo div up and to the left into position.

With a little work, this could be made fluid height, but would require some graphics to implement "faux columns"...

I have analized the code and now I understand. I did not know the absolute placement worked "inside" a relative placed div (I thought it was always the absolute value of the brower's window).

One last quick question:
right now I was trying to make the sidebar adapt in height depending on the main box content. what I noticed is that if I use an absolute placement in the bottom property of the sidebar, it will stay "glued" to the mainbox at the bottom so it will follow it BUT the upper part of the sidebar will move too. I tried to use a top absolute position with a bottom absolute position to try to make the sidebar adapt in height depending on the mainbox size, but that did not work. Is it possible to do this? (specifying a top and bottom absolute position being relative to another div so that when the other div grows the other one grows too?) I hope I was able to explain well what I mean...

By not specifying a height, specifying top and bottom positions on the absolutely positioned div will stretch it except in IE6 .. (surprise, surprise). Getting a fluid height will take a little work - like a challenge?

I haven't given any thought to where a faux background graphic might be applied here, and it may require another element.

Something else I didn't mention before: as I did not specify a width on #mainContent, a percentage width on #container will make the layout fluid horizontally.

By not specifying a height, specifying top and bottom positions on the absolutely positioned div will stretch it except in IE6 .. (surprise, surprise). Getting a fluid height will take a little work - like a challenge?

I haven't given any thought to where a faux background graphic might be applied here, and it may require another element.

Something else I didn't mention before: as I did not specify a width on #mainContent, a percentage width on #container will make the layout fluid horizontally.

I tried to specify the top and bottom position but it did not work in Firefox 2 (mac version), The box was not stretching. I do not know if I did somthing wrong.

I have now read the webpage explaining the flaux columns and I was wondering the same thing: where to place tha background image. I do not think it is possible to place it inside the main box div because of the margin it has.

Thanks for telling me about the possibility to make the container fluid. I will try that also to see how it looks with the final design of the page. [edit] I already tried it and it looks great. is there a way to specify a minimum width because if you resize the window the box keeps getting smaller and smaller without considering the content.

You seem to have very good fundations in CSS, what is the best place to learn all these things? (any book recommendation? or website?)

I have been doing some more thinking about this layout, and making it vertically dynamic with content should be possible - a bit of playing has been a little frustrating due to IE6's inability to handle simple concepts, but now it intrigues me and is an interesting challenge. Will have more of a look....