I use CSS to style aside. After applying this style, aside moves to left but I want it at the right of the page. I want aside to have a height that is relational to the container. i.e. I want its bottom margin to touch the top of the footer no matter what is the height of the container.
Style:
aside {
width:260px;
float:right;
border-left:1px dashed #aaa;
padding-right:15px;
padding-left:15px;
text-align:center;
position:absolute;
overflow:auto;
background-color:blue;
border-radius:10px;
box-shadow:0px 0px 7px rgba(0,0,0,0.5);
}
Remove position: absolute;. If you want to keep position: absolute; you can add right: 0; instead.
html,body{
height: 100%;
}
aside {
width:260px;
float:right;
border-left:1px dashed #aaa;
padding-right:15px;
padding-left:15px;
text-align:center;
overflow:auto;
height: 100%;
background-color:blue;
border-radius:10px;
box-shadow:0px 0px 7px rgba(0,0,0,0.5);
}
<aside>I'm at the right side</aside>
As Gustaf said, you have to remove the 'position: absolute' to switch the side. To define the height, all the parents of element, needs to have a defined height, so the children element will have a reference to render your own height, like this:
html, body{
height: 100%;
}
aside {
width:260px;
float:right;
border-left:1px dashed #aaa;
padding-right:15px;
padding-left:15px;
text-align:center;
overflow:auto;
background-color:blue;
border-radius:10px;
box-shadow:0px 0px 7px rgba(0,0,0,0.5);
height: 100%;
}
<html>
<head></head>
<body>
<aside>I'm at the right side</aside>
</body>
</html>
Related
I have read through countless threads on here and others, but have yet to find one that works for me. I am trying to get this darn div to center on the bottom of my page. It is kind of like a footer, but not exactly.
HTML :
<div id="menucontainer">
<div id="menu">
<ul>
<li><img style="width:270px; height:150px; padding-right:25px; padding-top:15px;" src="style/images/UAH.png"></li>
<li>another big test</li>
</ul>
</div>
</div>
CSS :
#menucontainer{
position:fixed;
bottom:0;
}
#menu{
position:fixed;
padding-top:5px;
padding-bottom:15px;
background-color:rgba(0,0,0,0.5);
bottom:0px;
height:200px;
width:1218px;
border:3px solid #000000;
box-shadow:0px -5px 5px #888888;
}
li{
float:left;
margin-left:-10px;
margin-right:-10px;
text-align:center;
list-style:none;
height:190px;
width:300px;
border-left:2px solid #FFFFFF;
border-right:2px solid #FFFFFF;
}
This should be all you need:
#menucontainer {
position: fixed;
bottom: 0;
width: 100%; /* ADD - make sure this container spans the entire screen */
text-align: center; /* Align contents to the center */
}
#menu {
/* remove position: fixed */
display: inline-block;
margin: 0 auto; /* Centers the block */
text-align: left; /* Reset the text alignment */
... /* The rest stays the same */
}
<style>
#menucontainer{
position:absolute;
bottom: -420px;
height: 200px;
margin: 0 auto;
position: relative;
width:1218px;
}
#menu{
position: relative;
padding-top:5px;
padding-bottom:15px;
background-color:rgba(0,0,0,0.5);
bottom:0px;
height:200px;
border:3px solid #000000;
box-shadow:0px -5px 5px #888888;
}
li{
float:left;
margin-left:-10px;
margin-right:-10px;
text-align:center;
list-style:none;
height:190px;
width:300px;
border-left:2px solid #FFFFFF;
border-right:2px solid #FFFFFF;
}
</style
DEMO
I've made some fundamential changes.
Firstly, your #menucontainer. You don't need fixed position - we can use 'sticky footer' technique to make it allways be hitched to the bottom; as we know the width, margin: 0 auto; will help us center it horizontally.
#menucontainer{
position:relative;
width: 1218px;
height:200px;
margin: 0 auto;
}
Secondy, I've added some fake content (.fake-content div) to help you get the idea how this all will look on site.
I've also added clearfix method for proper height rendering of an elements with floated children. More info here (also easy to find anywhere else).
Sticky footer technique has been taken from CSS Tricks site
Any questions? Is that what you was looking for?
I have a basic HTML page where everything is wrapped inside a mainWrapper div and secondWrapper div.
everything is set to 960px size (the pageHeader, the pageContent and pageFooter).
I need to keep everything 960px apart from the pageFooter.
This is my CSS code:
<style type="text/css">
<!--
body {
}
#secondWrapper {
margin-left:auto;
margin-right:auto;
width:960px;
min-width:910px;
}
#mainWrapper{
margin-left:auto;
margin-right:auto;
width:960px;
}
#pageHeader {
height:80px;
width:100%;
min-width: 918px;
border-bottom: solid 1px #ededed;
z-index:1000;
position:relative;
}
#pageContent {
clear:both;
width:100%;
min-width: 918px;
background-image:url(img/map.png);
height:600px;
background-repeat:no-repeat;
background-position:center;
box-shadow: 6px 0px 5px -5px #999, -6px 0px 5px -5px #999;
z-index:1;
}
#pageFooter {
background-color:#CCC;
width:100%;
min-width: 918px;
}
#logo{
position: absolute;
margin-left:29px;
background-color:#cb202d;
width:120px;
height:110px;
top: 0;
text-align:center;
vertical-align:center;
display:block;
font-family:Tahoma, Geneva, sans-serif;
font-size:24px;
color:#FFF;
font-weight:bold;
float:left;
z-index:1000;
-webkit-box-shadow: 0 5px 6px -6px grey;
-moz-box-shadow: 0 5px 6px -6px grey;
box-shadow: 0 5px 6px -6px grey;
}
#logoTxt{
position: relative;
top:26%;
}
#yourCurrentTime{
float:left;
left:220px;
top:10%;
position:relative;
border: 10px solid #1abc9c;
border-radius:4px;
}
#arrow-down {
position:absolute;
width: -23px;
height: 2px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #1abc9c;
left: 99px;
top: 30px;
}
#b {
position:absolute;
width:200px;
height:115px;
z-index:10000000;
left: -59px;
top: 48px;
background-color:#333;
display:none;
}
div#a:hover div#b {
display: inline;
}
div#a:hover {
background-color:#eceded;
cursor:pointer;
}
div#divBtn:hover {
background-color:#4a4a52;
cursor:pointer;
}
div#a{
width:140px;
height:47px;
position:absolute;
left: 825px;
top: 0px;
}
-->
</style>
I did try a few solutions found on Google and stackoverflow like this:
html,
body {
margin:0;
padding:0;
height:100%;
}
but that didn't work for me!
Any help would be appreciated.
Here is the Jsfiddle: http://jsfiddle.net/crf121359/jwgfH/
You need to do it like this:
HTML
<div class="wrap">
<div class="wrap_inner>
<!-- Pwraput here your pageHeader and pageContent -->
</div>
</div>
<footer>
</footer>
CSS
.wrap {
position: relative;
min-height: 100%;
padding-bottom: 200px /*footer height*/
}
.wrap_inner {
width: 960px;
margin: 0 auto;
}
footer {
width: 100%;
height: 200px;
position: absolute;
left: 0;
bottom: 0;
}
You just need to take your pageFooter outside of the wrapper.
Here's a working example:
http://jsfiddle.net/jwgfH/3/
You should see how it looks here, not inside the little frame:
http://jsfiddle.net/jwgfH/3/show
width: 100%;
only works if the parent element has a width defined.
Try giving your body element a max-width and see if that works
can you show your html too ? if the parent div or container is having 100% width then it should show the perfect result.
If you want to create a webpage that's 960px wide, define it in your <body> tag's by placing width:960px; in the CSS.
Then, use width:100%; in the rest of your elements - only for those that you want to display as 960px. The rest can be divided by using width:50%;, width:25%;, which is 50% of 960px and 25% of 960px respectively.
Also, height:100% is negligible, the rest of the elements will automatically define the height of the webpage, as long as you place them correctly.
In short, do this:
body {
width:960px;
margin:0 auto;
}
#secondWrapper {
width:100%;
float:left;
}
...and so on and so forth.
(NOTE: To solve your positioning problem, float:left is probably the best way to go. Use it on most of the elements you need to position accurately. If not, the browser will estimate where it will go.)
AFTER EDIT:
If you want a 960px gap between the #pageContent and #pageFooter, you can always define a margin-top like this:
#pageFooter {
margin-top:960px;
}
I'm trying to build a page with a big div in the middle which "lays" on to other divs on the left and on the right with the code at the end of the question. the three divs should be contained in a further div (called outer) and it's height should be (almost) exactly the height of the div in the middle. Because the height of the div in the middle is not fix this is true forthe outer div as well.
Trying to use relative positioning sets my middle-div below the ones on the left and the right. Setting th etop of the middle div leaves a blank area between the middle div and the lower border of the outer div. Using absolute positioning results in a collapsed outer div.
I would be greatful for any hint or advise.
parascus
<html>
<head>
<style type="text/css">
#outer {
width:300px;
border:1px solid #000000;
}
#left {
position:relative;
display:inline-block;
float:left;
margin:3px;
width:50px;
border:1px solid #C08080;
}
#right {
position:relative;
display:inline-block;
float:left;
left:185px;
margin:3px;
width:50px;
border:1px solid #C08080;
text-align:right;
}
#middle {
background-color: #FBE6AD;
display: inline-block;
overflow: hidden;
position: relative;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
left: 50px;
top: -48;
width: 200px;
}
</style>
</head>
<body>
<div id='outer'>
<div id='left'>DIV Left</div>
<div id='right'>DIV Right</div>
<div id='middle'>
DIV Middle<br>
with an<br>
unknown height<br>
which has effect on the outer height.
</div>
</div>
</body>
</html>
It should look like this:
But I get this:
Or this:
The solution (triggered by fenix) was:
<html>
<head>
<style type="text/css">
#outer {
border:1px solid #000000;
display:inline-block;
width:300px;
}
#x {
display:table-row;
}
#left {
background-color: #c0c0c0;
position:relative;
display:inline-block;
float:left;
margin:3px -5px 0px 3px;
width:50px;
border:1px solid #C08080;
padding:0px;
}
#right {
background-color: #c0c0c0;
position:relative;
display:inline-block;
float:left;
margin:3px 3px 0px -5px;
width:50px;
border:1px solid #C08080;
text-align:right;
}
#middle {
background-color: rgba(250, 220, 200, 0.8);
display: inline-block;
float:left;
overflow: hidden;
position: relative;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
width: 200px;
margin:3px 0px 6px 0px;
z-index:10;
}
</style>
</head>
<body>
<div id='outer'>
<div id='x'>
<div id='left'>DIV Left</div>
<div id='middle'>
DIV Middle<br>
with an<br>
unknown height<br>
which has effect on the outer height.
</div>
<div id='right'>DIV Right</div>
</div>
</div>
</body>
</html>
This ends in:
Have you considered a table with three cells in one row? Not entirely sure what the content will be, but that might be an alternate route?
Would this be on only one page? Or across multiple pages? If across multiple pages then you could utilize a Master page with the relevant styling reflecting ContentPlaceHolders?
The purpose of position:relative is to set the origin point for absolutely-positioned children elements.
Therefore, only the outer element needs position:relative, the inner elements need position:absolute (along with top, left or bottom, right positioning).
Absolutely-positioned elements are also removed from the layout flow, so inline-block and float should be removed since it has no layout context.
Give this a try:
#outer {
width:300px;
border:1px solid #000000;
position:relative;
min-height:200px
}
#left {
float:left;
margin:3px;
width:50px;
border:1px solid #C08080;
}
#right {
float:right;
left:185px;
margin:3px;
width:50px;
border:1px solid #C08080;
text-align:right;
}
#middle {
background-color: #FBE6AD;
overflow: hidden;
position: absolute;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
left: 50px;
top: 0;
width: 200px;
}
bonus props to whoever can figure out why this isn't working. for some reason, my text "ie content, menu, footer" is inheriting the opacity and not sitting at 1 opacity and being fully visable.
I have it set to both be a class and ID as I have tried both ways, and am fairly beginner with CSS actually
<style type="text/css">
div#page {
border:0px solid purple;
width:700px;
margin:0 auto;
padding:5px;
text-align:left;
background-image:url('images/layout.jpg');
}
div {
text-align:center;
}
div#header {
border:2px solid red;
width:695px;
height:30px;
}
div#mostpop {
border:2px solid black;
width:195px;
float:Right;
margin:10px 0px 10px 5px;
height:245px;
background-color:#ffffff;
opacity:0.7;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div#recent {
border:2px solid black;
width:195px;
float:Right;
margin:10px 0px 10px 0px;
height:245px;
position: relative;
left: 204px;
top: 255px;
background-color:#ffffff;
opacity:0.7;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div#content {
border:2px solid black;
width:495px;
margin:10px 0 10px 0px;
min-height:500px;
background-color:#ffffff;
opacity:0.7;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div#footer {
border:2px solid black;
width:695px;
height:30px;
background-color:#ffffff;
opacity:0.7;
filter:alpha(opacity=60); /* For IE8 and earlier */
div.recent p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
opacity:1;
}
div.content p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
opacity:1;
}
div.mostpop p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
opacity:1;
}
div.footer p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
opacity:1;
}
div.header p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
opacity:1;
}
</style>
<div id="page">
<!--<div id="header">Header</div>-->
<div class="mostpop" id="mostpop"><p>Menu</p></div>
<div class="recent" id="recent"><p>Menu</p></div>
<div class="content" id="content"><p>Content</p></div>
Opacity should always inherit from its parent. If you have a div with 50% opacity, and then you set some content within the div to 50% as well, then the resulting inner div will be 25% overall, I'm not completely sure, but I don't think it's possible to make the child elements LESS transparent than its parents.
If you just want the div to have a transparent background, then you don't need to use opacity at all, you can use background: rgba(255, 255, 255, 0.5); for half transparent white, while leaving the foreground text colour intact. There are also workarounds for older versions of IE for this as well, but it should work fine for ie9.
CSS opacity is a bit wonky - once you set a particular opacity on an element, all children of that element are forced to assume at least the same opacity. You can't get around this with child style overrides.
The standard workaround is to create two elements, and position the second absolutely 'over' the first one with a z-index. The lower element gets your partial transparency, the higher one gets your opaque style.
<div style="position: relative">
<div id="transparency" style="position: absolute; top: 0; left: 0">... transparent stuff here </div>
<div id="regular_content" style="position: absolute; top:0;left:0;z-index:1">...</div>
</div>
Here is my code for css div based layout. I want a search box inside the #header div. But when I add margin or padding to the #header .search class, it will add this to height of #header div. Please help me how can I get it correctly. I want the search box at 10px margin-bottom from where #header div ends.
#container {
margin:0px auto;
width:984px;
border-left:#FFFFFF solid 1px;
border-right:#FFFFFF solid 1px;
}
#header {
height:150px;
background: url(./images/header.png) no-repeat;
border-bottom:#FFFFFF solid 1px;
}
#header .search {
margin:0px auto;
text-align:center;
width:620px;
}
You could position the search box absolutely inside the #header
#container {
margin:0px auto;
width:984px;
border-left:#FFFFFF solid 1px;
border-right:#FFFFFF solid 1px;
}
#header {
height:150px;
background: url(./images/header.png) no-repeat;
border-bottom:#FFFFFF solid 1px;
position:relative; // parent container
}
#header .search {
margin:0px auto;
text-align:center;
width:620px;
position:absolute;
left:0; bottom:10px;
}
This way your search box won't ever affect the parent containers.
Demo: http://jsfiddle.net/fparent/AyyZG/
insert a display on both tags, and add a margin-bottom. should work