ansaurus

Question

Answer 1

A:

Here's how to do it (Scroll to MidiMagic's post): http://www.daniweb.com/forums/thread57605.html

Sidharth Panwar 2010-09-07 19:36:24

this seems to explain how to center objects in a div which i've already managed to do. I'm worried about the case where my content grows larger than its parent div and seems to prefer to grow out the right of the parent div rather than proportionally

WebDude 2010-09-07 20:06:38

Answer 2

A:

You need to wrap words in div#content.

You can use something like this:

div#content {
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera 4 - 6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3  */
word-wrap: break-word; /* IE 5.5+ */
}

Vikash 2010-09-07 19:38:49

how does this affect tables?

WebDude 2010-09-07 19:43:40

You need to wrap the words in "td". you should also use `table-layout: fixed`

Vikash 2010-09-07 19:50:11

but this isn't only about text, it's about table width. I will update my post, but replace the content with table with a width of 800px and see how it touches the left border of the content div but pushes out the right border

WebDude 2010-09-07 19:58:38

If you set `table-layout: fixed` property for the table and provide width in "td", the table will not resize automatically.

Vikash 2010-09-08 05:56:18

unfortunately these tables are generated by a third party library based on database queries so there width cannot be fixed

WebDude 2010-09-08 08:29:23

If you can change the CSS, then you can set the width.

Vikash 2010-09-08 08:36:37

Answer 3

A:

Someone who is not a member on this site managed to solve this problem for me.
What we did is set the content div to 100%, then place a div inside this surrounding the content with align="center"

<div align="center"><table border="1" width="1000px" ><tr><td>here is some content</td></tr></table></div>

The entire solution:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
        <style> 
            body{margin-top: 10; margin-bottom: 0; margin-left: 0; margin-right: 0; padding:0 0 0 0;} 
            #main{width: 100%; margin: auto auto;min-height:100%;} 
            #header{width: 740px;position:relative;margin: auto auto;border: 1px solid #000;border-bottom: none;background-image: url('/resources/images/General/hdr_bg.png');} 
            #nav{width: 100%; text-align: center; height: 31px; margin: auto auto;background-color:#c3daf9;border-top:1px solid #000;border-bottom:1px solid #000;} 
            #content{width: 100%;position:relative;margin: auto auto; padding-top: 10px;border: solid 1px;}
            #footer{position: absolute; font-size: 11px; color: Gray; border-top: 1px solid #303030; bottom: 0px; width: 100%;} 
        </style> 
    </head> 
<body> 
    <div id="main"> 
        <div id="header"><br/>LOGO<br/></div> 
        <div id="nav">LINK | LINK | LINK</div> 
        <div id="content">
            <div align="center"><table border="1" width="1000px" ><tr><td>here is some content</td></tr></table></div>
        </div> 
        <div id="footer">footer content</div> 
    </div> 
</body>

WebDude 2010-09-08 08:27:47

..I was just going to suggest this. Seriously :D

Litso 2010-09-08 08:30:10

What happened to the long-word scenario? Type a very very long word (larger than 1000 px) and then watch what happens.

Vikash 2010-09-08 08:37:26

@vikash this still works perfectly. Swap the centered div with the following and it still remains in the center like i wanted: "<div align="center">here is sooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooome content</div> "

WebDude 2010-09-12 18:11:02

ansaurus

tags:

views:

answers:

simple open div layout

related questions