Jump to content
Sign in to follow this  
Destramic

absolute position

Recommended Posts

I'm having trouble getting the .body-container and .left-container to follow suit with the .content, the height of both divs don't seem to alter down.  Also z-index doesnt work on .left-container as im trying to stop the background to show through that particular div.

ive read it may be because of the absolue positioning.  Any help on these matters would be great.

thank you

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
	background:url("https://image.ibb.co/h93Ndo/abstract.jpg") top right no-repeat; background-attachment:fixed;
	margin: 0;
}
.body-container{
	background-color: #ffffff;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	margin: auto;
	width: 98%;
	height: auto;
  	position: absolute;
  	top: 0; left: 0; bottom: 0; right: 0; 
	opacity: 0.7;
	margin-top: 10px;
}
.header{
	position:relative;
	display: block;
	width: 100%;
	background-color: #3A98FD;
	height: 70px;
	border-top-right-radius: 15px;
	border-top-left-radius: 15px;
}
.left-container{
	display: block;
	color: #ffffff;
	float: left;
	background-color: #3B4A53;
	width: 12%;
	height: auto%;	
	min-height: 100%;	
}
.content{
	position: absolute;
	display: inline-block;
	float: right;
	width: 100%;
	height: auto;
	min-height: 100%;
}
</style>
</head>
<body>
<div class="body-container">
	<div class="header"></div>
	<div class="left-container">menu</div>
	<div class="content">
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>hello world
	</div>
</div>
</body>
</html>

 

Share this post


Link to post
Share on other sites

For this simple situation, I'd use flex. With a decent transpiler it'll work well in ie11 (10 mostly works once transpiled).

.body-container{
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	align-items: stretch;
	background: red;
	color: white;
	min-height: 100vh;
}
.header{
	flex-grow: 0;
	background: gold;
}
.two-cols{
	flex-grow: 1;
	display: flex;
	flex-direction: row;
	justify-content: stretch;
}
.left-container{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	flex-grow: 1;
	flex-basis: 20%;
	background: green;
}
.content{
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	flex-grow: 1;
	flex-basis: 80%;
	background: blue;
}
<div class="body-container">
	<div class="header">Here's the header</div>
	<div class="two-cols">
		<div class="left-container">menu</div>
		<div class="content">hello world</div>
	</div>
</div>

Give that a shot. Once you get that working, you could always start the move toward semantic markup with header, main, article, and sidebar elements.

Share this post


Link to post
Share on other sites

that works much better thank you max.

when i try apply a margin to the top of the page it pushes the body down too...how can this be fixed please?

and also i tried to add z-index to the header and left container to stop bg image showing through but its also not work. (trying to get the bg image to only show through content div)

 

thanks again.

 

updated:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dashboard</title>
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
*{
	font-family: 'Titillium Web';
}
body {
	background:url("https://image.ibb.co/h93Ndo/abstract.jpg") top right no-repeat; background-attachment:fixed;
	margin-top: 10;
}
.body-container{
	display: flex!important;
	flex-direction: column;
	justify-content: stretch;
	align-items: stretch;
	min-height: 100vh;
	margin: auto;
	width: 97%;
	opacity: 0.7;
	z-index: -1;
}
.header{
	flex-grow: 0;
	background: #3A98FD;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	z-index: 1;
}
.two-cols{
	flex-grow: 1;
	display: flex;
	flex-direction: row;
	justify-content: stretch;
}
.left-container{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	flex-grow: 1;
	flex-basis: 15%;
	z-index: 1;
	background: #3B4A53;
}
.content{
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	flex-grow: 1;
	flex-basis: 85%;
	background: #ffffff;
	z-index: 1;
}
</style>
</head>
<body>
<div class="body-container">
	<div class="header">Here's the header</div>
	<div class="two-cols">
		<div class="left-container">menu</div>
		<div class="content">
			hello world
		</div>
	</div>
</div>
</body>
</html>

 

Share this post


Link to post
Share on other sites

It sounds like you are experiencing what is called "float collapse".

When all the elements inside a containing element are floated, the element "collapses" and has no height.  

This is discussed along with other issues in this article by Chris Coyier.

In summary this problem would be solved if you had another element (a footer for example)  that uses one of the techniques to clear the floats.

 

.clear { clear: both; }

And style the element using:

<div class="clear"></div>

 

Share this post


Link to post
Share on other sites

You've applied the top margin to the body element, so of course it's pushing the body down. Apply top padding to body-container? Sorry - not quite sure what you're asking on this one. As for the background, that really shouldn't be a problem with the structure as it is. gizmola's correct about float collapse, but (I could be wrong here) I'm not sure it applies in this case. If you need to add z-index (again, not sure why at this point) add position: relative; to the divs. That should allow the z-index to work as expected.

Share this post


Link to post
Share on other sites

thank you gizmola, clear worked like a dream.  I'll also take a closer look at that article too :)

the layout is looking great thanks to you guys, but im still having the problem with z-index not working when applied to menu div.  the .body-container has opacity: 0.7; but i want .left-container (menu) layer to come forward so the background doesn't appear through it like so

dash.png

 

here is the updated html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dashboard</title>
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
*{
	font-family: 'Titillium Web';
}
body {
	background:url("https://image.ibb.co/h93Ndo/abstract.jpg") top right no-repeat; background-attachment:fixed;
	margin: 0;
	margin-top: 10px;
}
.body-container{
	position: relative;
	display: flex!important;
	flex-direction: column;
	justify-content: stretch;
	align-items: stretch;
	min-height: 99vh;
	margin: auto;	
	width: 97%;
	opacity: 0.7;
	z-index: -1;
}
.header{
	flex-grow: 0;
	background: #3A98FD;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	z-index: 1;
	height: 70px;
}
.two-cols{
	flex-grow: 1;
	display: flex;
	flex-direction: row;
	justify-content: stretch;
}
.left-container{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	flex-grow: 1;
	flex-basis: 13%;
	z-index: 1;
	background: #3B4A53;
}
.content{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex-grow: 1;
	flex-basis: 85%;
	background: #ffffff;
	z-index: 1;
	vertical-align: text-top;
	vertical-align: top;
}
.clear{
	clear: both;
}
</style>
</head>
<body>
<div class="body-container">
	<div class="header"></div>
	<div class="two-cols">
		<div class="left-container">menu</div>
		<div class="content">
			Content
		</div>
	</div>
	<div class="clear"></div>
</div>
</body>
</html>

 

thank you for your help again guys!

Share this post


Link to post
Share on other sites

Applying opacity to a div affects everything within the div, including type and nested divs. Use background opacity via rgba() to do what you're wanting:

body{
	background: url("https://image.ibb.co/h93Ndo/abstract.jpg") top right no-repeat;
	background-attachment: fixed;
}
.body-container{
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	align-items: stretch;
	background: red;
	color: white;
	min-height: 100vh;
}
.header{
	flex-grow: 0;
	background: rgba(58, 152, 253, 1);
}
.two-cols{
	flex-grow: 1;
	display: flex;
	flex-direction: row;
	justify-content: stretch;
}
.left-container{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	flex-grow: 1;
	flex-basis: 20%;
	background: rgba(59, 74, 83, 1);
}
.content{
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	flex-grow: 1;
	flex-basis: 80%;
	background: rgba(255, 255, 255, .7);
}

Also, is there any reason why you needed to add the !important to the display rule on the .body-container div?

@gizmola - apparently I'm going to need to read that article as well as I've not found float collapse to be an issue using flexbox. Or at least I've not recognized that that's what it is... Anyway - thanks for the link!

  • Like 2

Share this post


Link to post
Share on other sites

it was just me trying all options to add transparency to that div.

but thank you both for you time and efforts help me :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.