March 6th, 2013, 11:49 PM
|
|
Contributing User
|
|
Join Date: Nov 2012
Posts: 56
Time spent in forums: 13 h 10 m 2 sec
Reputation Power: 1
|
|
|
Homework - Dynamically positioning the sidebar relative to the content on the left
Hi,
I have css for displaying an image content on the left and a sidebar on the right. The image can vary in side and orientation (landscape, portrait), therefore I want the details sidebar on the right side of the image to be relatively positioned to the image.
Here is my layout code:
Code:
<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">
<li class="first"><span class="id">ID:</span> <a href="#">1</a></li>
<li class="last"><span class="ref">REFERENCE No.:</span> <a href="#">LSK001</a></li>
<li><span class="title">TITLE:</span> <a href="#">Monalisa</a></li>
<li><span class="obj">OBJECT TYPE:</span> <a href="#">Painting</a></li>
<li class="last"><span class="mat">MATERIAL USED:</span> <a href="#">Canvas,oil...</a></li>
<li class="last"><span class="tech">TECHNIC:</span> <a href="#">brush stroking...</a></li>
<li class="last"><span class="width">WIDTH:</span> <a href="#">1 meter</a></li>
<li class="last"><span class="height">HEIGHT:</span> <a href="#">3 meters</a></li>
<li class="last"><span class="artist">ARTIST:</span> <a href="#">Da Vi nci</a></li>
<li class="last"><span class="source">SOURCE:</span> <a href="#">....</a></li>
</ul>
</div>
<h3>DESCRIPTION</h3>
<p>
Urna dis suscipit lorem sed luctus. Elementum suspendisse tempus fermentum ornare libero phasellus nibh conseuqat dolore.
</p>
</div>
<br class="clearfix" />
</div>
</body>
And here is the css code:
Code:
* {
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;
}
Please, see attached screenshort for the layout in the browser.
joseph
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
