Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 220
  • Last Modified:

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.
0
josephm67
Asked:
josephm67
1 Solution
 
Julian HansenCommented:
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now