0

http://www.guytgunterappliances.com/product-category/shop/

私の #container は現在 width:980px で、私の側はコンテナ div の一番下に配置されています。コンテナ div の右側に浮かせようとしています。270px のサイドバーに合わせてコンテナーの幅を 710px に縮小し、サイドバーをフロートさせました。画像でわかるように、サイドバーが引き伸ばされます。コンテナ div にも適用されます。 ここに画像の説明を入力

サイドバー

*************************************************************************/

#sidebar{

position:relative;

z-index:10;

width:270px;
 display:;

}

#sidebar,

#sidebar a,

#sidebar li,

#sidebar ul,

#sidebar ol{

    color:#787878;

    font-size:12px;
 display:;

}

#sidebar a:hover{

}

#sidebar ul{

    list-style:none;

    padding:0;

    margin:0;

}

    #sidebar ul li.widget{

        margin:0 0 0px 0;

        border:1px solid #fff;

        background: #e6e6e6;

    }

    #sidebar ul li.widget h2{

        font-size:18px;

        padding:13px 18px;

        color:#45494e;

        font-style:normal;

        border:1px solid #cecece;

        border-bottom:1px solid #fff;

    }

        #sidebar ul li ul{

            border:1px solid #cecece;

            border-bottom:none;

        }

            #sidebar ul li ul li{

                border-bottom:1px solid #cecece;

                padding: 10px 18px;

            }

            #sidebar ul li ul li:hover{

                border-bottom:1px solid #cecece;

                padding: 10px 18px;

                background:#eee;

            }

                #sidebar ul li ul li ul{

                    padding:0 0 0 15px;

                    border:none;

                }

                    #sidebar ul li ul li ul li{

                        border-bottom:none;

                        }

            /* TEXT WIDGET */

            #sidebar ul li div.textwidget{

                padding: 10px 18px;

                line-height:1.4em;

                border:1px solid #cecece;

            }

            /* TAG CLOUD */

            #sidebar ul li.widget_tag_cloud div{

                padding: 10px 18px;

                border:1px solid #cecece;

            }

                #sidebar ul li.widget_tag_cloud div a{

                    margin:0 10px 0 0;

                }

            /* CALENDAR */

            #sidebar ul li.widget_calendar{

                border:1px solid #fff;

            }

                #sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar{

                    padding: 10px 18px;

                    width:100%;

                    border:1px solid #cecece;

                    border-top:none;

                }

                    #sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar a{

                        text-decoration: underline;

                    }

                    #sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar caption{

                        padding: 5px 18px 0 18px;

                        border:1px solid #cecece;

                        border-bottom:none;

                    }

                    #sidebar ul li.widget_calendar #calendar_wrap table#wp-calendar tr td#next{

                    text-align:right;

                    }

/************************************************************************

#  SIDEBAR END
4

2 に答える 2

0

そうしてみてください：

#sidebar {
  width:270px;
  display: block;
  dloat: left;
}
于 2013-10-10T16:49:09.833 に答える