Solved

Css formatting of Table inside a nested div

Posted on 2007-12-02
2
2,963 Views
Last Modified: 2009-07-29
Hi,

I am having fun and games with the formatting of a table inside nested divs.  The table contents display shopping cart items.  I have gone for a table because I need the table border grids.  Infact, I need all cells showing a border except the top, right, bottom and left outside borders.  

But back to the problem - the table just doesn't seem to fit inside the div properly unless I use display:inline;within it's css, but when I do, it throws the rest of the css formatting for the table width, borders etc off.  Yet if I leave the display:inline; out, the table width and border formatting displays ok, but it doesn't sit UNDERNEATH the h2 element above dispite being contained within a div (<div class="shop-table-item-container">) which itself has display:inline;

I have tried a number of things here and am getting lost inside my own css.  Sorry if it seems messy.  Here's an example without display:inline; inside the table css: www.thefoodfolk.com/shop-eggs.html  Added to this, there will be a number of sections containing h1, h2 and table content which all need to be wrapped inside a single <form></form>  Anyone still with me - I hope so!!!

Look forward to hearing from you,  happy to consider an incentive for someone who can help me through this (as very time critical).
Tony
skype: tony-charman
0
Comment
Question by:Treder
2 Comments
 
LVL 28

Accepted Solution

by:
TName earned 500 total points
ID: 20392337
Hi, in case I understand you correctly:
have you tried to simply float the table (for instance left), instead of setting it's display to inline?
E.g.:


.shop-table-item-container table {

/*other styles*/

float:left;

}
0
 

Author Comment

by:Treder
ID: 20394684
yup - so simple - many thanks!
0

Featured Post

Back Up Your Microsoft Windows Server®

Back up all your Microsoft Windows Server – on-premises, in remote locations, in private and hybrid clouds. Your entire Windows Server will be backed up in one easy step with patented, block-level disk imaging. We achieve RTOs (recovery time objectives) as low as 15 seconds.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question