• 0

Positioning

Asked by deactivated01032015,

 Share

Question

Proficient

deactivated01032015

Posted
Posted

I have a problem with positioning a div. Probably a simple solution but somehow I can't figure it out.

Code is as follows:

CSS

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	background-color: #000;
	color: #FFF;
}

#back {
}

#header {
	background-color: #FFF;
	color: #000;
	position: fixed;
	width: 100%;
	height: 80px;
	top: 0;
	right: 0;
	bottom: auto;
	left: 0;
}

#main {
	background-color: #4D575B;
	position: fixed;
	width: auto;
	height: auto;
	top: 80px;
	right: 0;
	bottom: 60px;
	left: 0;
}

#footer {
	background-color: #342824;
	position: fixed;
	width: 100%;
	height: 60px;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
}

#box {
	background-color: #090;
	position: absolute;
	width: 600px;
	height: 100%;
	left: 25%;
	right: auto;
}

HTML

<body>
<div id="back">
<div id="header">Header</div>
<div id="main">Main</div>
<div id="footer">Footer</div>
</div>
<div id="box">Box</div>
</body>

How can I put a box div over the rest of them while keeping it centered on the page, no matter the size of the browsing window?

Hope I made my self clear.

Link to comment
https://www.neowin.net/forum/topic/700464-positioning/
Share on other sites

21 answers to this question

Recommended Posts

  • 0
Proficient

deactivated01032015

Posted
  • Author
Posted

Tnx for your help. Unfortunately it doesn't work as it should. I want to have a 100% height and by using "margin: -50% 0 0 -300px;" thing gets broken.

I've tried a few things and came up with this for a box layer:

background-color: #090;
position: absolute;
width: 700px;
height: 100%;
left: 50%;
margin-left: -350px;

It almost works. But upon resizing a browser's windows to less than 700px text in the div starts to disappear since it's probably shifting to a left side.

So, any further ideas?

Link to comment
https://www.neowin.net/forum/topic/700464-positioning/#findComment-590166196
Share on other sites
  • 0
Proficient

deactivated01032015

Posted
  • Author
Posted

layoutia6.jpg

I want a part between the yellowish lines to be always visible, no matter the size of the browser's window - well, to a certain width. The rest of the page (parts left and right) is not important and can hide like in the picture bellow.

layout2kj4.jpg

When a browser's windows gets smaller scrollbar should appear.

I managed to almost achieve this effect by following code.

CSS

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	background-color: #000;
	color: #FFF;
}

#back {
	min-width: 750px;
	min-height: 600px;
}

#header {
	background-color: #FFF;
	color: #000;
	position: fixed;
	width: 100%;
	height: 80px;
	top: 0;
	right: 0;
	bottom: auto;
	left: 0;
}

#main {
	text-align: center;
	background-color: #262827;
	position: fixed;
	width: auto;
	height: auto;
	top: 80px;
	right: 0;
	bottom: 60px;
	left: 0;
}

#footer {
	text-align: center;
	background-color: #4F808E;
	position: fixed;
	width: 100%;
	height: 60px;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 5px;
}

#content {
	text-align: left;
	width: 700px;
	margin: auto;
	padding: 10px;
}

HTML

<body>
<div id="back">
	<div id="header">Project Undefined</div>
	<div id="main">
		<div id="content">Content where Lorem ipsum is.</div>
	</div>
	<div id="footer">Copyright info</div>
</div>
</body>

This is it. Hope you can help.

Link to comment
https://www.neowin.net/forum/topic/700464-positioning/#findComment-590169000
Share on other sites
  • 0
Proficient

deactivated01032015

Posted
  • Author
Posted (edited)

I looked through the internet for a solution and it seems that this is kinda hard to achieve. Although I think I've almost did it right. There is still one minor problem though.

Here is once again a code (much lighter now).

CSS

html, body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	background-color: #000;
	color: #FFF;
	height: 100%;
	margin: 0;
	padding: 0;
}

#container {
	background-color: #262827;
	position: relative;
	min-height: 100%;
}

#header {
	background-color: #FFF;
	color: #000;
	height: 80px;
}

#main {
	border-top: 4px #4D575B solid;
	text-align: center;
	padding-bottom: 60px;
}

#content {
	text-align: left;
	width: 700px;
	margin: auto;
	padding: 10px;
}

#footer {
	background-color: #4F808E;
	border-top: 4px #4D575B solid;
	text-align: center;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 60px;
	padding-top: 5px;
}

HTML

<body>

<div id="container">
	<div id="header">Header</div>
	<div id="main">
		<div id="content">Content</div>
	</div>
	<div id="footer">Footer</div>
</div>

</body>

Everything works fine. But again, when resized to a window smaller than 700px, the header and the footer become fixed-width or something like that.

Image to make it clearer.

layoutfa5.jpg

Any suggestion is appreciated.

I'm actually tired of this. Have to sleep it over.

Edited by blu3f1sh
Link to comment
https://www.neowin.net/forum/topic/700464-positioning/#findComment-590170426
Share on other sites
  • 0
Veteran

sweetsam

Posted
Posted (edited)

I am not sure I understand all that you require from your code. But here is a very basic framework which is probably what you are after. Let me know if it works out for you.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
	margin: 0;
	padding: 0;
}
html, body	{
	height: 100%;
	min-height: 100%;
	min-width: 700px;
}
body	{
	background: #000;
}
#header	{
	z-index: 2;
	height: 100px;
	background: #fff;
	position: relative;
	margin-bottom: -100px;
}
#header h1	{
	padding: 15px;
	font: 16px Verdana, Geneva, sans-serif;
}
#content	{
	z-index: 1;
	width: 700px;
	margin: 0 auto;
	min-height: 100%;
	position: relative;
	background: #262827;
}
#clear_header	{
	height: 100px;
}
#content p	{
	color: #fff;
	padding: 15px;
	font: 12px/15px Verdana, Geneva, sans-serif;
}
#clear_foot	{
	height: 100px;
}
#footer	{
	z-index: 2;
	height: 100px;
	position: relative;
	margin-top: -100px;
	background: #4f808e;
}
#footer p	{
	color: #fff;
	padding: 15px;
	text-align: center;
	font: 12px/15px Verdana, Geneva, sans-serif;
}
-->
</style>
</head>

<body>

<div id="header">
	<h1>Project Undefined</h1>
</div>
<div id="content">
	<div id="clear_header">
	</div>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
	<div id="clear_foot">
	</div>
</div>
<div id="footer">
	<p>Copyright</p>
</div>

</body>
</html>

Edited by sweetsam
Link to comment
https://www.neowin.net/forum/topic/700464-positioning/#findComment-590171402
Share on other sites
  • 0
Proficient

deactivated01032015

Posted
  • Author
Posted (edited)

@sweetsam:

I did a quick check using an online HTML editor and it seems it's working just fine in Firefox. But under IE6, footer doesn't stay at the bottom and upon resizing a window content layer gets shifted to the right, the same way as shown on the previous picture. So, as usual when it comes to a testing in the buggy IE (maybe it's better in IE7 and upcoming 8).

But this definitely brings me closer to what I want.

Will try a few things when I get back home.

Thank you for all your effort.

@F7S: it's not as simple as that.

Edited by blu3f1sh
Link to comment
https://www.neowin.net/forum/topic/700464-positioning/#findComment-590173562
Share on other sites
  • 0
Veteran

sweetsam

Posted
Posted

The following code works in IE 6&7, Firefox, Safari, Opera and Chrome.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
	margin: 0;
	padding: 0;
}
html, body	{
	height: 100%;
	min-height: 100%;
	min-width: 700px;
}
body	{
	background: #000;
}
#header	{
	z-index: 2;
	height: 100px;
	background: #fff;
	position: relative;
	margin-bottom: -100px;
}
#header h1	{
	padding: 15px;
	font: 16px Verdana, Geneva, sans-serif;
}
#content	{
	z-index: 1;
	width: 700px;
	margin: 0 auto;
	min-height: 100%;
	position: relative;
	background: #262827;
}
#clear_header	{
	height: 100px;
}
#content p	{
	color: #fff;
	padding: 15px;
	font: 12px/15px Verdana, Geneva, sans-serif;
}
#clear_foot	{
	height: 100px;
}
#footer	{
	z-index: 2;
	height: 100px;
	position: relative;
	margin-top: -100px;
	background: #4f808e;
}
#footer p	{
	color: #fff;
	padding: 15px;
	text-align: center;
	font: 12px/15px Verdana, Geneva, sans-serif;
}
-->
</style>

<!--[if lte IE 6]>
<style type="text/css">
#content	{
	height: auto !important;
	height: 100%;
}
</style>
<![endif]-->

</head>

<body>

<div id="header">
	<h1>Project Undefined</h1>
</div>
<div id="content">
	<div id="clear_header">
	</div>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
	<div id="clear_foot">
	</div>
</div>
<div id="footer">
	<p>Copyright</p>
</div>

</body>
</html>

Link to comment
https://www.neowin.net/forum/topic/700464-positioning/#findComment-590174668
Share on other sites
  • 0
Veteran

sweetsam

Posted
Posted

Now I see where the problem is and I apologize for jumping to conclusions with out understanding the exact problem. Following code addresses that problem.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
	margin: 0;
	padding: 0;
}
html, body	{
	height: 100%;
	min-height: 100%;
	min-width: 700px;
}
body	{
	background: #000;
}
#header	{
	z-index: 2;
	height: 100px;
	background: #fff;
	position: relative;
	margin-bottom: -100px;
}
#header h1	{
	padding: 15px;
	font: 16px Verdana, Geneva, sans-serif;
}
#content	{
	z-index: 1;
	width: 700px;
	margin: 0 auto;
	min-height: 100%;
	position: relative;
	background: #262827;
}
#clear_header	{
	height: 100px;
}
#content p	{
	color: #fff;
	padding: 15px;
	font: 12px/15px Verdana, Geneva, sans-serif;
}
#clear_foot	{
	height: 100px;
}
#footer	{
	z-index: 2;
	height: 100px;
	position: relative;
	margin-top: -100px;
	background: #4f808e;
}
#footer p	{
	color: #fff;
	padding: 15px;
	text-align: center;
	font: 12px/15px Verdana, Geneva, sans-serif;
}
-->
</style>

<!--[if lte IE 6]>
<style type="text/css">
#header, #footer	{
	width:expression(((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) < 700 ? "700px" : "auto");
}
#content	{
	height: auto !important;
	height: 100%;
}
</style>
<![endif]-->

</head>

<body>

<div id="header">
	<h1>Project Undefined</h1>
</div>
<div id="content">
	<div id="clear_header">
	</div>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
	<div id="clear_foot">
	</div>
</div>
<div id="footer">
	<p>Copyright</p>
</div>

</body>
</html>

Link to comment
https://www.neowin.net/forum/topic/700464-positioning/#findComment-590180600
Share on other sites
This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.