putting floating elements into div
I've written code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {padding: 0px;margin: 0px;}
body {width:100%}
img.logo{display:block;width:80%;margin-left:10%;margin-right:10%;}
div.down{width:80%;margin-left:10%;margin-right:10%;height:auto;border:red solid 1px;overflow: auto}
.bar{width:10%; height:100%; float:left; display:bloc开发者_如何转开发k;}
.cent{width:80%; float:left;}
</style>
</head>
<body>
<img class="logo" src="logo.gif"/>
<div class="down">
<img class="bar" src="bar.jpg"/>
<div class="cent">
//LOT OF TEXT//
</div>
<img class="bar" src="bar.jpg"/>
</div>
</body>
</html>
And When I write lot of text into "cent" div the "down" div gets streched. However, "bar" images dont get resized despite height set (100% or inherit) which should inherit height from parent. What should I do to make it work ?
This is what I found on the sitepoint reference for CSS height
Site Point CSS Height Reference
The property takes a CSS length (px, pt, em, etc.), a percentage, or the keyword auto. Negative length values are illegal. Percentage values refer to the height of the element’s containing block. If the height of the containing block isn’t specified explicitly (that is, it depends on content height), and this element isn’t absolutely positioned, the percentage value is treated as auto. A percentage value is also treated as auto for table cells, table rows, and row groups. The special auto value allows the browser to calculate the content height automatically, based on other factors. For absolutely positioned elements, for example, the content height may be calculated on the basis of the top and bottom property values, or the top and bottom margins, borders, and padding applied to the element. If no hard constraints are imposed by other properties, the element is allowed to assume its “natural” content height, on the basis of the height of the content it contains.
So I did as follows. HTML as:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Template</title>
<link href="styles.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="container">
<img class="logo" src="logo.png"/>
<div class="down">
<img class="bar left" src="bar.jpg"/>
<div class="cent">
Lots of Text
</div>
<img class="bar right" src="bar.jpg"/>
</div>
</div>
</body>
</html>
CSS as follows
html, body, div
{
padding: 0;
margin: 0;
}
div#container
{
width: 80%;
margin: 0 auto;
}
img.logo
{
display: block;
margin: 0 auto;
width: 100%;
}
div.down
{
position: relative;
border: 1px solid red;
overflow: auto;
}
img.bar.left
{
display: block;
width: 10%;
height: 100%;
border: 1px solid blue;
position: absolute;
top: 0;
left: 0;
}
img.bar.right
{
display: block;
width: 10%;
height: 100%;
border: 1px solid blue;
position: absolute;
top: 0;
right: 0;
}
div.cent
{
width: 80%;
border: 1px solid green;
margin: 0 auto;
}
Now the image horizontal size change when the size o fthe content changes. Works on IE9, FF4.01, GG11, AF5 and Opera11
You're doing this totally wrong. You should use background-image to achieve what you want.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.div1, .div2 {
background: transparent url(bar.jpg) left repeat-y;
}
.div2 {
background-position: right;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.<strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.<strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.<strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
</div>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论