Jump to content

absolute position

Destramic

By Destramic
in CSS Help

 Share

Recommended Posts

Destramic Advanced Member

Destramic

Posted
Posted

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>

 

Link to comment
Share on other sites
maxxd Prolific Member

maxxd

Posted
Posted

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.

Link to comment
Share on other sites
Destramic Advanced Member

Destramic

Posted
  • Author
Posted

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>

 

Link to comment
Share on other sites
gizmola Prolific Member

gizmola

Posted
Posted

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>

 

Link to comment
Share on other sites
maxxd Prolific Member

maxxd

Posted
Posted

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.

Link to comment
Share on other sites
Destramic Advanced Member

Destramic

Posted
  • Author
Posted

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!

Link to comment
Share on other sites
maxxd Prolific Member

maxxd

Posted
Posted

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
Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

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.