How do I vertically and horizontally align a div without knowing its width and height?
example:
<body style="padding:0px; margin:0px;">
<div id="FancyOverlay" style=" position:fixed; width:100%; height:100%; background-color:green;">
<div id="Grandparents" style="position:absolute; left:50%; z-index:1;">
<div id="Parent" style="position: relative; left:-50%; padding:10px; border:1px solid black;">
<img id="fancyImage" src="https://appharbor.com/assets/images/stackoverflow-logo.png"></img>
</div>
</div>
</div>
</body>
Test this code so you can see what I'm trying to do. #Parent needs to be in the center of the screen. I've already aligned it horizontally but I can't get it vertically to work.
btw:
I dont know the width and the height of the image, this was just an example.
Related
This is somewhat related to this question but I'm trying to achieve this when the div is aligned vertically.
More or less, this is what I'm trying to achieve:
Main Div: Take the rest of the screen
Footer Div: Take as much space as needed
The css for float:bottom isn't available, so I'd like to hear some alternatives.
Here's what I have at the moment:
<div id="main_div" style="height:100%;overflow:scroll">
...Contents
</div>
<div id="footer_div" style="height:50px">
...Contents
</div>
Footer shows below main_div and the user has to scroll down to see it, instead of main_div adjusting itself to take just enough screen height to prevent the scrollbar to show up.
you can check this fiddle
http://jsfiddle.net/sarfarazdesigner/3fLca/
let me know am understand right or wrong? because what i have done what i understood by your question.
#main_div{
position:absolute;
left:0;
right:0;
top:0;
bottom:50px;
overflow:auto;
background:#eee;
}
#footer_div{
position:absolute;
left:0;
right:0;
bottom:0;
background:#ddd;
height:50px;
}
You can set the footer a fixed position at the bottom of the page. Any overlapping content will scroll behind it.
<html>
<head>
</head>
<body>
<div class="wrapper" style="width: 100%; border:1px solid blue;">
<p>Your website content here.</p>
<p>Your website content here.</p>
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer" style="width: 100%; position:fixed; left:0; bottom: 0; border:1px solid red;">
<p>FOOTER CONTENT HERE</p>
</div>
</body>
</html>
I have 3 divs in a wrapper.
one of this divs contains my content class="cont" this div has a dynamic height. The other divs navi-left and und navi right should have a hight like div cont. i have tried this but it dont work. can you help me please?
<div style="width:400px;">
<div class="navi-left" style="width:50px; height:100%; background:grey;"></div>
<div class="cont" style="width:80px; height:80px; background:blue;"></div>
<div class="navi-right" style="width:50px; height:100%; background:green;"></div>
</div>
If you are looking for a fluid 3 colum layout of equal height, then check this 'holy grail' post.
In order for a percentage height to trigger, the height of the parent should be known. Also, your DIVs should be displayed inline if you want them to all show on the same row.
<div style="width:400px;height:80px;">
<div class="navi-left" style="width:50px; height:100%; background:grey;"></div>
<div class="cont" style="width:80px; height:80px; background:blue;"></div>
<div class="navi-right" style="width:50px; height:100%; background:green;"></div>
</div>
CSS
div {display:inline-block;}
Fiddle: http://jsfiddle.net/qvepX/
I am trying to place 7 divs side by side but with a bit of uniqueness.
You can take a look at what I have done so far through the link HERE and view page source.
I want the Center div's width to fill the space between the Left Middle and Right Middle div irrespective of how far one drags the browser form to the left or right. At the moment the center div has white spaces left and right of it.
Can anyone help me out please?
You can achieve it with <table>. If you are pretending to use div-based structure, then you can simulate divs behaviour by using display:table etc...
here is HTML:
<div style="display:table;width:100%;">
<div style="display:table-row">
<div style="display:table-cell;width:100px;background:blue;">Left Fixed</div>
<div style="display:table-cell;width:auto;background:green;">Left Stretch</div>
<div style="display:table-cell;width:120px;background:yellow;">Left Middle</div>
<div style="display:table-cell;width:auto;background:#999;">Center</div>
<div style="display:table-cell;width:120px;background:yellow;">Right Middle</div>
<div style="display:table-cell;width:auto;background:green;">Right Stretch</div>
<div style="display:table-cell;width:100px;background:blue;">Right Fixed</div>
</div>
</div>
Here is a demo: demo link
Try with display: inline-block and white-space: nowrap.
Demo
Example:
HTML
<div class="parent">
<div class="child">first</div>
<div class="child2">first2</div>
<div class="child3">first3</div>
<div class="child4">first4</div>
<div class="child5">first5</div>
<div class="child6">first6</div>
<div class="child7">first7</div>
</div>
CSS
.parent{
margin:0 auto;
background:red;
font-size:0;
white-space:nowrap;
}
.child, .child1, .child2, .child3, .child4, .child5, .child6, .child7{
display:inline-block;
vertical-align:top;
width:100px;
padding:20px;
font-size:12px;
}
.child{
background:green;
}
.child2{
background:rgba(0,0,0,0.4);
}
.child3{
background:rgba(0,0,0,0.6);
}
.child4{
background:rgba(0,0,0,0.1);
}
.child5{
background:rgba(0,0,0,0.3);
}
.child6{
background:rgba(45,234,0,0.9);
}
.child7{
background:rgba(232,0,222,0.9);
}
LIve demo
Your left div has a width of 45%; your right div similarly. But the middle div has a width of 8%, so there's 2% left over.
If you make the centre div have a width of 10%, the gaps disappear.
<div style="position: relative;">
<div style="margin-left: auto; margin-right: auto; width: 10%; margin-top: 0px; background-color: #999">
Center</div>
</div>
since you had the two divs width's add up to 90% and the center div as 8%, fix this and the center this fills up the center
You can achieve this without any problem using HTML <table>. Or if you want to have it table-less, by using only div-based structure, then you can simulate table's behavior with display as table, table-row, table-cell in your CSS
Here is a Live Demo.
Here is my example:
<div id="mainContainer">
<div id="itemIWantToCenter"></div>
<div id="itemIwantFloatedRight"></div>
</div>
The mainContainerwidth width is set to 100%. The itemIwantFloatedRight width is set to 300px. Let's say that the itemIWantToCenter has a width of 200px. How would I center that div while floating the other within the container? Thanks!
Hope this helps:
<div id="mainContainer">
<div id="itemIWantToCenter" style="float: right;"></div>
<div id="itemIwantFloatedRight" style="margin-left: 50%;"></div>
</div>
Here's a fiddle of my solution and the code is below (fixed link)
The advantages to this solution is that when the parent container's size changes, the content container will expand, while retaining it's margins and the right sidebar will always remain on the right.
Hope this helps.
Note In the fiddle, the content container is a little slim. This is due to the size of the window. Change the size of the window {hover over the dividers, click and drag}, to see the benefits.
<div class="container">
<div class="content">
centered content
</div>
<div class="right">
right
<div>
</div>
.container {
width:100%;
position:relative;
}
.container .content {
width:auto;
margin:0 200px;
background:green;
}
.container .right {
width:200px;
position:absolute;
top:0px;
right:0px;
background:#f00;
}
.content, .right {
height:300px
}
You should use a linked stylesheet ofcourse...
<div id="mainContainer" style="width:100%; border:solid 1px red;">
<div id="itemIwantFloatedRight" style="width:300px; border:solid 1px green; float:right">
right
</div>
<div id="itemIWantToCenter" style="width:200px; border:solid 1px blue; margin:0 auto;">
center
</div>
</div>
My page ...
http://webpages.charter.net/jolove/Escort_Folder/test.html
thanks to: fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css
Now I have a functional footer that adheres to the bottom of the window ..
except now what I need to do is get the footer to stick to the bottom with the height of the scrollable area above the footer shrinking or expanding accordingly as the window height changes.
In other words, the window's vertical scroll bar should never appear.
John
If correctly understand what you're trying to do it can be done using divs with percentage heights. Here is the basic idea:
<div id="header" style="height: 10%"></div>
<div id="scrollableContent" style="height: 60%; overflow: auto"></div>
<div id="footer" style="height: 30%"></div>
Using the percentage heights each div will resize according to the window size and only the scrollableContent div will have a scroll bar.
i am not sure if you wish the following just try it. on the #poemScroller change the height:28em; to height:auto;
you can use static positioning to achieve the same behavior see this example
<html>
<head>
<style>
#header{
position:fixed;
top:0;
height:50px;
z-index:5;
width:100%;
}
#content{
/* margin top should be >= header height
this also applies for footer */
margin: 50px 0;
width:100%;
}
#footer{
position:fixed;
bottom:0;
height:50px;
z-index:5;
width:100%;
}
</style>
</head>
<body>
<div id="header" > <h1>This is header</h1> </div>
<div id="content" >
<p>alot of content</p>
</div>
<div id="footer" > <h1>This is footer</h1> </div>
</body>
</html>