Solved

css help needed

Posted on 2014-04-22
4
214 Views
Last Modified: 2014-05-28
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
Comment
Question by:josephm67
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
4 Comments
 
LVL 57

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 40014740
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
 
LVL 22

Expert Comment

by:Kim Walker
ID: 40014828
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

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question