MinusMyThoughts Posted March 21, 2007 Share Posted March 21, 2007 Hey, guys.I'm having a frustrating issue with two divs in a CSS/PHP/HTML layout. I can't seem to get them to align with each other without floating both of them; one to the right, and one to the left.That fix is alright, sorta, but when I try to put another row of divs below it, it causes an alignment issue. You can see it at the link below (the CSS is embedded in the page to allow me to change it with variables from PHP):MY BROKEN LAYOUTSo what I guess I'm asking for is a cross-browser method of getting my two divs (the one containing a name like "Andrew" and the one containing a block of text) to line up properly so that the ones below them will do the same.This whole layout is fed by a set of PHP functions. I fed each database item into a div to format it the way that particular piece should be formatted. If I can get over this hurdle, I'm going to be extremely happy.Thanks for any help you can give me!-Jason Link to comment Share on other sites More sharing options...
jlhaslip Posted March 21, 2007 Share Posted March 21, 2007 Holy divitis, Batman...Div's with Id's can only be specified once per page. There are several Id names being repeated on that page, which might not solve the difficulties, but if you were to convert them to classes, you stand a better chance of fixing them. See the Id for the menu and the "blocks" below that you are worried about. Also, include a Doc Type Declaration for the level of coding you intend to meet for this page. No obvious reason it shouldn't be "strict.Aside from all that, remember that div's are block level items, so they will all have a "new line" or "return" before and after them. Use margins and padding to raise/lower or side shift them to where you want them.First fix the Id and DTD problems. Then post a new link or let us know when you are ready to proceed with the fix.And using PHP in this is in insignificant factor. All the php does is spew out the html code. You still need to style it, and it can just as easily be valid as not. Link to comment Share on other sites More sharing options...
ste Posted March 21, 2007 Share Posted March 21, 2007 try this: <html><!--//************************************************************* // index.php on joyofhealing.com // Created March 20, 2007 by Jason Lengstorf. // // Powered by ennui. Copyright 2007. //*************************************************************//--> <head> <title>Experience the Joy of Healing - About Us</title> <style type=text/css> /* * CSS for www.joyofhealing.com | Powered by ennui. * * Colors, images, and overall layout concept by * SixPennyGraphics. (www.sixpennygraphics.com) * Converted to CSS by ennui. * * Feel free to sample some of this code for your * own site, but please don't rip me off. Links * are greatly appreciated as well. * * Contact me at: jason@ennuidesign.com * On the web: www.ennuidesign.com * */ body { background-color: #978E7B; margin:0px; padding:0px; text-align: center; color:#00008B; font-family:Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; } a:link { color: #CDC8B2; padding:5px; text-decoration:none; font-family:Times New Roman, serif; } a:visited { color: #CDC8B2; padding:5px; text-decoration:none; font-family:Times New Roman, serif; } a:hover { color: #00008B; padding:5px; text-decoration:none; font-family:Times New Roman, serif; } a:active { color: #0008B; padding:5px; text-decoration:none; font-family:Times New Roman, serif; } #menuholder { background-color: #00008B; width:750; min-height:30px; text-decoration:none; line-height:80%; font-size:80%; } #menu a:link, #menu a:visited { background-color: #00008B; min-width:90; max-width:107; height:20px; float:left; text-decoration:none; } #menu a:hover, #menu a:active { background-color: #F6F6B8; min-width:90; max-width:107; height:20px; float:left; text-decoration:none; } #menu a.selected { color:#00008B; background-color: #F6F6B8; min-width:90; max-width:107; height:20px; float:left; text-decoration:none; } #master { background-color: #978E7B; width: 750px; margin: 0px auto; padding:0px; } #header { width:750px; min-height:40px; margin-top:10px; padding:0px; } #body { background: #F6F6B8 url('images/texture-2.jpg') no-repeat top left; width:750px; min-height:360px; padding-top:5px; } #content { width:750px; min-height:430px; text-align:justify; } #footer { width:750px; height:20px; margin:0px; clear:both; } #footertext { color:#FFFFFF; font-size:80%; padding-top:5px; margin:0px; } #footertext a:link,#footertext a:visited,#footertext a:hover,#footertext a:active { color:#FFFFFF; font-family:Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; margin:0; padding:0; } /* Layout rules */ .layoutcontanier { Float: left; } .layoutTitle { width:130px; margin-top:20px; padding:0; font-size:130%; text-align:right; float:left; } #layoutInput { margin:5px 10px 5px 150px; padding:0; font-size:100%; font-weight:900; } #layoutImage { margin:2px; padding:0px; } .layoutTextarea { margin: 20px 10px 5px 10px; width:580px; font-size:85%; float:right; } </style> </head> <body> <div id=master> <div id=header> <img src=images/header2.jpg /> </div> <div id=body> <div id=menuholder> <div id=menu><a href=?id=1 class=none>HOME</a></div><div id=menu><a href=?id=2 class=selected>ABOUT US</a></div><div id=menu><a href=?id=3 class=none>OUR SERVICES</a></div><div id=menu><a href=?id=4 class=none>CLASSES & WORKSHOPS</a></div><div id=menu><a href=?id=5 class=none>PEACE & PRESENCE</a></div><div id=menu><a href=?id=6 class=none>STORIES</a></div><div id=menu><a href=?id=7 class=none>CONTACT US</a></div> </div> <div id=content> <div class="layoutcontanier"> <div class="layoutTitle">Andrew</div> <div class="layoutTextarea">Ethereal healing is the source of energy that is transmitted from the world of spirit to the ethereal body on the physical plane. Countless souls have received this healing energy and attained good health once again. Society has acknowledged and given great respect to wonderful events of remissions that have taken place through instruments within our world -Edgar Casey, Harry Edwards, Olga Worhall, and Arigo - to name a few.</div> </div> <div class="layoutcontanier"> <div class="layoutTitle">Tamara</div> <div class="layoutTextarea">Ethereal healing is the source of energy that is transmitted from the world of spirit to the ethereal body on the physical plane. Countless souls have received this healing energy and attained good health once again. Society has acknowledged and given great respect to wonderful events of remissions that have taken place through instruments within our world -Edgar Casey, Harry Edwards, Olga Worhall, and Arigo - to name a few.</div> </div> <div class="layoutcontanier"> <div class="layoutTitle">Andrew and Tamara's Devotion</div> <div class="layoutTextarea">Ethereal healing is the source of energy that is transmitted from the world of spirit to the ethereal body on the physical plane. Countless souls have received this healing energy and attained good health once again. Society has acknowledged and given great respect to wonderful events of remissions that have taken place through instruments within our world -Edgar Casey, Harry Edwards, Olga Worhall, and Arigo - to name a few.</div> </div> </div> </div> <div id=footer> <p id=footertext>All Content © 2007 Joy of Healing.<br /> Graphic Design and Concepts by <a href=http://www.sixpennygraphics.com target=_blank>SixPennyGraphics</a>. Powered by <a href=http://www.ennuidesign.com target=_blank>ennui</a>. </p> </div> </div> </body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now