Hello, I am trying to align the table designed with div tag in center/middle. I know that it can be done with margin:0px auto; but in my case it is not working .html coding <html> <head> <title> CSS Webpage </title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="container"> <div style="background-color:#4aa127;font-weight:bold;">Company</div> <div style="background-color:#4aa127;font-weight:bold;">Contact</div> <div style="background-color:#4aa127;font-weight:bold;">Country</div> <div class="clear background">Wipro</div> <div class="background">Delhi</div> <div class="background">India</div> <div class="clear background_alt">Wipro</div> <div class="background_alt">Delhi</div> <div class="background_alt">India</div> <div class="clear background">Wipro</div> <div class="background">Delhi</div> <div class="background">India</div> <div class="clear background_alt">Wipro</div> <div class="background_alt">Delhi</div> <div class="background_alt">India</div> <div class="clear background">Wipro</div> <div class="background">Delhi</div> <div class="background">India</div> <div class="clear background_alt">Wipro</div> <div class="background_alt">Delhi</div> <div class="background_alt">India</div> </div> </body> </html> HTML: and .css coding is div { height:30px; width:150px; float:left; line-height:30px; } .container { width:500px; margin:0px auto; } .clear { clear:both; } .background { background-color:#fdfdfd; } .background_alt { background-color:#bbe6a4; } HTML: Thanks
Well this one's interesting because unlike most people using tables on non-tabular data - you seem to be using DIV on tabular data - so the correct tag set would in fact be a table. You cannot center floats -- ever. Doesn't work. If you want to center them you would need to set the width of .container and center that, NOT the DIV. In this case you're inner DIV float setting is inheriting to container. that first "DIV {}" in your CSS should probably be ".container DIV {}" But really that train wreck of presentational classes and replicating a tables behavior on tabular data... just use a table. (the OPPOSITE of what I tell most people when they have tables)... this is especially true since you have obvious headings, and a floated stack like you are trying to say would in fact have NO semantics -- after all semantic markup is about saying what things are, and DIV is semantically neutral (has no semantic meaning). BECAUSE the headings of each column have a semantic relationship to the column, and the first column seems to be descriptors for each row, that's tabular data -- it SHOULD be in a table with SCOPE setting your relationships. <table class="companyInfo"> <thead> <tr> <th scope="col">Company</th> <th scope="col">Contact</th> <th scope="col">Country</th> </tr> </thead><tbody> <tr> <th scope="row">Wipro</th> <td>Delhi</td> <td>India</td> </tr><tr class="even"> <th scope="row">Wipro</th> <td>Delhi</td> <td>India</td> </tr><tr> <th scope="row">Wipro</th> <td>Delhi</td> <td>India</td> </tr><tr class="even"> <th scope="row">Wipro</th> <td>Delhi</td> <td>India</td> </tr><tr> <th scope="row">Wipro</th> <td>Delhi</td> <td>India</td> </tr><tr class="even"> <th scope="row">Wipro</th> <td>Delhi</td> <td>India</td> </tr> </tbody> </table> Code (markup): Making the CSS really easy: .companyInfo { width:500px; margin: 0 auto; border-collapse:collapse; } .companyInfo th, .companyInfo td { text-align:left; padding:0.2em 0.5em; } .companyInfo thead th { background:#4AA127; } .companyInfo tbody th { font-weight:normal; } .companyInfo tbody tr th, .companyInfo tbody tr td { background:#FDFDFD; } .companyInfo tbody tr.even th, .companyInfo tbody tr.even td { background:#BBE6A4; } Code (markup): Not sure why you'd even be using DIV for that type of data, unless you bought into the 'tables are evil' and 'never use tables' lie. That's not "tables for layout" (which you shouldn't ever do), that's using tables for what they are meant for.
Check the bellow code, you should remove float:left in style of div, or use float:none in container class. example div { height:30px; width:150px; line-height:30px; } or div { height:30px; width:150px; float:left; line-height:30px; } .container { width:500px; margin:0px auto; float:none; } Hope this help you
@deathshadow as a learner / beginner one always try to play with the code and somewhere i read that div tag can be used to make a table so i thought why not play with div tag to make a table I respect your opinions and totally agree with you but i questioned it because i wanted to learn something about div @Nick thanks it worked when i set float:none; in the container tag .
Really for that you have to ask -- do you REALLY want to set that width, height and all those other values on EVERY DIV on the page? You only want to hit the child ones, so your CSS selectors are reversed... use the normal child selector so you can float the kids without having to override values on the parent. I'd also suggest using an extra container INSTEAD of using a 'clear' class... things like 'clear' or 'background' are presentation -- as such they have no business in your HTML. Markup: <div class="container"> <div class="row header"> <div>Company</div> <div>Contact</div> <div>Country</div> <!-- .row.header --></div> <div class="row"> <div>Wipro</div> <div>Delhi</div> <div>India</div> <!-- .row --></div> <div class="row even"> <div>Wipro</div> <div>Delhi</div> <div>India</div> <!-- .row --></div> <div class="row"> <div>Wipro</div> <div>Delhi</div> <div>India</div> <!-- .row --></div> <div class="row even"> <div>Wipro</div> <div>Delhi</div> <div>India</div> <!-- .row --></div> <div class="row"> <div>Wipro</div> <div>Delhi</div> <div>India</div> <!-- .row --></div> <div class="row even"> <div>Wipro</div> <div>Delhi</div> <div>India</div> <!-- .row --></div> <!-- #container --></div> Code (markup): CSS: .container { width:500px; margin:0px auto; } .container .row { overflow:hidden; /* wraps floats */ zoom:1; /* trips haslayout, wraps floats IE */ } .container div div { float:left; width:150px; height:30px; line-height:30px; background:#FDFDFD; } .container .header div { font-weight:bold; background:#4AA127; } .container .even div { background:#BBE6A4; } Code (markup): When you want to do things like columns or just CSS in general it helps to understand inheritance and 'specificity' -- the order in which CSS properties are applied. The simplest selector -- child selectors -- separating target elements by spaces -- allows you to target elements inside others, making sure you don't target elements you don't want to. It's the cornerstone of most every CSS layout.
^^ seems like i will learn a lot from you ........ definitely your suggestions will help me a lot and my next query is why both of the code (either table or div) are not setting the table/div into the middle/center in IE ??
Do you have a 'doctype' before your <html> tag? If not IE is in 'quirks mode' which means it behaves on an entirely different set of layout rules from every other browser out there. This comes from Microsoft implementing CSS 2 before either specification was complete on IE5... when the specification changed, they were stuck trying to decide between telling millions of websites that they'd now be broken, or find some way to 'trigger' the new behavior. Since most sites were still written without a doctype using HTML 3.2, the doctype was chosen as a trigger. I suggest either HTML 4 Strict or XHTML 1.0 Strict as your document type. HTML 5 is NOT IMHO ready for prime time despite the ignorant fools who go "ooh shiny" or use it as a sick buzzword akin to "web 2.0" claiming otherwise. The official list of doctypes is here: http://www.w3.org/QA/2002/04/valid-dtd-list.html 99.9% certain that's what would cause IE not to center based on auto margins -- beware IE5 will NEVER do that as it predates 'standards mode'. (Not that ANYONE cares about IE5 anymore)