hi i am making a template for DataLif CMS bu i am having a problem. My layout is 3 columns. the right and left column are good but the middle is all messed up in internet explorer 6 and 7 only. WHAT CAN I DO? Please tell me the design works great on firefox, safari, and ie8 screenshot in attachment. css is: .left { float: left; padding: 0px 10px 0px 0px; width: 197; } .middle { top: 10px; margin-left: 200px; margin-right: 189px; width: 615px; float:none; max-width: 618px; } .right { float: right; padding: 0px 0px 0px 10px; width: 189px; } ---------------------------------------- WHats wrong!
Try floating the middle column left. Do you have a link to see it online? You may need to reduce your margins too otherwise the width may be too much.
I agree with diwebdesign, usually you should do a display: block and float: left to get everything pressing up against each other and floated the same way. if you have three columns in a container they should all have a width set and then floated left
In most cases, when you're working with three columns, you do the following: 1. Create a container that equals the full width of your three columns, including the space between. 2. You float the left column to the left. 3. You float the middle column to the left and add a left margin to space it from the left column. 4. You float the right column to the right.
i am not that good so can someone tell me how to float the middle column to the left and think link to my site is http://lavna.com
assign an ID to each column. For example <div id="container"> <div id="col_left></div> <div id="col_middle></div> <div id="col_right></div> </div> then your respective CSS will be #col_left { display: block; float: left; } #col_middle { display: block; float: left; } #col_right { display: block; float: right; } This excludes all other CSS parameters that will be required like width
@Progg the code you just gave me does not work can you give me a css code that has the left column as 197 px, the middle as 615 px and the right as 189 px please