固定宽度，2列CSS布局问题 [英] fixed width, 2 column CSS layout problem
问题描述
我正在处理的页面是 http：// www .coldpizzasoftware.com / temp / layout.html
我试图让黄色边栏进入右边的白色区域
绿色内容区域和蓝色页眉和页脚之间。
有人知道该怎么办吗？
我知道我可以添加浮点数：左;内容div和它的工作，
，但它似乎也不正确。在这种情况下，内容div和
边栏div将不再保留在他们的容器中，页面div，
而不是它们将与容器的底部重叠。 br />
我已经阅读了这个新闻组中的几个类似的主题但仍然无法确定
。我也搜索了一个解决方案，我找到了几个
的CSS布局示例，但没有一个类似于我想要的b
。我知道有几个使用类似布局的网站我已经尝试将它们剥离到裸骨布局，但每次我都会尝试我b $ b 搞砸了。
The page I''m working on is at http://www.coldpizzasoftware.com/temp/layout.html
I trying to get the yellow sidebar to go in the white area to the right
of the green content area and between the blue header and footer. Does
anyone know how to do?
I know I can add float: left; to the content div and it sort of works,
but it doesn''t seem right either. In this case the content div and the
side bar div will no longer stay in their container, the page div,
instead they will overlap the bottom of their container.
I''ve read several similar threads on this newsgroup and still can''t
figure it out. I''ve googled for a solution too, and I''ve found several
examples CSS layouts, but none that are similar enough to what I''m
attempting. I know of several sites that use a similar layout and I''ve
tried stripping them down to the bare bones layout, but each time I''ve
tried I''ve screw it up.
推荐答案
Ed写道：
我正在工作的页面on at
http://www.coldpizzasoftware.com/temp /layout.html
我试图让黄色侧边栏进入绿色内容区域右边的白色区域以及蓝色页眉和页脚之间。有没有人知道怎么做？
The page I''m working on is at
http://www.coldpizzasoftware.com/temp/layout.html
I trying to get the yellow sidebar to go in the white area to the right
of the green content area and between the blue header and footer. Does
anyone know how to do?
替换：
#sidebar {
background-color：lightyellow;
边框：薄实灰色;
位置：绝对;
左：自动;
右：0;
宽度：210px;
}
附：
#sidebar {
background-color：lightyellow;
border：thin solid grey;
宽度：210px;
float：right;
}
-
jmm dash list（at）sohnen-moe（dot）com
（删除.AXSPAMGN电子邮件）
Replace:
#sidebar {
background-color: lightyellow;
border: thin solid gray;
position: absolute;
left: auto;
right:0;
width: 210px;
}
With:
#sidebar {
background-color: lightyellow;
border: thin solid gray;
width: 210px;
float: right;
}
--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
2005年8月30日星期二15:24:42 -0700，Ed写道：
On Tue, 30 Aug 2005 15:24:42 -0700, Ed wrote:
我正在处理的页面是 http：//www.coldpizzasoftware .com / temp / layout.html
我试图让黄色边栏进入绿色内容区右侧的白色区域，并且蓝色页眉和页脚之间的补间。有没有人知道怎么办？
我知道我可以添加浮动：左;内容div和它的工作，
但它似乎也不正确。在这种情况下，内容div和
侧栏div将不再保留在其容器中，页面div，而是它们将与容器的底部重叠。
我我已经阅读了这个新闻组中的几个类似的主题，但仍然无法弄明白。我也搜索过一个解决方案，我找到了几个CSS布局示例，但没有一个类似于我正在尝试的内容。我知道有几个使用类似布局的网站，我已经尝试将它们剥离到裸骨布局，但每次我都试过，我已经搞砸了。
The page I''m working on is at http://www.coldpizzasoftware.com/temp/layout.html
I trying to get the yellow sidebar to go in the white area to the right
of the green content area and between the blue header and footer. Does
anyone know how to do?
I know I can add float: left; to the content div and it sort of works,
but it doesn''t seem right either. In this case the content div and the
side bar div will no longer stay in their container, the page div,
instead they will overlap the bottom of their container.
I''ve read several similar threads on this newsgroup and still can''t
figure it out. I''ve googled for a solution too, and I''ve found several
examples CSS layouts, but none that are similar enough to what I''m
attempting. I know of several sites that use a similar layout and I''ve
tried stripping them down to the bare bones layout, but each time I''ve
tried I''ve screw it up.
查看 http：// www.positioniseverything.net/ 他们或许可以获得
帮助！
Take a look at http://www.positioniseverything.net/ they might be able to
help!
2005年8月30日星期二15:24： 42 -0700，Ed写道：
On Tue, 30 Aug 2005 15:24:42 -0700, Ed wrote:
我正在处理的页面位于 http://www.coldpizzasoftware.com/temp/layout.html
我试图让黄色侧边栏进入白色绿色内容区域的右侧区域和蓝色页眉和页脚之间的区域。有没有人知道怎么办？
我知道我可以添加浮动：左;内容div和它的工作，
但它似乎也不正确。在这种情况下，内容div和
侧栏div将不再保留在其容器中，页面div，而是它们将与容器的底部重叠。
我我已经阅读了这个新闻组中的几个类似的主题，但仍然无法弄明白。我也搜索过一个解决方案，我找到了几个CSS布局示例，但没有一个类似于我正在尝试的内容。我知道有几个使用类似布局的网站，我已经尝试将它们剥离到裸骨布局，但每次我都试过，我已经搞砸了。
The page I''m working on is at http://www.coldpizzasoftware.com/temp/layout.html
I trying to get the yellow sidebar to go in the white area to the right
of the green content area and between the blue header and footer. Does
anyone know how to do?
I know I can add float: left; to the content div and it sort of works,
but it doesn''t seem right either. In this case the content div and the
side bar div will no longer stay in their container, the page div,
instead they will overlap the bottom of their container.
I''ve read several similar threads on this newsgroup and still can''t
figure it out. I''ve googled for a solution too, and I''ve found several
examples CSS layouts, but none that are similar enough to what I''m
attempting. I know of several sites that use a similar layout and I''ve
tried stripping them down to the bare bones layout, but each time I''ve
tried I''ve screw it up.
这让我很烦，所以试试这个，让我知道你以后是不是这样。
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.01 // EN"
" http：//www.w3.org/TR/html4/strict.dtd">
< html>
< head>
< title>< / title>
< ; link rel =" stylesheet"
href =" testdiv.css"
type =" text / css">
< meta name =" Generator"
content =" TextPad 4.7">
< meta name =" Author"
content ="">
< meta name =" Keywords"
content ="？">
< meta name ="说明"
content ="？">
< meta http-equiv =" content-type"
content =" text / html; charset = us-ascii">
< style type =" text / css">
#page {
background-color：#fff;
宽度：760px;
保证金：20px auto;
}
#header {
background-color：＃6cf;
宽度：100％;
float：left;
}
#footer {
背景颜色：＃6cf;
宽度：100％;
位置：相对;
浮动：左;
}
#content {
保证金：0 30％0 0;
边框：1px实心＃000;
填充：0 10px 10px;
}
#sidebar {
宽度：30％;
背景颜色：＃ff9;
浮动：正确;
}
< / style>
< / head>
< body>
< div id =" page">
< div id =" header">
< h1>此处的页面标题< / h1>
< / div>
< div id =" s idebar">
< ul>
< li>项目1< / li>
< li>第2项< / li>
< li>第3项< / li>
< / ul>
< ; / div>
< div id =" content">
< p>这是继续打开的内容框，
以及on和on on以及on和on on以及on和on
以及on和on以及on和on以及on和on以及on和on <
以及on和on以及on和on以及on和on on以及
以及on和on以及on和on以及on和on以及on和on
以及开启和开启，开启和开启等等开启和开启
以及开启和开启以及开启和开启以及开启和开启等待开启
和on on和on on on on on on on on on on on on on
和on on on< / p>
< / div>
< div id =" footer">
< p>这是页脚和内容< / p>
< / div& gt;
< / div>
< / body>
< / html>
It was bugging me so try this, let me know if it is what you were after
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet"
href="testdiv.css"
type="text/css">
<meta name="Generator"
content="TextPad 4.7">
<meta name="Author"
content="">
<meta name="Keywords"
content="?">
<meta name="Description"
content="?">
<meta http-equiv="content-type"
content="text/html; charset=us-ascii">
<style type="text/css">
#page{
background-color:#fff ;
width: 760px;
margin: 20px auto;
}
#header{
background-color:#6cf ;
width:100%;
float: left;
}
#footer{
background-color:#6cf ;
width: 100%;
position: relative;
float: left;
}
#content{
margin: 0 30% 0 0;
border: 1px solid #000;
padding: 0 10px 10px ;
}
#sidebar{
width: 30%;
background-color: #ff9;
float: right;
}
</style>
</head>
<body>
<div id="page">
<div id="header">
<h1>The page title here</h1>
</div>
<div id="sidebar">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="content">
<p>this is the content box that goes on and on and on
and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on
and on and on and on and on and on and on and on and on
and on and on</p>
</div>
<div id="footer">
<p>This is the footer and stuff</p>
</div>
</div>
</body>
</html>
这篇关于固定宽度，2列CSS布局问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
