#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    56
    Rep Power
    2

    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
    Attached Images

IMN logo majestic logo threadwatch logo seochat tools logo