How to position second div in center of screen as long as it doesn't overlap?

HTML & CSS
1

Hello,

I have a body with nothing but 25px padding and a tag containing two divs, the first div simply has a logo image and the latter has a button image. I would like to position the logo in the center of the visible screen as long as it does not overlap with the padding or the first div, whereby resizing the browser height to less than that of the two div’s height & 2x padding, only then should a vertical scrollbar appear.

CODE- #buttonDivId { position: absolute; top: 50%; }

GIVEN that the div takes care of horizontal centering!
However, the button div should cease to center itself if it would mean overlapping, with the logo div or padding of body, on resize.
Any good ways to go about this?

I didn’t find the right solution on the internet.
Reference
-http://www.codingforums.com/html-and-css/384968-how-position-second-div-center-screen-long-doesnt-overlap.html?s=ecf3e2a71298a16726033b017589291a

4

the simplest solution, i think, would be something like this.
( I am assuming NOTHING ELSE is on the HTML)

<html>
	<head>
		<title>title</title>
		<style type="text/css" media="screen">
			html{ display: table;
				height: 100%;
				background: #fff;
 				width:100%;
				padding: 25px;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
			}
			body{ display: table-cell; vertical-align: middle; background: pink; padding: 25px;  }
			div{ width: 80%; margin: 0 auto; text-align: center}
		</style>
	</head>
	<body>
		
		<div>LOGO</div>
		<div><button>some Button</button></div>
		
	</body>
</html>

hope that helps

1 Like
5

Using the code @dresden_phoenix posted above, you could push the logo into display middle by adding a suitable top-margin to the “logo” div.

For example:

<!DOCTYPE html>
<html><head>
<title></title>
<style>
html{
    display:table;
    box-sizing:border-box;
    padding:25px;
    width:100%;
    height:100%;
    background:white;
}
body{
    display:table-cell;
    background:pink;
    vertical-align:middle;
    text-align:center;
}
.logo{
    margin-top:1.2em; /* is the height of the button to push the logo down into display middle */
}
</style>
</head><body>

<div class="logo">LOGO</div>
<div><button>some Button</button></div>

</body></html>

Given the condition you have that the page just contains those two divs.

6

@explainervideo8 (aka: Hanji)

This should deliver exactly what you want visually without JS and without sprouting a premature vertical scrollbar. It will adapt to a suitable range of button and logo heights without tweaks. You can tweak the “trow” height for perfection, if desired. The total of the three heights must not exceed 100% so it’s OK to leave a little space over and under the button like you see now.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>non-overlapping-boxes</title>
<!--
https://www.sitepoint.com/community/t/how-to-position-second-div-in-center-of-screen-as-long-as-it-doesnt-overlap/263293/6
-->
    <style media="screen">
html {
    box-sizing: border-box;
}
*,*:before,*:after {
    box-sizing: inherit;
}
html,body {
    height:100%;
    padding:0;
    margin:0;
}
body {
    display:table;
    table-layout:fixed;
    width:100%;
    background-color:#f0f0f0;
    box-shadow:inset 0 0 2em #666;
    font:1em/1.62em verdana, arial, helvetica, sans-serif;
    padding:0 2em;
}
body:after {
    content:"";
    display:table-row;
    outline:1px dashed blue;  /* TEST Outline. TO BE DELETED. */
}
.trow {
    display:table-row;
    outline:1px dashed magenta;  /* TEST Outline. TO BE DELETED. */
}
body:after,
.trow:nth-child(1) {
    height:40%;  /* may want to tweak top and bottom cells for extra tall logo or extra short button. */
}
.tcell {
    display:table-cell;
    vertical-align:top;
}
.trow:nth-child(2) .tcell {
    vertical-align:middle;
}
img {
    display:block;
    max-width:100%;
    height:auto;
    border:0.062em solid #666;
    box-sizing:border-box;
    border-radius:0.5em;
    box-shadow:0.4em 0.4em 0.4em #999;
    margin:0.4em auto;
}
.trow:nth-child(1) img {
    margin:2em auto .4em;
}
    </style>
</head>
<body> 

<div class="trow">
    <img src="http://placehold.it/336x206?text=LOGO" width="336" height="206" alt="Logo">
</div>
<div class="trow">
    <div class="tcell">
        <img src="http://placehold.it/192x88?text=START" width="192" height="88" alt="Start">
    </div>
</div>

</body>
</html>

No thinking required.

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.