Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Trying to put a tabel in a division

Posted on 2013-07-01
9
217 Views
Last Modified: 2013-07-03
I am trying to put a table inside a division, the table has 3 cols
col1 and col3 being 100px with the remaining  wider center column in the center.
The style for the table was fine until i put into this division.
I am trying to make it look like attachment. After attempting to adjust the floats it is no longer in the division and the table has lost their widths
How can i fix this:

http://roofgenius.com/test3.asp
Books.jpg
0
Comment
Question by:isnoend2001
  • 4
  • 3
  • 2
9 Comments
 

Author Comment

by:isnoend2001
ID: 39292124
I have manage to get the table inside the division red border, but the table cells are not the correct size
0
 
LVL 27

Accepted Solution

by:
skullnobrains earned 250 total points
ID: 39292315
actually this is pretty much a pain to work this out cross browser in css

if your div has a known width, which seems to be the case, you can give a width to the middle column. if not, it will only work roperly if your middle column actually has enough content to make it wide enough. this may not be an issue since you'd only need one of the rows to contain that much data to fix it all. you can use a placeholder for that as well.

other than that, you'll have to resort to absolute positioning for the left and right cols, and use 100px margins for the inner one to prevent overlaps.
0
 
LVL 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 250 total points
ID: 39292710
Couple of options here. Either give your table a fixed width (about 620px seem to do the trick), or separate the table from ads. Float one left and one right - they won't clash then.
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 

Author Closing Comment

by:isnoend2001
ID: 39293924
Thanks
I tried floating them left and right and it did not work. I was probably doing something wrong.
I used absolute positioning
0
 
LVL 27

Expert Comment

by:skullnobrains
ID: 39296549
this is normal : floating stuff left and right at the same time just does not work or at least does not in a cross-browser fashion. the only simple way that does work cross-browser when it comes to left+right positioning inside an element that has no specific size or position is to combine float:left for the inner left element and text-align:right for the parent element, but it is uselessly complicated in this case.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39296644
floating stuff left and right at the same time just does not work

really! first I've heard of it ;)
0
 
LVL 27

Expert Comment

by:skullnobrains
ID: 39296876
sorry, the comment was a bit harsh. no hard feelings on my side.

they actualy do not in some browsers (guess which) : one of the float will end up below the other one like this

|                                      float right stuff |
|                                            second line |
|float left stuff                                         |
|                                                               |

Open in new window


even if you play as much as you can with clear and make sure the width are small enough and they do not overlap

i pretty much agree the corresponding browser implementations are weird at best

correcting with position:absolute works as far as i remember but messes up some other browsers since the float gets ignored.
0
 

Author Comment

by:isnoend2001
ID: 39297243
Got it to work with absolute positioning
Had to add this to container:
position: relative;

http://roofgenius.com/test3.asp
0
 
LVL 27

Expert Comment

by:skullnobrains
ID: 39297941
nice and clean ! and i did not even know this would work using an absolutely positionned table (my suggestion actually implied using divs)

thanks a lot for posting back

best regards
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
FIELDSETs and LEGENDs in email markup 1 29
Why my select dropdown does not work? 8 46
Add image to into animation on website template 1 34
How to make a moving character 3 68
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

860 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