homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

nested center table
css div

 6:57 pm on Aug 7, 2008 (gmt 0)

i'm new to css and i don't get how to get the same thing accomplished as i did in creating tables. I've always had a pixel based table nested in a percentage based table and just center it and it always stays in best view. how do i do this with Css div ?



 1:15 am on Aug 8, 2008 (gmt 0)

To center an (block) element, just set the left and right margins to auto: "div.class{margin:0 auto;}". You must also set the width to a value (either relative or absolute), since they take up full width by default.
If you want percentage based widths inside, just set the widths accordingly by percent. Realize that if you are using padding or margins though, those are NOT included in the widths! because of this, you may want to consider just calculating the widths and paddings, instead of using percent. Note: if your padding is in percent as well, then it's not an issue (generally they are done in px or em though)

If you didn't know, to emulate the columns of a table (get block elements beside eachother), one uses the float property. Floats are more flexible than table cells, so it can be quite useful once you understand how to use them. Another method is using display:inline-block, but that is still not entirely supported perfectly.


 1:39 am on Aug 8, 2008 (gmt 0)

ok obviously by the verbage your using i need to verse myself a little more. is there a good resource somewhere i can get totally schooled on divs? i understand the auto margin bit. but these other float property and inline block statments you've made i'm going to research


 6:17 am on Aug 8, 2008 (gmt 0)

If you are going to continue to use tables and just want to make the table center, assign the table a specific width and add to the css margin: 0 auto;

#table1 { /* centers outer table */
width: 800px; /* or whatever works for you */
margin: 0 auto;
#table2 { /*center nested table */
width: 200px;
margin: 0 auto;

<table id="table1">
<table id="table2">

Of course, this is very simplified.



 2:42 pm on Aug 8, 2008 (gmt 0)

i was messing with it last night. and i think i just wanted to knwo to much before i started messing with it. i think when i'm done converting it over from tables to css. i'll show ya what it looks like


 4:40 am on Aug 10, 2008 (gmt 0)

I got myself "CSS Mastery" recently. It's a good reference book and will definately help you advance your CSS. It goes over the basics but is more concerned with the application of CSS in different contexts and it is very sensitive to cross-browser compatibility. It will teach you several hacks and filters if you don't know them. Just go to Amazon and do a search for it!


 10:43 pm on Aug 10, 2008 (gmt 0)

i just bought that book. i'm already subscribed to lynda.com as well. conceptional i understand most everything about css. i just am still having a problem with what kinda of div tags to use, when to use them etc.! like floating , static, all that stuff. Anyone Can put these in laymens terms? Static, relative, absolute, and fixed = anyone for a breif explanation and exmaple of when to use them?


 11:07 pm on Aug 10, 2008 (gmt 0)

You should look at the source code for lynda.com. Might solve that table vs. css argument.



 11:18 pm on Aug 10, 2008 (gmt 0)

I like to use tables but they just went crazy with em...

But, then again, all of these big websites tend to have horrible source code. I'm pretty sure they all use programs to make their sites :/

Of course, they probably wanted those different blocks to be vertically expandable - and that would have been much more of a pain with divs. Of course, they could have just made a table with several rows and only 1 column and made the columns with divs. That would have been the best way. But, w/e...



 11:33 pm on Aug 10, 2008 (gmt 0)

Static, relative, absolute, and fixed = anyone for a breif explanation and exmaple of when to use them?

Well, I've never used static so I don't know about that. But I can cover the others.

when you use this positioning, the object takes up space in the normal flow of the page as if nothing had changed. However, by specifying its left and top attributes, you can move it around from wherever it normally would be positioned. Moving it won't effect the normal flow of the document, and everything else will act as if it hadn't moved - still leaving space for where it would normally be. Objects that are moved will cover up other objects that happen to fall underneath it.
IMPORTANT: objects with an absolute positioning that are inside of objects with a relative positioning will use the top left corner of the relative object as their origin point - (0,0).

Objects that have an absolute position are taken out of the normal flow of the document. They will cover up objects in the normal flow of the document and absolutely positioned objects that were defined before themselves. Using the left and top attributes you can place them wherever you want. This is especially useful when you place absolute objects inside of relative objects - as described above. For example, you can have a main container that it centered withing the document. Then you use absolute positioned objects to setup the different areas of the page (like header, link bar, content area, etc). Because the these absolutely positioned objects are within the relative object - you don't have to use javascript or anything like that to center them within the page.

This is very similar to absolute positioning EXCEPT that they NEVER MOVE. If you scroll the page - these objects will remain in on the screen wherever you put them. You've probably seen these before - though rare. These objects will follow the you up and down the page - often link bars. While highly useful and amusing, they are not well supported. They are ways to make fixed objects without using the fixed positioning, but that's another topic. I don't suggest using these as they are not supported well.


 1:34 am on Aug 11, 2008 (gmt 0)

so what i hear you saying is FIXED is rarely used. and a combination of Relative and absolute are typically used. i'm getting the hang of things as i read and watch. i am trying to create in divs, what i used to in tables. which was a pixel based centered table inside a percentage based table. which i am now doing in divs by creating a 780 wide div with auto margin. (which within dreamweaver i had no selection as to wiether it is a relative or absolute.) An then all the other divs inside that main one are all relative.


 12:46 am on Aug 12, 2008 (gmt 0)

you should still use a table as your outer element - with 100% width and height. Then you can easily center your content div both horizontally AND vertically. Of course, if you just want horizontal centering then there's no need for an outer layer.

Anyways, while learning to use div's is good you should learn how to combine tables and divs to create hybrids. There is some stuff which tables just plain out do better. For example - if you want to have a content area that has dynamic content and could expand vertically - it is much easier to move any elements underneath this area with tables (which does it automatically) vs divs which would require javascript.

It all depends upon what your doing really.


 2:02 am on Aug 12, 2008 (gmt 0)

wouldn't using a auto height on the div tag work if you have dynamic content that sometimes needs more vertical space?


 1:17 am on Aug 13, 2008 (gmt 0)

not if the div tag has position:absolute

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved