sheshazam Posted June 28, 2006 Share Posted June 28, 2006 Hi all,Hoped you could help me out. I'm using float to align nested div groups with great success.BUT, when I put in padding it expands the size of the div so that the background image has padding (it does not go to the edge) and the actual div is larger. This wraps the divs and destroys my alignment. <html><head><style type="text/css">body {background-color: #99CCFF;}#center_for_ie{/* this is an IE5 fix. */width: 100%;text-align: center;}#content_area{/* width setting recommended */width: 780px;/* align left to fix the previous IE css bug */text-align: left;/* zero margin top/bottom, auto margin for left/right */margin: 0 auto;}#top{background-image: url('top.jpg');width: 780px;height: 115px;repeat: no-repeat;}#leftside{float: left;}#graybox{background-color: #999999;width: 260;}#graygradient{background: url('graygradient.jpg');width: 260;height: 46;}#feature{}#featuretop{background-image: url('featuretop.jpg');width: 260;height: 32;}#featuremiddle{width: 260;height: 75;}#featurebottom{background-image: url('featurebottom');width: 260;height: 32;}#rightside{float: right;background-color: ffffff;width: 520;height: 300;}#calendarcontent{float: left;}.topic{background-image: url('section.jpg');width: 514;height: 64;margin-left: 6px;text-align: center;}.summary{text-align: left;width: 257px;float: right;border-right: dotted;border-right-color: orange;}.nights{text-align: right;width: 257px;float: right;}</style></head><body> <div id="center_for_ie"><div id="content_area"><div id="top"></div><div id="leftside"> <div id="graybox"><span>The OC Swing Dance Club offeres lindy hop swing dance lessons and night club dances all over the OC.</span> <div id="graygradient"> </div> <div id="feature"> <div id="featuretop">Feature Here</div> <div id="featuremiddle">The Inspiration Weekend is coming later on sometime! Amazing!</div> <div id="featurebottom"></div> </div> </div></div><div id="rightside"> <div id="calendarcontent"> <div class="topic">Classes</div> <div class="nights">Monday<br>Tuesday</div> <div class="summary">Swing Dance Lessons are available almost every night.</div> </div></div></div> <!-- end of content div --></div> <!-- end of ieCenter div --></body></html> Link to comment Share on other sites More sharing options...
sheshazam Posted June 28, 2006 Author Share Posted June 28, 2006 Here is the code above.Im just trying to pad the text inside the div. I've added div {padding: 3px;} to the style area. Link to comment Share on other sites More sharing options...
virtualadz Posted June 28, 2006 Share Posted June 28, 2006 first enter you code in this pattern[ c o d e b o x ] text [ / c o d e b o x ] Link to comment Share on other sites More sharing options...
sheshazam Posted June 28, 2006 Author Share Posted June 28, 2006 Who knew...thank you. I thought that was what the code button would do above and I was disappointed. first enter you code in this pattern[ c o d e b o x ] text [ / c o d e b o x ]<{POST_SNAPBACK}> Link to comment Share on other sites More sharing options...
virtualadz Posted June 28, 2006 Share Posted June 28, 2006 now it's perfect for anyone to view Link to comment Share on other sites More sharing options...
vchris Posted June 29, 2006 Share Posted June 29, 2006 I'm not sure where you added your padding: 3px; code but the way it should be done is: #rightside .summary {padding: 3px;} This should create a padding of 3px within your summary div and should not change the layout of your site.an easy way to do all this at once: #graybox, .topic, .nights, .summary {padding: 3px;} 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