Geek Answers Handbook

Trying to use width: 100% so the table expands relative to window size, creates unwanted space?

I am trying to create a website that will adjust the cell size of the table of table elements relative to the size of the window so that it will always fit inside the window. Here is what I have:

<div class="table">
        <div class="tablecell"><image src="fb.png"></div>
        <div class="tablecell"><image src="twitter.png"></div>
        <div class="tablecell"><image src="youtube.png"></div>
        <div class="tablecell"><image src="apple.png"></div>
        <div class="tablecell"><image src="email.png"></div>
    </div>

And the next CSS

     .table {
         display:table;
         margin-right:auto;
         margin-left:auto;
         width:100%;
         }

         .tablecell {
         display:table-cell;
         }

What is this width: 100% ... Here is a picture of the results. I circled the problem area in blue. Ignore the face of Soulja Boy.

http://imgur.com/uhgbLoP

Basically, I just want it to be correct so that the youtube image is in the middle of the page. A space created using width: 100% prevents this, but I want to use this or a similar property so that the table is always inside the window.

+3
2

, , . text-align: center;, :

     .table {
         display:table;
         margin-right:auto;
         margin-left:auto;
         width:100%;
     }

     .tablecell {
         display:table-cell;
         text-align:center;
     }

jsFiddle: http://jsfiddle.net/q73LK/

. :

     .table {
         display:table;
         margin-right:auto;
         margin-left:auto;
         width:100%;
     }

     .table div {
         display:table-cell;
         text-align:center;
     }

"alt". HTML "alt". :

<div class="table">
    <div class="tablecell"><image alt="fb" src="fb.png"/></div>
    <div class="tablecell"><image alt="twitter" src="twitter.png"/></div>
    <div class="tablecell"><image alt="youtube" src="youtube.png"/></div>
    <div class="tablecell"><image alt="apple" src="apple.png"/></div>
    <div class="tablecell"><image alt="email" src="email.png"/></div>
</div>
+3

, .

: http://jsfiddle.net/CzaK5/

text-align:center; .tablecell.

: .

+1

More articles:


All Articles