Hi all. I've included a short piece of code which does not do what I want. Obviously removing the "display:inline" will display the boxes, but then they're not on a horizontal plane any more.
I'm trying to create a horizontal bar with four equally space (horizontally) boxes within it, but each box must be at a different vertical position from the one next to it, within the stripe. I realise that I can use images to get the boxes to 'appear', but due to the restrictions of inline elements, I can't position the boxes vertically with margins. Does anyone have an elegant solution to this? So far I've only made it work with absolutes. --------------------------------------------- <!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=utf-8" /> <title>Untitled Document</title> <style> #container { position:relative; background-color:#ffdf79; width:1000px; height:auto; padding:0; margin:0 auto 0 auto; } #bar { position:relative; background-color:red; width:660px; height:119px; padding:0; margin-left:170px; float:left; } .boxup, .boxdown { display:inline; width:80px; height:80px; border:none; padding:0; margin-left:70px; } .boxup { margin-top:15px; background-color:green; } .boxdown { margin-top:25px; background-color:blue; } </style> </head> <body> <div id="container"> <div id="bar"> <div class="boxup"></div> <div class="boxdown"></div> <div class="boxup"></div> <div class="boxdown"></div> </div> </div> </body> </html> --------------------------------------------------- Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch & A-P groups Shopsmith 520 + bits Flatulus Antiquitus ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
