Geek Answers Handbook

Need a generic css div that doesn't overlap (e.g. table)

I am trying to use divs instead of tables to create fields around my content. The content can be of any size and should allow the browser to resize to any degree . The background color and border need to contain content . This works great with tables. How to make a div work the same?

Note. I added "_" because my inextricable spaces were lost.

Page example

Image example

alt text http://www.c3o.com/div-like-table.JPG

Content:

<style type="text/css">
    div.box, table.box
    {
        padding: 10px 1000px 10px 10px;
    }

    div.box-header, td.box-header
    {
        border:  solid  1px  #BBBBBB ;
        font-size: larger;
        padding: 4px;
        background-color: #DDDDDD;
    }   

    div.box-body, td.box-body
    {
        padding: 6px;
        border:  solid  1px  #BBBBBB ;
        border-top: none;
    }
</style>


<div class="box">
    <div class="box-header">please_help_make_these_divs_stop_overlapping</div>
    <div class="box-body">please_help_make_these_divs_stop_overlapping</div>
</div>

<table class="box" width="100%" cellpadding="0" cellspacing="0">
    <tr><td class="box-header">tables_make_good_containers_tables_make_good</td></tr>
    <tr><td class="box-body">tables_make_good_containers_tables_make_good</td></tr>
</table>
+5
source share
7 answers

, crossbrowser, .

, firefox , div

display:table;
display:table-row;
display:table-cell;

, divs . . Wether, , .

. , min-width overflow: auto;

+2

, :

div.box div {
  overflow: hidden;
  zoom: 1; /* trigger haslayout for ie */
}

, , giveupandusetables.com.

+2

, . float: left; , . : both; -, . , clear .

, . , , . - , .

SO.

0

( , ie7)

div.box{
  float:left;
  width:auto;
  margin: 10px 1000px 10px 10px;
}

div.box-header{
  float:left;
  width:100%;
  border:  solid  1px  #BBBBBB ;
  font-size: larger;
  padding: 4px; 
  background-color: #DDDDDD;
}

div.box-body{
  clear:left;
  float:left;
  width:100%; 
  padding: 4px; 
  border:  solid  1px  #BBBBBB ; 
  border-top: none;
}

. .

0

-, . - , . "" , , , , CSS.

, :

<style type="text/css">
    * {
    margin:0px;
    padding:0px;
    }
.box {
border: solid 1px #BBBBBB;
margin:10px;
}
.box h3 {
padding: 4px;
border-bottom: solid 1px #BBBBBB;
background-color: #DDDDDD;
}
.box p {
padding: 6px;
}
</style>

<div class='box'>
    <h3>please help make these divs stop overlapping</h3>
    <p>please help make these divs stop overlapping</p>
</div>

- CSS Zen Mastery: o)

0

, , , . , :

<style type="text/css">
    div.box, table.box
    {
        margin: 10px 1000px 10px 10px;
        border:  solid  1px  #BBBBBB ;
       padding: 0px;
    }

    div.box-header, td.box-header
    {

        font-size: larger;
        padding: 4px;
        background-color: #DDDDDD;
    border-bottom:  solid  1px  #BBBBBB ;

    }   

    .box-body, td.box-body
    {
        padding: 6px;
    }
</style>

, .

0

I had this problem also using Firefox 6.0.1, Opera 10.62, Safari 5.1, but not in IE 9, but overflow: automatically fixing it in all browsers. Nothing else. I also tried to overflow: contain, which also fixed the problem, but it seems that contain is not a valid value for overflow, so I assume that, since the value is invalid, it was replaced automatically.

0
source

More articles:


All Articles