I have a CSS setup to showcase image content on the left with a sidebar on the right. The size and orientation of the image can vary, so I want the details sidebar to be relatively positioned next to the image.
Here is a snapshot:
The CSS code looks like this:
* {
margin: 0;
padding: 0;
}
a {
/* text-decoration: underline; */
text-decoration: none;
color: #6B2E42;
}
a:hover {
text-decoration: none;
}
body {
background: #C9CFCD url(images/img01.gif);
font-size: 11pt;
color: #323232;
line-height: 1.75em;
}
body,input {
font-family: Arial, sans-serif;
}
#content {
/* HOLDS THE IMAGE */
background: #FFFFFF;
/* width: 595px; */
color: #6E6E6E;
padding: 10px 10px 0 35px;
float: left;
border-bottom: solid 2px #BBC1BF;
}
#page {
margin: 20px 0 20px 0;
position: relative;
width: 980px;
padding: 0;
}
#page ul {
list-style: none;
}
#page ul li {
padding: 2px 0 2px 0;
border-top: solid 1px #D9D9D9;
}
#sidebar {
background: #FFFFFF;
margin: 0 0 0 685px;
color: #6E6E6E;
padding: 10px 10px 10px 20px;
width: 225px;
border-bottom: solid 2px #BBC1BF;
}
#wrapper {
width: 980px;
margin: 35px auto 0 auto;
position: relative;
}
And here is how the layout looks:
<body>
<div id="page">
<div id="content">
<p>
<img src="Mona_Lisa_by_Leonardo_da_Vinci.jpg">
</p>
<br class="clearfix" />
</div>
<div id="sidebar">
<h3>DETAILS</h3>
<div class="date-list">
<ul class="list date-list">
<!-- Details of the specific image -->
</ul>
</div>
<h3>DESCRIPTION</h3>
<p>
Ut tortor odio sapien sed luctus. Duis eu purus convallis ligula tincidunt bibendum et malesuada.
</p>
</div>
<br class="clearfix" />
</div>
</body>
Please refer to the attached screenshot for a visual guide to how the layout appears in the browser.
joseph