<!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>sidebyside</title> <style type="text/css"> .div01 {width:50%;} .div02 {position: relitive; display: block;} ul_left {} ul_right {} li {list-style-type: none;} </style> </head> <body> <div class="div01"> <div class="div02"> <ul id="ul_left"> <li><a href="left.html">left</a></li> <li><a href="left.html">left</a></li> <li><a href="left.html">left</a></li> </ul> <ul id="ul_right"> <li><a href="right.html">right</a></li> <li><a href="right.html">right</a></li> <li><a href="right.html">right</a></li> </ul> </div> </div> </body> </html> HTML:
<style type="text/css"> .div01 {width:50%;} .div02 {position: relitive; display: block;} ul_left {float:left; width:25%;} ul_right {float:right; width:25%;} li {list-style-type: none;} </style> Code (markup): i would change width to pixels and 50% to the correct pixels it needs to have. then split that into 2 halfs for each UL. also add some padding like ul_left {padding: 0 5px 0 0;}
You must be joking - nobody writes code like this! For what its worth, this is how its done: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>sidebyside</title> <style type="text/css"> .total-area { font-family: Arial, Helvetica, sans-serif; font-size: 14px; background-color: #FFCCFF; width: 300px; margin-right: auto; margin-left: auto; height: auto; } .left-area { background-color: #FFCC00; float: left; height: auto; width: 149px; } .right-area { background-color: #FFCC00; float: right; height: auto; width: 149px; } li {list-style-type: none;} </style> </head> <body> <div class="total-area"> <div class="left-area"> <ul> <li><a href="left.html">left</a></li> <li><a href="left.html">left</a></li> <li><a href="left.html">left</a></li> </ul> </div> <div class="right-area"> <ul> <li><a href="right.html">right</a></li> <li><a href="right.html">right</a></li> <li><a href="right.html">right</a></li> </ul> </div> </div> </body> </html> HTML: I have had a look at some of your earlier posts - what are you up to?
Thanks for your response. I copied everything you changed and did what you said, but I see no change in the way the lists are displayed. Did you test your changes or is there something I still need to know to make this work. I am fairly new at xhtml and css.
I am sorry. I posted this at the same time you were posting your first one. I could not get wounded1987 code to work for me. Your code did work. I will have to study it in a little while, I have to leave now. Thanks so much for your help.
Not 100% true. people write codes like this, else you wouldn't have seen this, isn't it? . From my observation many of the coder get away though writing junk in the name of code as client not bother what's happening in backstage it's the visual appearance most important and what also more appealing is less hole in the pocket to get this done. Unimaginable, out there one can expect a custom psd design+ coding to be done just for $20 USD and they get designer/coders as well and i guess I don't have to mentioned about the outcome.