CODEWITHSUNDEEP
htmlstyleswidth
eran
eran

Reputation: 41

div : how to changethe width

At first I used a table, but the pages were slowly Then I tried to replace the table and use DIV. Wanted to get six columns and found this code:

<div id="block" style="width:800px">
    <div id="left" style="float:left;width:16.66%;"> left </div>
    <div id="right" style="float:right;width:16.66%;"> right </div>
     <div id="right2" style="float:right;width:16.66%;"> right </div>
     <div id="right2" style="float:right;width:16.66%;"> right </div>
      <div id="right2" style="float:right;width:16.66%;"> right </div>
     <div id="right2" style="float:right;width:16.66%;"> right </div>
</div>

I do not want a fixed width: 800px. But I want to be relatively across the page (look in the same way any resolution)

Upvotes: 0

Views: 60

Answers (2)

emerson.marini
emerson.marini

Reputation: 9348

I've moved the inline styles to a stylesheet, to make your life easier. Using display:table for the parent and display:table-cell for the children, you can spread them evenly, no matter the number of children.

HTML

<div id="block">
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="column">3</div>
    <div class="column">4</div>
    <div class="column">5</div>
    <div class="column">6</div>
</div>

CSS

#block {
    display: table;
    width: 100%;
}
#block div.column {
    display:table-cell;
}

Demo: http://jsfiddle.net/ch2pk/

Upvotes: 2

BenM
BenM

Reputation: 4278

Use a percentage instead if you want it to scale well.

e.g.

<div id="block" style="width:80%">
<div id="left" style="float:left;width:16.66%;"> left </div>
<div id="right" style="float:right;width:16.66%;"> right </div>
 <div id="right2" style="float:right;width:16.66%;"> right </div>
 <div id="right2" style="float:right;width:16.66%;"> right </div>
  <div id="right2" style="float:right;width:16.66%;"> right </div>
 <div id="right2" style="float:right;width:16.66%;"> right </div>
</div>

Upvotes: 1

Related Questions