CSSの応用がわかりません。
使用目的に合うCSSスタイルをダウンロードしてきました。
これはdivの高さを揃えられるcssです。
しかし、内容を理解していないので自分のホームページに適用できていません。
やりたいことは、col1が155px,col2が14px,col3が382px,col4が14px,col5が190pxにして使用したのですがこのcssを変更して使いたいのですがどのように変更すればよいでしょうか?
/* Start of Column CSS */
#container5 {
clear:left;
float:left;
width:100%;
overflow:hidden;
background:#eee; /* column 5 background colour */
}
#container4 {
clear:left;
float:left;
width:100%;
position:relative;
right:20%;
background:#b2f0f9; /* column 4 background colour */
}
#container3 {
clear:left;
float:left;
width:100%;
position:relative;
right:20%;
background:#89ffa2; /* column 3 background colour */
}
#container2 {
clear:left;
float:left;
width:100%;
position:relative;
right:20%;
background:#ffa7a7; /* column 2 background colour */
}
#container1 {
float:left;
width:100%;
position:relative;
right:20%;
background:#fff689; /* column 1 background colour */
}
#col1 {
float:left;
width:16%;
position:relative;
left:82%;
overflow:hidden;
}
#col2 {
float:left;
width:16%;
position:relative;
left:84%;
overflow:hidden;
}
#col3 {
float:left;
width:16%;
position:relative;
left:90%;
overflow:hidden;
}
#col4 {
float:left;
width:16%;
position:relative;
left:94%;
overflow:hidden;
}
#col5 {
float:left;
width:16%;
position:relative;
left:98%;
overflow:hidden;
}
以上がCSSです
<body>
<div id="container5">
<div id="container4">
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">
<!-- col1 start -->
<p>Each column is 20% percent wide with 2 percent padding on each side.</p>
<!-- col1 end -->
</div>
<div id="col2">
<!-- col2 start -->
<h2>No Images</h2>
<!-- col2 end -->
</div>
<div id="col3">
<!-- col3 start -->
<p>The HTML in this layout validates as XHTML 1.0 strict.</p>
<!-- col3 end -->
</div>
<div id="col4">
<!-- col4 start -->
<h2>This layout is FREE for anyone to use</h2>
<!-- col4 end -->
</div>
<div id="col5">
<!-- col5 start -->
<li>Opera 8 & 9</li>
<!-- col5 end -->
</div>
</div>
</div>
</div>
</div>
</div>
</body>
