• 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.

  • Posts

    • Apple Maps

      By goretsky · Posted

      Hello, It would appear so, according to https://finance.yahoo.com/news/how-to-hide-your-home-on-google-maps-apple-maps-204146687.html. Regards, Aryeh Goretsky      
    • AMD 9070XT

      By goretsky · Posted

      Hello, The Nvidia Founders Edition 3080 video card is approximately six years old, correct? Have you looked into whether replacement fans are available for it? Perhaps replacing those will improve cooling, especially when combined with cleaning the card's heatsink and replacing the thermal interface materials. Regards, Aryeh Goretsky  
    • DuRoBo Krono Review: Portable E-Ink reader with great ideas that need a bit of improvement

      By goretsky · Posted

      Hello, While ~104 GB of space may seem generous (at least compared to other e-readers which have 8-32GB), I feel at this price point the device should have a Micro SDXC card slot for expansion, particularly if it allows audio books to be installed and played. I hope to see more reviews of 6" phone-sized e-readers on Neowin in the future. It will be interesting to see how they compare. Regards, Aryeh Goretsky
    • Sandboxie Plus 1.17.8 / Classic 5.72.8

      By Copernic · Posted

      Sandboxie Plus 1.17.8 / Classic 5.72.8 by Razvan Serea Run programs in a sandbox to prevent malware from making permanent changes to your PC. Sandboxie allows you to run your browser, or any other program, so that all changes that result from the usage are kept in a sandbox environment, which can then be deleted later. Sandboxie is a sandbox-based isolation software for 32- and 64-bit Windows NT-based operating systems. It is being developed by David Xanatos since it became open source, before that it was developed by Sophos (which acquired it from Invincea, which acquired it earlier from the original author Ronen Tzur). It creates a sandbox-like isolated operating environment in which applications can be run or installed without permanently modifying the local or mapped drive. An isolated virtual environment allows controlled testing of untrusted programs and web surfing. Sandboxie is available in two flavors Plus and Classic. Both have the same core components, this means they have the same level of security and compatibility. What's different is the user interface the Plus build has a modern Qt based UI which supports all new features that have been added since the project went open source. The Classic build has the old no longer developed MFC based UI, hence it lacks support for modern features, these features can however still be used when manually configured in the Sandboxie.ini. Sandboxie Plus 1.17.8 / Classic 5.72.8 release notes: Added added DisableCustomTitleOpt=[process,][y|n] to allow [#] sandboxie title markers on custom-titlebar windows (Delphi VCL, Qt, Electron) that were previously skipped to prevent DWM repaint CPU loops #5387 Changed updated bundled ImDisk driver to 3.0.2 #5419 Fixed fix Suppress logs for expected non-user SIDs #5422 SbieSvc.exe: SBIE2218/2219 error when run program as administrator #5417 fixed explorer.exe crashes in Application Compartment when Huorong Security is installed #5423 Download: Sandboxie Plus (64-bit) | 23.5 MB (Open Source) Download: Sandboxie Classic (64-bit) | 3.0 MB Links: Sandboxie Website | GitHub | ARM64 | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • what other retro software do yall use

      By goretsky · Posted

      Hello, Christian Maas' XVI32 is a nice (and very small) hex editor. Speaking of hex editors, many years ago a colleague and I who both worked at Tribal Voice managed to edit a copy of the company's PowWow instant messaging client to make it behave better now that all of its lookup servers and other server-side tech was gone.  The program didn't support NAT (RFC-3022 was introduced in January 2001, the same time Tribal Voice was shuttered), but it still worked okay if you manually set up port-forwarding on your router.  The server at http://powwow.jazy.net/ hosts a copy (usual warnings about downloading and running untrusted code from random internet servers apply). I occasionally use some tools like Funduc Software's Search and Replace and Application Mover when I need to make mass-edits to text-based files or move programs with a hard-coded installation directories, respectively.  When I need to figure out the exact LCD panel inside of a laptop, EnTech Taiwan's Monitor Asset Manager is my go-to tool for that purpose. JD Design's website (now hosted on github.io) has a number of interesting freeware and shareware utilities.  I used to use their TouchPro utility to set the file timestamps on software I was mastering to match its version number (e.g., version 3.00 of a program had all of its files dates set to 3:00AM, and so forth). Karenware has a number of interesting freeware utilities, too. Regards, Aryeh Goretsky  

  • Recent Achievements

    • Week One Done
      Jeroen Wilms earned a badge
      Week One Done
    • Week One Done
      rolfus earned a badge
      Week One Done
    • One Month Later
      Leroy Jethro Gibbs earned a badge
      One Month Later
    • Conversation Starter
      flexorcist earned a badge
      Conversation Starter
    • One Month Later
      AndreaB earned a badge
      One Month Later

  • Popular Contributors

    1. 1
      +primortal
      509
    2. 2
      +Edouard
      198
    3. 3
      PsYcHoKiLLa
      138
    4. 4
      ATLien_0
      90
    5. 5
      Steven P.
      82
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!