I can't take credit for this. Credit must go to Soh Tanaka for this blog post
http://www.sohtanaka.com/web-design/css-overflow-property-quick-tip/
I just tweak it a little so that it would work well within the context of this blog. Essentially it is a nice simple way of aligning text next to images without wrapping.
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Overflow Hidden</title>
<style type="text/css">
body
{
margin:0 auto;
width:600px;
font-family:sans-serif;
}
.thumb
{
float:left;
margin-top:20px;
margin-right:20px;
padding:5px;
border:1px solid #CCCCCC;
background:#F0F0F0;
}
.description
{
overflow:hidden;
}
</style>
</head>
<body>
<img src="http://farm3.static.flickr.com/2160/2271589215_935b5bc2ce_m.jpg" class="thumb" />
<div class="description">
<h3>Heading 1</h3>
<p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<hr />
<img src="http://farm3.static.flickr.com/2411/2214360006_32d25b3df6_m.jpg" class="thumb" />
<div class="description">
<h3>Heading 2</h3>
<p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</body>
</html>
Showing posts with label align. Show all posts
Showing posts with label align. Show all posts
Wednesday 13 October 2010
Wednesday 18 August 2010
Making the title overlap the content container
There are times when you would like the content to be contained in a box. Sometimes you would like the header to overlap the top of that box. Here is how to do it. The crucial lines here are position:relative; top:40px; within the h1 CSS reference.
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Header over container</title>
<style type="text/css">
body
{
font-family:Sans-serif;
color:#CCCCCC;
}
h1, #container
{
margin:0 auto;
width:800px;
}
#container
{
margin-top:20px;
border:1px solid #CCCCCC;
}
h1
{
text-align:center;
color:#FF0000;
position:relative;
top:40px;
}
</style>
</head>
<body>
<h1>The title Lorem Ipum</h1>
<div id="container">
<p>Lorem ipsum consetetur...</p>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Header over container</title>
<style type="text/css">
body
{
font-family:Sans-serif;
color:#CCCCCC;
}
h1, #container
{
margin:0 auto;
width:800px;
}
#container
{
margin-top:20px;
border:1px solid #CCCCCC;
}
h1
{
text-align:center;
color:#FF0000;
position:relative;
top:40px;
}
</style>
</head>
<body>
<h1>The title Lorem Ipum</h1>
<div id="container">
<p>Lorem ipsum consetetur...</p>
</div>
</body>
</html>
Subscribe to:
Posts (Atom)