I have a middleContent div which has two sub-divs acting as columns. The middleMain div works fine, the middleRight div doesn't show unless I fill it with some content or use absolute positioning.
This is a picture of my page:
http://imageshack.us/photo/my-images/403/tempzk.jpg/
With the following CSS:
#middleContent
{
position:relative;
min-height:500px;
height:auto;
}
#middleMain
{
float:left;
height:100%;
left:0;
right:auto;
}
#middleRight
{
position:absolute;
float:right;
width:100px;
height:100%;
right:0;
background-color:Orange;
top: 0px;
}
However, I need it to work with relative positioning since the height expands depending on the content in middleMain. MiddleRight doesn't have any content in it (but needs the capability to add content so I can't just use a picture), so I basically need to display an empty div (but with background color) that takes up the height of the whole page.
change your CSS to :
#middleContent
{
position:relative;
min-height:500px;
height:auto;
overflow: hidden;
}
#middleMain
{
float:left;
height:100%;
left:0;
right:auto;
}
#middleRight
{
position:relative;
float:right;
width:100px;
height:100%;
right:0;
background-color:Orange;
top: 0px;
padding-bottom: 9000px;
margin-bottom: -9000px;
}
http://jsfiddle.net/fXHqL/1/
Add this line to #middleRight
display:block;
it should work.
Related
I need to create a website which will always fill the screen, as a result I'm using percentages.
I'm placing a fixed header of 10% height on top. And a section I give a margin-top of 10%. One would presume they would be flush against eachother, but this is not the case. Would anyone want to help?
I have the following HTML:
<header></header>
<section></section>
with quite a straight forward piece of css:
html, body {
height:100%;
}
header, section {
width:100%;
}
header {
height:10%;
background:red;
position:fixed;
top:0;
left:0;
}
section {
background: blue;
height:90%;
margin-top:10%;
}
You can see this live at http://jsfiddle.net/DanielApt/SeJfu/.
Probable solution:
Remove margin from section. Just write
section {
background: blue;
height:90%;
top:10%;
position:relative;
}
Here is the fiddle.
section {
background: blue;
height:90%;
margin-top:10%;
position:fixed;
left: 0;
}
Should do the trick (i.e. need it to be fixed positioning and dump the left value)
check if this is what you are looking for http://jsfiddle.net/Mohinder/nj2UB/
HTML
<header></header>
<section></section>
CSS
html, body {
height:100%;
margin:0px;
padding:0px;
}
header, section {
width:100%;
}
header {
height:10%;
background:red;
position:fixed;
top:0;
left:0;
}
section {
background: blue;
height:90%;
top:10%;
position:relative;
}
You have check it solved your problem.
you remove "margin" from section.
HTML
<header></header>
<section></section>
CSS
html, body {
height:100%;
margin:0px;
padding:0px;
}
header, section {
width:100%;
}
header {
height:10%;
background:red;
position:fixed;
top:0;
left:0;
}
section {
background: blue;
height:90%;
top:10%;
position:relative;
}
im playing around with a loading bar in this fiddle, and i have this code
html
<div id="back"><span id="text">loading...</span></div>
css
#back {
width:100px;
background-color:#bbbbbb;
}
#text {
z-index:2;
height:30px;
position: absolute;
margin:auto;
}
div{
height:30px;
position: absolute;
}
yet the span does not have a margin, it looks like this
when i give it a normal margin value it works.
i have also tried margin: 0 auto; but also with no success. and when i try margin:10px auto; i get the 10px but not the auto.
Applying auto margin to an absolutely positioned inline element with unknown width introduces various problems.
I had success centering the text by setting line-height and text-align:center like so:
#text {
position: absolute;
z-index:2;
width:100%;
height:30px;
line-height:30px;
text-align:center;
}
http://jsfiddle.net/ruzED/
It's because the text is position absolute. Try this:
#back {
width:100px;
background-color:#bbbbbb;
text-align:center;
}
#text {
z-index:2;
height:30px;
line-height:30px;
position: relative;
}
JSFiddle: http://jsfiddle.net/h6BRn/13/
I would like to align an absolute positioned div. Top:50%, bottom:50% not working, what's the solution for this?
CSS
#container {
position:relative;
background:red;
width:600px;
height:600px;
}
#cen {
position:absolute;
width:300px;
height:300px;
background:grey;
top:50%;
bottom:50%;
}
HTML
<div id="container">
<div id="cen"></div>
</div>
http://jsfiddle.net/2xq5F/
To center something vertically, you need do add a top: 50% and a negative margin-top: -(elementHeight/2).
In your case it will be
#cen {
position:absolute;
width:300px;
height:300px;
background:grey;
top:50%;
margin-top: -150px;
}
You can also do it this way:
#cen {
position:absolute;
width:150px;
height:150px;
background:grey;
top:0;
bottom:0;
left: 0;
right: 0;
margin: auto;
}
Demo at: http://jsfiddle.net/audetwebdesign/EBmy3/
Big advantage, no math required.
However, this works because you specified width and height. This gets trickier when you use percentages.
Note: I made the blocks half the size so they fit in the fiddle window... will also work with the larger blocks.
Works Well With Replaced Elements
This technique does a pretty good job if you are positioning an image, which has specific dimensions (though you may not know them).
See example in fiddle.
Vertical alignment is based off of other inline elements. The best way I've found to vertically align something is to add a psuedo class.
It's easy to vertically align something if you know the dimensions, like some of the other answers have noted. It makes it harder though, when you don't have specific dimensions and needs to be more free.
Basically, the method aligns the psuedo class with the rest of the content to align middle whatever is inside the container.
div#container {
width: 600px;
height: 600px;
text-align:center;
}
div#container:before {
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
div#cen {
display:inline-block;
vertical-align:middle;
}
I'm not sure what you need it to be absolutely positioned for, but if you trick CSS into thinking your container is a table-cell, you can use the vertical-align property for a fully dynamic layout.
#container {
position:relative;
background:red;
width:100px;
height:200px;
display: table-cell;
vertical-align: middle;
}
#cen {
width:100px;
height:20px;
background:grey;
}
If those are the real measurements, why not just do this?
#cen {
position: absolute;
width: 300px;
height: 300px;
top: 150px;
background:grey;
}
I want to know the best way to achieve the below image in CSS+HTML.
I'm having difficulty explaining in words what I want, so I guess a picture would make it more clear:
While the second and third parts are doable. I'm curious to know the best way to achieve the first one (Blue menu). If i split my page into three parts (based on the menus), in the case of blue, my div items must float out of the horizontal width of the menu, but within the vertical.
Thoughts wise ones?
Working Fiddle
You can see i have used position:relative on parent and position:absolute on child to make it flow out of that li element.
ul {
list-style:none;
width:906px;
height:600px;
}
li {
float:left;
display:inline-block;
border:1px solid #ccc;
width:300px;
height:600px;
text-align:center;
position:relative;
}
.selected {
background:yellow;
}
.div {
position:absolute;
left:-150px;
width:600px;
height:80px;
border:1px solid #000;
background:#fff;
z-index:2;
}
#div-1 {
top:30px;
}
#div-2 {
top:140px;
}
#div-3 {
top:250px;
}
You can do it by position: absolute.
.blueDiv{
position:relative;
}
.innerDiv{
position:absolute;
top: (your choice);
left: 50%;
margin-left: -(innerDivSize / 2);
}
If you don't have the width of the elements inside ... you can try to push them to the left and right by:
.innerDiv{
position:absolute;
top: (your choice);
left: 0;
right: 0;
}
But that will work only if the parent element is not on the very left or very right of the page.
I'm trying to create a HTML CSS Layout using div tag.
Code here
Now it display a vertical bar. I want to avoid this vertical bar, and would like to display only if the content is big.
May you wnt an Sticky Footer than put your footer outside the #container.
Check this http://jsbin.com/ujemaq/17
EDIT:
Ok your actual problem arises with the height ambiguity, see these line:
#container{
min-height: 100%;
width:100%;
height:100%; /* this causes container to a 100% height of body*/
}
#header{
width:100%;
height:55px; /* this takes 55px of container height*/
/*border:2px solid;*/
}
#menu{
width:100%;
height:20px; /* this takes another 20px of container height*/
/*border:2px solid;*/
}
#left-nav{
width:20%;
height:100%;
float:left;
/*border:2px solid;*/
}
#content{
height:100%; /*You thinking of getting full height of container but the 75px height is already grabbed by header and menu, so while expanding content to 100% height a vertical scrollbar appears */
/*border:2px solid;*/
}
apply this css
body,html{
height:100%;
}
#container{
min-height: 100%;
width:100%;
height:100%;
}
#header{
width:100%;
height:55px;
/*border:2px solid;*/
}
#menu{
width:100%;
height:20px;
/*border:2px solid;*/
}
#left-nav{
width:20%;
float:left;
/*border:2px solid;*/
}
#content{
height:85%;
/*border:2px solid;*/
}
#footer{
background-color:#FFA500;text-align:center;
}
</style>