Help with positioning box/container to be responsive

HTML & CSS
1

The header on my page has a image background. I’d like help positioning the “bottom-box” so that it appears along the bottom of the image no matter what size screen is used for viewing.

What code can I add to have the “bottom-box” appear along the bottom of the image(header.jpg), no matter what size screen is used for viewing?

Here’s my current code:

<style>
#head { 
background:#181015 url( ../images/header.jpg) no-repeat; 
background-size: cover; min-height:720px; 
text-align: center; 
padding-top:98px; 
color:white; 
font-family:"Open sans", Helvetica, Arial"; 
font-weight:300; 
}

.bottom-box {
background-color: #000000;
opacity: 0.5;
height: auto;
width: 100%;
margin: 0 auto;
padding: 1px;
}
</style>

</head>
<body>

<!-- Header -->
<header id="head">
<div class="container">
<div class="row">
<h1 class="lead">HELLO</h1>
</div>
</div>
<div class="bottom-box"><br>
<p class="intro">GOODBYE</p></div>
</div>
</header>
<!-- /Header -->
2

Are you talking about a “sticky” footer? If so, Paul has several examples (you can search for them here). If not, a screen shot mockup of what you’re looking for might help.

3

Were you trying something like this which as Dave said above uses a sticky-footer technique.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}

html, body {
	margin:0;
	padding:0;
	height:100%;
}
#head {
	display:table;
	width:100%;
	height:100%;
}
.row {
	display:table-row;
}
.row.bottom-box {
	height:1px
}/* important - makes row hug content */
.tc {
	display:table-cell;
	vertical-align:top;
	padding:10px ;
}
#head {
	background:#181015 url( ../images/header.jpg) no-repeat;
	background-size: cover;
	text-align: center;
	color:white;
	font-family:"Open sans", Helvetica, Arial;
	font-weight:300;
}
#head h1{margin:0;padding:25px 0 10px;}
.bottom-box {
	background:rgba(0,0,0,0.8);
	padding: 1px 10px;
}
</style>
</head>

<body>
<header id="head">
  <div class="row top">
    <h1 class="tc lead">HELLO</h1>
  </div>
  <div class="row bottom-box">
    <p class="tc intro">GOODBYE</p>
  </div>
</header>
</body>
</html>

I assumed you wanted the footer text on top of the image but you could apply the image to the top part only if required.

4

Thanks for your replies.
This worked for me:

.bottom-box {
background-color: #000000;
opacity: 0.5;
height: auto;
width: 100%;
margin: 45% 0 0 0;
padding: 1px;
}
5

I very much doubt that the above code will work reliably as vertical margins are based on the width of the element so the 45% will vary depending on the width of the containing block.

45% also smells of magic numbers and magic numbers should be avoided in CSS. The min height 720px is also another magic number and doesn’t belong in a responsive design as it bears no relation to anything.

You may find that it works for your one use case but this is not the correct way to approach this problem :slight_smile:

3 Likes
6

Hi PaulOB

I was wondering how is % margin considered magic numbers?

because what I understand using auto can only be applied to content that sit alone for example adding content next to a div with margin auto doesn;t divide the remaining space but gets ignored?

so I am wondering how can it be considered as magic numbers when its kind of like absolute postioning but being able to flow with content for example moves closer to the edge when xcreen size shrinks naturally that the flow of responsive design.

maybe I am wrong but I am just curious I don;t mean any harm or anything as this was just a curious question since I use it alot?

7

Percent margin is not a magic number but the number 45 is a magic number :slight_smile:

45% of what and why does 45% work. What about 44% or 46% or 32%? What happens when content in the footer changes?

vertical margins refer to the width of the containing block so 45% on 2000px screen is going to move the footer down by 900 pixels. On a 1000px width screen the footer is only pushed down 450px yet the min-height magic number is 750px so there is no matching of anything. All are magic numbers and unusable in a responsive situation.

Lets take the actual code the OP has posted and I show a screenshot below of a 2000px screen and a 1000px screen approx.

As you can see the footer is never in the right place. I actually couldn’t find a screen width where it worked for me?

2065×1729 38.9 KB

On the other hand if you look at the code I provided (which I took time to construct) the footer is at the bottom of the screen no matter the height or width of the monitor and does not rely on magic numbers at all.

You can of course lead a horse to water but you can’t make him drink :slight_smile:

4 Likes
8

Thanks for all the replies.
I don’t know if I’m reading this thread incorrectly,
but it seems like I was originally asking for a box to appear along the bottom of an image,
and the replies were about a footer at the bottom of a page.
So, after messing around, it semed like the 45% work fairly well for my purpose.
If I’m reading this wrong, or there’s a better solution, I look forward to any reply.
Thanks again.

9

Did you look at my screenshot that shows how 45% behaves?

Did you understand that the 45% is based on the width of the containing block and not the height? That means it will vary considerably on the width of the viewport.

I’m only trying to help as I know the code you are using is not a viable approach.

If you just want text at the bottom of an image then you don’t have to make guesses with things like 45%.

Maybe we misunderstood what you are trying to do but I can tell you that 45% is not the answer. You need to use a method that doesn’t rely on magic numbers like 45% and 720px.

10

Thank you again for your reply/help.

I didn’t think this top margin % would be about “the width of the containing block”:

margin: 45% 0 0 0;

Can you help me with “a method that doesn’t rely on magic numbers like 45% and 720px”, that would allow a box to appear along the bottom of an image ?

any additional help will be appreciated.

11

Hi,
At first I was under the impression that you were wanting an image caption, but the only image I see is a background-image on your header.

So if you don’t have enough content to hold it open to the bg-image height it would need a min-height to hold it open.

Assuming the bg-image is what were talking about here, you can use flexbox with a min-height. Then set the .bot-box as margin-top:auto to push it to the bottom of the header.

I also pushed the .top-box down with margin-top:98px; since I saw that you had padding-top:98px; on your header. Using a margin will keep you from having to calculate padding in to the min-height.

Still not sure I understand what your after but see if this works and make adjustments as you need.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0;
}
#head {
   background:#181015 url( ../images/header.jpg) no-repeat;
   background-size:cover;
   text-align:center;
   /*padding-top:98px;*/
   color:white;
   font-family:"Open sans", Helvetica, Arial;
   font-weight:300;
}
#head {
   display:flex;
   flex-direction:column;
   min-height:500px; /*enter value for bg image height*/
}
.top-box {
   margin-top:98px; /*#head had padding-top:98px;*/
   background:rgba(0,0,0,0.8);
}
.bot-box {
   background:rgba(0,0,0,0.8);
   padding:1px 10px;
   margin-top:auto; /*moves flex item to bottom of parent box*/
}
h1.lead{
   margin:0;
   padding:15px 0;
}
</style>
</head>
<body>

<header id="head">
   <div class="top-box">
      <h1 class="lead">HELLO</h1>
   </div>
   <div class="bot-box">
      <p class="intro">GOODBYE</p>
   </div>
</header>

</body>
</html>
12

Okay, I see what your after now.

If you will upload the background image your using it would help us find the best way to handle this.

Is this related to the header boxes in your other thread?

1 Like
13

I still think you would be better off with the approach in my original post as any method that relies on a min height in px is going to leave your message below the fold on some screens.

The technique I used is similar to the sticky footer technique and gives you a full page image which is a common design pattern. The caption message will always be visible no matter the screen size.

If you don’t want the image at full screen you can reduce the percentage height of course.

14

Hi Paul,
I’m still unsure what Chrisj’s intention is, what I understand from the comments though, is that the bottom box message is to be at the bottom of the image.

Whether or not the box stays above the fold on smaller screens didn’t seem to be a concern, or I see no mention of that from Chrisj.

I’m sure a media query may be needed to control the background-size for smaller screens, that’s yet to be determined as the aspect ratio is unknown.

Seems like 45% is an attempt to get the box at the bottom of the image, obviously this would only work on their monitor/browser settings and more than likely for desktops only.

I don’t think keeping the bottom box above the fold was ever the intention, I could be wrong though.

It would be best if we could see the actual image and confirm the intentions. :slight_smile:

1 Like
15

Hi Ray,

Yes I was trying to offer something more usable that didn’t need magic numbers and worked for most screen sizes without media queries :slight_smile: but may have not been what Chris was after.

Chris’s original request of course needs no extra code because the text would always be at the bottom of an image simply by following it in the html. :wink:

I assumed the text was to be overlaid on the image itself but at the bottom part of the image and the current design pattern for that is the full page effect I offered. Chris’s min- height of 750px lead me to believe that this was a full page effect that was attempting to fit the viewport.

However you may be right but I still don’t think it’s a good design pattern to let the text go below the fold if all you have on the first page is just an image. :slight_smile:

Either way I think we’ve both covered all bases now :slight_smile:

1 Like
16

But it’s a header with a background image. :slight_smile:

And header leads me to think that content will follow, thus more to it than ‘just an image’.

Your right though, we’ve done all we can without further info from Chris.:slight_smile:

17

Yes but 720px tall!! That’s a full page not a header :slight_smile: But I know what you mean - I’m just being awkward :). I’m also just trying to lead the witness in the right direction :wink:

I was thinking of something like this.

If its just a header than really it should be an intrinsic ratio and not a fixed height so that it can scale up or down within reason. A blanket height of 720px is not really usable in a responsive site although of course you could control with multiple media queries depending on screen size but I often find that an awkward maintenance issue.

However if the image is half way down the page to start with then most of my assumptions will be wrong and the fold is not an issue as such and your methods would be correct :slight_smile:

1 Like
18

Hi @PaulOB

I was wondering would this be allowed?

I added the Position:relative to #head and than simply added position:absolute; bottom:0px; left:0px; to .bottom-box

and the results work obviously content that push at the bottom of the container would be overlapped by the footer of the image so what I did was repeated the .bottom-box and named it .invisi-box than gave it visibility:hidden; so if the content ever reached the bottom the invisi container will take up space to keep pushing the .bottom-box from taking over the content.

this is the results:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Slide Toggle Menu - Height Transition</title>
<style>
#head { 
	background:#181015 url( Koala.jpg) no-repeat; 
	background-size: cover; min-height:720px; 
	text-align: center; 
	padding-top:98px; 
	color:white; 
	font-family:"Open sans", Helvetica, Arial"; 
	font-weight:300; 
	position:relative;
}

.bottom-box {
	background-color: #000000;
	opacity: 0.5;
	height: auto;
	width: 100%;
	margin: 0 auto;
	padding: 1px;
	position:absolute;
	bottom:0px;
	left:0px;
}
.invisi-box {
	background-color: #000000;
	opacity: 0.5;
	height: auto;
	width: 100%;
	margin: 0 auto;
	padding: 15px 1px 1px 1px;
	visibility:hidden;

}
</style>

</head>
<body>

<!-- Header -->
<header id="head">
	<div class="container">
		<div class="row">
			<h1 class="lead">HELLO</h1>
		</div>
	</div>

	<div class="invisi-box"><br>
		<p class="intro">GOODBYE</p></div>
	</div>
	
	<div class="bottom-box"><br>
		<p class="intro">GOODBYE</p></div>
	</div>
</header>
<!-- /Header -->
</body>
</html>
19

Yes you could place an absolute element at the bottom of a container or background image and in some circumstances that would be fine.

As usual with CSS it depends on the context and what comes next. If you had lots of text then it may not fit within its relative container and overflow the page. If it’s just a couple of words on one line then you can probably accommodate it easily enough.

Adding duplicate content to hold the page open is of course a bad practice and bad for seo and could get you marked down especially as you have hidden the text. I would have just padded out the container to preserve the absolute element.

Absolute positioning is fine in small doses but when you have unknown amounts of text then its best to find a more robust solution that won’t break if someone resizes the text or your cms outputs too many lines.

In the end it all depends on context so sometimes absolute positioning is a good answer and sometimes its not.

One of the key things I’ve learned is always to say “What IF?”

What if there are ten lines of text.

What if the image is smaller

What if the user uses text zoom only.

What if an unbroken word is longer that the space I allocated.

What if images don’t load.

Why is 750px min-height the answer?

and so on … :slight_smile:

5 Likes
20

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