css help needed

snap..Hi,

I have web page. There is already a div in center but I have to add a new div to right side and align new added div to center of remaining area. I want it to be working with all size of screens. Is it possible?

I have added a snap for clarity.

Again, I have to add a new div to right side and align it to center of remaining area.
josephm67Asked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
Can't think offhand of a way to do this without script. Here is a solution using script
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
  resize();
  $(window).resize(resize);
});
function resize()
{
  // CALCULATE THE DISTANCE FROM THE RIGHT BY TAKING HALF THE WINDOW WIDTH LESS THE CONENT WIDTH, SUBTRACTING THE 
  // SIDEBAR WIDTH AND DIVIDING BY 2 AGAIN
  var right = (( ( $(window).width() - $('#content').width() ) >> 1) - $('#sidebar').width() ) >> 1;
  $('#sidebar').css({right: right + 'px'});
}
</script>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
body, html {
  height: 100%;
}
#wrapper {
  position: relative;
  height: 100%;
}
#content {
  width: 910px;
  margin: 0 auto;
  background: blue;
  height: 100%;
}

#sidebar {
  position: absolute;
  width: 100px;
  background: red;
  top: 0;
  min-height: 100%;
}
</style>
</head>
<body>
<div id="wrapper">
  <div id="content">
    Main content
  </div>
  <div id="sidebar">
    sidebar
  </div>
</div>
</body>
</html>

Open in new window

Working sample here http://www.marcorpsa.com/ee/t637.html
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
Here's a solution using css:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Untitled Document</title>
<meta http-equiv="contents-type" content="text/html;charset=UFT-8" />
<style type="text/css">
html, body { width: 100%; margin: 0; padding: 0; }
div#center1 { background-color: #1B8AC8; width: 600px; height:600px; margin: 36px auto; position: relative; z-index: 100; }
div#righthalf { background-color: #08AC49; width: 50%; height: 100%; margin: 0 0 0 50%; position: absolute; left: 0; top: 0; z-index: -1; min-width: 450px; /* half of center1 plus middleright width */ }
div#rightmargin { background-color: #F99E07; width: auto; height: 100%; margin: 0 0 0 300px; /* half of center 1 width */ overflow: hidden; }
div#middleright { background-color: #E41A52; width: 150px; height: 600px; margin: 36px auto; }
</style>
</head>
<body>
<div id="center1"></div>
<div id="righthalf">
	<div id="rightmargin">
		<div id="middleright"></div>
	</div>
</div>
</body>
</html>

Open in new window

What you can't see is that the green div goes behind the orange and pink divs. You may want to deconstruct the css line by line from the bottom to see how it works.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.