Hi everyone, I have a 3 column layout (xhtml and css code below) where I've added round corners to the middle and right columns. I'm hoping to add round corners to all four sides of the left column also. The problem is that the height of the columns are all uneven due to differing amounts of content, which will continue to vary as I add and change content. If I kept the left column with square bottom left and right corners, I could possibly insert a repeating image in the wrapper div, but that wouldn't take care of the middle and right columns which both have the round edges on all four corners. Is there any way possible to achieve the even columns if I want to use the round corners - or have I created an impossible layout? Really appreciate any help offered. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Untitled</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> </div> <div id="navtop"> <ul> <li><a href="#" id="home">Home</a></li> <li><a href="#">About us</a></li> <li><a href="#">Partners</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Feedback</a></li> <li><a href="#">Online store</a></li> </ul> </div> <div id="enclose"> <div id="columnMain"> <div class="t"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tl"><div class="tr"> <h1>Heading</h1> <p>Qui ratione voluptatem sequi nesciunt. Excepturi sint occaecati cupiditate non provident, nemo enim ipsam voluptatem et aut officiis debitis aut rerum necessitatibus. Et quasi architecto beatae vitae quo voluptas nulla pariatur? Aut odit aut fugit, sed quia non numquam eius modi similique sunt in culpa qui officia deserunt mollitia animi.</p> <p>Qui ratione voluptatem sequi nesciunt. Excepturi sint occaecati cupiditate non provident, nemo enim ipsam voluptatem et aut officiis debitis aut rerum necessitatibus.</p> <p id="mainimg"><a href="#"><img src="images/voucher.jpg" alt="" id="voucher" /> </a><a href="#"><img src="images/meta.jpg" alt="" /> </a></p> </div></div></div></div></div></div></div></div> </div> <div id="columnLeft"> <img src="images/therapies.jpg" alt="therapies image" /> <ul><li><a href="#">Iridology</a></li> <li><a href="#">Herbal Medicine</a></li> <li><a href="#">Nutritional Medicine</a></li> <li><a href="#">NAET</a></li> <li><a href="#">Massage</a></li> <li><a href="#">Reiki</a></li> <li><a href="#">Gestalt Therapy</a></li> <li><a href="#">Bach Flower Remedies</a></li></ul> </div> </div> <div id="columnRight"> <div class="t"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tlsolid"><div class="trsolid"> <p id="tip">Et quasi architecto beatae vitae quo voluptas nulla pariatur? Aut odit aut fugit, sed quia non numquam eius modi similique sunt in culpa qui officia deserunt.</p> <p><h2>Sign up to our<br /> Seasonal Newsletter</h2> </p> <form action="" method="post"> <fieldset> <ol> <li><label for="Name">Name</label> <input class="text" id="Name" name="Name" type="text" /></li> <li><label for="Email">Email</label> <input class="text" id="Email" name="Email" type="text" /></li> </ol> </fieldset> <fieldset class="submit"> <input class="submit" name="Subscribe" type="submit" value="Subscribe" /> </fieldset> </form> </div></div></div></div></div></div></div></div> </div> <div id="footer"> © copyright 2008. All Rights Reserved | Terms and Conditions | Privacy Policy | Contact Us</div> </div> </body> </html> Code (markup): html body { font: 12px/18px Verdana, Arial, Helvetica, sans-serif; color: #999999; background-color:#634A95; text-align: center; padding: 0; margin-top: 50px; } p, td, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6 { font: 12px/18px Verdana, Arial, Helvetica, sans-serif; text-align: left; } /*-------------------------------PAGE STRUCTURE STYLES-------------------------------*/ #frame { width: 750px; height: auto; background-color: #fff; margin: 0 auto 0; position: relative; text-align: center; } #header { width: 750px; height: 175px; background-image:url(../images/hthLogo.gif); background-repeat: no-repeat; background-color: #979492; background-position: 30px center; } #navtop { height: 26px; background-color: #000; } #columnMain { float: right; width: 408px; height: auto; padding: 0; margin: 0; background-color: #fff; text-align: center; } p#mainimg { height: auto; margin-top: 50px; text-align: center; } p#mainimg img#voucher { padding-right: 30px; } #columnLeft { float: left; width: 150px; height: auto; background-color: #634A95; } #columnRight { float: right; width: 148px; height: auto; background-color: #fff; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; background-image: url(../images/healthtip.jpg); background-repeat: no-repeat; background-position: left top; } #columnRight p#tip { width: auto; height: auto; margin: 0 1em 0; padding: 6em 0 0; color: #634A95; } #columnRight p { padding: 0 1em 0; margin: 0; } #columnRight h2 { margin: 2em 1em 0; padding-top: 0.5em; color: #634A95; font-weight: bold; font: bold 10px/14px Verdana, Arial, Helvetica, sans-serif; border-top: 1px dotted #634A95; } #enclose { float: left; width: 570px; padding: 10px; } #footer { clear: both; padding-top: 15px; text-align: center; background-color: #634A95; font: 10px/18px; } h1 { font-size: 16px; font-weight: bold; color: #634A95; padding-bottom: 5px; margin-right: 10px; background-image: url(../images/dotty.gif); background-repeat: repeat-x; background-position: left bottom; } /*-------------------------------HEALTH TIP STYLES-------------------------------*/ h1#health { background-image: none; } /*-------------------------------TOP NAVIGATION STYLES-------------------------------*/ #navtop ul { list-style: none; margin: 0 0 0 300px; padding: 0; width: 660px; } #navtop li { display: inline; float: left; } #navtop a:link, #navtop a:visited { font-size: 85%; display: block; padding: 0.4em 1em 0.4em 1em; color: #fff; text-decoration: none; } #navtop a:link#home, #navtop a:visited#home { background-image: none; } #navtop a:hover { color: #634A95; } /*-------------------------------LEFT NAVIGATION STYLES-------------------------------*/ #columnLeft ul { list-style: none; margin: 0; padding: 0; } #columnLeft li { border-bottom: 1px dotted #fff; margin: 0 0.5em 0em 0.5em; } #columnLeft li a:link, #columnLeft li a:visited { font-size: 85%; display: block; padding: 0.6em 0 0.6em 0em; background-color: #634A95; color: #FFFFFF; text-decoration: none; background-image: url(../images/arrow.gif); background-repeat: no-repeat; background-position: 125px center; } #columnLeft li a:hover { background-color: #9790B9; color: #FFFFFF; background-image: url(../images/arrowrollover.gif); } /*-------------------------------ROUND CORNER STYLES-------------------------------*/ .t { background: url(../images/dot.gif) 0 0 repeat-x;; } .b { background: url(../images/dot.gif) 0 100% repeat-x; } .l { background: url(../images/dot.gif) 0 0 repeat-y; } .r { background: url(../images/dot.gif) 100% 0 repeat-y; } .bl { background: url(../images/bl.gif) 0 100% no-repeat; } .br { background: url(../images/br.gif) 100% 100% no-repeat; } .tl { background: url(../images/tl.gif) 0 0 no-repeat; } .tr { background: url(../images/tr.gif) 100% 0 no-repeat; padding:10px; } .tlsolid { background: url(../images/tlsolid.gif) 0 0 no-repeat; } .trsolid { background: url(../images/trsolid.gif) 100% 0 no-repeat; } Code (markup):
Create a graphic for the head that has all 3 columns. Create another graphic for the center thta has all 3 columns. Create a single graphic for the bottom that has all 3 columns. Create a container to hold all 3 columns. Start with the head, then tile the middle and end with the foot. Now add 3 containers for your content. No matter which one is the longest, the 3 column background image will fill the space. This works for fixed width containers only. For both fluid width and fluid height use a table for the container and individual graphics for each corner and each edge. Tile both directions as needed.
Oooh, nice one. If the top rounded corners image is held by the header, and the bottom part by the footer, then the middle can indeed have the repeater. Since you've got divs for each corner though, it does indeed seem like this is a flex-width setup. CSS can do widths fine, but they can't do 100% height with floats, so even though we all rant about tables for layout, qube's right, this is one of those few set-ups where a table is the least amount of code to do the job. If you're interested, there's another manner of rounded corners that's a bit less code... infact, it's a pure-code solution, no images, which, depending on the effect you want, might do the same job. http://battletech.hopto.org/html_tutorials/rounded_css_borders/ deathshadow's page with one method, which I've used for rounded tops alone with excellent results. It adds <b> tags to your html, but that's no less semantic than the div class="t" etc going on now, and with less server handshakes like there is now for each of those little dot images.
Thanks for the replies, The layout is in fact fixed width but fluid height. I understand how to make the three graphics, though not sure how high they should be? Also does this mean that I need to get rid of the existing divs/images that make up the corners? Do I insert the top image in the container as an img tag, then tile the middle using the css background property? If so, how do I insert the bottom image in the foot since there are no more hooks? Can I use my exisiting divs, ie. columnMain, columnLeft and columnRight as the containers for the content?
If the columns are fixed width, yeah. Your header (or if you have something 100% under the header) would have this little graphic, 100% wide but only long enough to have the tops, rounded corners and a bit of the sides starting. You could do the top as an image, but since this is a presentational image (for looks basically) it's better if you can stuff it in someone's background. If there just aren't any elements to be a hook for the top image... nah, I would still try to set it in the background, even if I had to have a double-wrap around the middle/content part). The footer again would have the bottom, but if it's already got a background image too... well, you then have the same situation... and I would still try to find a way to have it in the background. An img sitting in the HTML isn't content, plus it will be an element which can push other stuff further beneath it if it moves around. Yeah, you should be able to. They could possibly hold seperate top graphics instead of the header holding them (each column having a piece of the top I mean), their container could have the tiled middle... but they could NOT hold the bottom as this is your original problem, they won't stretch down to the footer on their own. Hmm, you could do the double-wrap, have each of your three columns hold the top images, the inner wrap holding the tiled middle, and the outer wrap holding the bottom image. <div id="outer"> <div id="inner"> <div id="columnMain">stuff</div> <div id="columnLeft">stuff</div> <div id="columnRight">stuff</div> </div> </div> And the inner would have some bottom margin OR the outer would have some bottom padding to make room for the bottom graphic. *edit ah, looking at your code, you've already got #enclose, so you'd either wrap that in another div, or have it enclose the other div which still wraps around the three columns.