harryd Posted March 10, 2009 Report Share Posted March 10, 2009 Hi all, I am using two columns in my content area; 4 news boxes. How do you position them, so they are equal space between left and right column. In dreamweaver I can use draw layout mode for tables. Any CSS tools, ideas, for positioning. here is my css style #content { float: left; width: 516px; height: 730px; padding: 10px; margin: auto; border: 1px solid #FFFFFF; background-color:#FFFFFF; } .col1, .col2 { float: left; width: 230px; height: 230px; margin: 0px 15px 15px 0px; } .clear: { clear: both; width: 100%; height: 0; visibility: none; } Thanks Quote Link to comment Share on other sites More sharing options...
nathanchilds Posted March 10, 2009 Report Share Posted March 10, 2009 please i could be wrong as i am new but i think i repeat i THINK where you have "float: left" i think you can go say float: left 5px; float right 5px; just try that and see if it works if not i can't help you im new too this all too mate but that seems to make sense to me..sorry i can't help you any further. Quote Link to comment Share on other sites More sharing options...
Wickham Posted March 11, 2009 Report Share Posted March 11, 2009 (edited) You have a #content that is 516px wide, and both inner divs are 230 px wide with a margin on one side of 15px, totalling 490px so if both are float: left they will both be on the left side of #content. Make one float: right; and change the side margin to the other side and you will get a space in the middle. #content { float: left; width: 516px; height: 730px; padding: 10px; margin: auto; border: 1px solid #FFFFFF; background-color:#FFFFFF; } .col1 { float: left; width: 230px; height: 230px; padding: 0 0 15px 15px; /*15px padding on bottom and left*/ /*margin: 0px 0 15px 15px; 15px margin on bottom and left*/ } .col2 { float: right; width: 230px; height: 230px; padding: 0 15px 15px 0px; /*15px padding on right and bottom*/ /*margin: 0px 15px 15px 0px; 15px margin on right and bottom*/ } .clear: { clear: both; width: 100%; height: 0; visibility: none; } IE has a habit of doubling up side margins if on the same side as the float, so I changed the side margins to padding but you could try it as margin. Edited March 11, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
jlhaslip Posted March 11, 2009 Report Share Posted March 11, 2009 http://www.jlhaslip.trap17.com/sm/5wide/5wide.html might want to check that out. Quote Link to comment Share on other sites More sharing options...
harryd Posted March 11, 2009 Author Report Share Posted March 11, 2009 Thanks a lot I will work on your suggestions. I was wondering are there any tricks so I could drag the corners. Dreamweaver has the option for tables are there any short cuts available for css. Thanks again harry Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.