I want three div's next to eachother (I placed them in a .wrapper div so I could float them to the left). The three div's should be centered on the page. So I thought, if I center the .wrapper with margin-left/right: auto, all the three divs would center up. This didnt work.
Also, when I resize the browser the divs move. I don't want that to happen.
I've googled endlessy and put lots of solutions in the script, nothing worked.
Also, it shows differently per browser (firefox, safari and Chrome).
Here's my HTML:
<div id="container">
<div class="wrapper">
<div id="lost"><img src="images/lost.png"></div>
<div id="compass"><img src="images/compass.png"></div>
<div id="sailor"><img src="images/sailor.png"></div>
</div>
<div id="sea">
<img src="images/seaAnimated.png" class="sea" id="animatedSea">
</div>
</div>
And my CSS:
body,html
{
margin:0px;
padding:0px;
}
#container
{
position:absolute;
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
}
.wrapper
{
left:auto;
right:auto;
margin-left:auto;
margin-top:8%;
margin-right:auto;
padding-left:auto;
padding-right:auto;
width:100%;
height:75%;
}
#lost
{
float:left;
width:auto;
clear:both;
margin-left:auto;
margin-right:auto;
}
#compass
{
float:left;
width:auto;
height:75%;
margin-left:auto;
margin-right:auto;
}
#sailor
{
float:left;
width:auto;
height:75%;
margin-left:auto;
margin-right:auto;
}
#sea
{
position:absolute;
bottom:0px;
z-index:2;
background-image:url(images/sea.png);
background-repeat:repeat-x;
background-position:bottom;
height:25%;
width:100%;
}
#animatedSea
{
position:absolute;
bottom:10px;
width:auto;
height:25%;
z-index:-1;
}
try this
css
.wrapper{
text-align:center;
margin-top:8%;
width:100%;
height:75%;
}
#lost{
display:inline-block;
width:50px;
height:50px;
background-color:#0C0;
}
#compass{
display:inline-block;
width:50px;
height:50px;
background-color:#06F;
}
#sailor{
display:inline-block;
width:50px;
height:50px;
background-color:#96F;
}
html
<div class="wrapper">
<div id="lost">123</div>
<div id="compass">456</div>
<div id="sailor">789</div>
</div>
jsFiddle Code
You could use a fixed width on your wrapper to get it to center. You do have to specify a width (and not leave it empty) because divs are block-level, meaning that they fill the entire width by default.
http://jsfiddle.net/isherwood/CBMaX/2
.wrapper {
width: 240px;
margin-left:auto;
margin-right:auto;
}
#wrapper
{
text-align: center;
}
#compass
{
width:33.3%;
}
#sailor
{
width:33.3%;
}
#lost
{
width:33.3%;
}
Try this css. Include this css into your css.
Related
I have button on my website in a container just like my example here: https://jsfiddle.net/j8z7hbc3/3/
Now when I click on the button, because of the overflow:hidden the amount is not fully visible
Is there a way to fix it?
<div class="container">
<div class="video-wrapper-absolute">
<div class="video-wrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/C2VjWtMbrzQ?version=3&loop=1&playlist=C2VjWtMbrzQ&autoplay=1&showinfo=0&vq1080" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="coupon">
<div class="button">GET COUPON</div>
<div class="amount" style="display:none;">25% OFF</div>
</div>
</div>
CSS:
.container { position:relative; width:100%; height:200px; overflow:hidden; }
.video-wrapper-absolute { position:absolute; top:0; left:0; right:0; bottom:0; }
.video-wrapper { position:relative; padding-bottom:56.25%; height:0; }
.video-wrapper iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
#ytplayer { width:100%; height:100%; }
.coupon { background:orange; margin-top:158px; float:left; position:relative; }
.button { padding:6px; text-align:center; font-weight:bold; cursor:pointer; }
.amount { background:purple; color:#fff; padding:6px; text-align:center; }
using clearfix didn't work in this case for me
You could make it visible as seen in this example:
https://jsfiddle.net/aukgf9qs/
My changes to your CSS were moving all container class styles to .video-wrapper-absolute, since I think you just want to hide the overflow of your video. Additionally I have set buttons position: absolute; and changed the margin-top to a just top value, since it is using absolute positioning now.
Full CSS:
.video-wrapper-absolute { position:absolute; top:0; left:0; right:0; bottom:0;position:relative; width:100%; height:200px; overflow:hidden; }
.video-wrapper { position:relative; padding-bottom:56.25%; height:0; }
.video-wrapper iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
#ytplayer { width:100%; height:100%; z-index:-1; }
.coupon { background:orange; top:158px; float:left; position:absolute; }
.button { padding:6px; text-align:center; font-weight:bold; cursor:pointer; }
.amount { background:purple; color:#fff; padding:6px; text-align:center; }
My third attempt recoding my site for a responsive layout based on more suggestions from Stack Overflow members. This time I'm using a display:table / display:table-cell setup to center a page wrapper whose height is controlled by content and a sticky footer.
A member suggested a basic layout that works (thanks!) BUT I cannot center my inline wrapper inside my page wrapper if I use a width less than 100%. It forces the inline-wrapper to the right of the page-wrapper.
I've tried margins, padding and text-align. I could probably hack it with the "center" tag but I want my code to be semantic.
This is a condensed view of my code - I'm not sure if I'm doing something wrong, missing syntax (I forgot a comma earlier that cost me 30mins troubleshooting), it needs a hack for ie10 and Opera or whatever.
<div id="page-wrapper>
<div id="logo"><img /></div>
<div id="inline-wrapper">
<div id="top-content">
<div id="left"><img /></div>
<div id="center">content blah blah</div>
<div id="right"><img /></div>
</div>
<div id="nav-menu"><ul><li><img /></li></ul></div>
<div id="main-content">
<div id="left"><img /></div>
<div id="center">content blah blah</div>
<div id="right"><img /></div>
</div>
</div></div>
<div id="footer"></div>
html, body, #page-wrapper, #inline-wrapper, #top-content, #main-content {
height:100%;
width:100%;
margin:auto;
}
#page-wrapper {
height:100%;/* to show footer */
width:70%;
position:relative;
display:table;
table-layout:fixed;
border:solid;
}
#logo {
width:100%;
top:.75%;
z-index:99;
position:absolute;
}
#logo > img {
width:100%;
}
#inline-wrapper {
position:relative;
display:table-cell; <-- /* I removed this */
width:90%;
margin:auto;
background-color:#fff;
padding-bottom:1%;
}
#top-content, #main-content {
display:table;
width:98%;
border-collapse:collapse;
}
#top-content {
height:60%;
}
#right, #left, #center {
display:table-cell;
}
#left {
background-color:#CC0000;
width:14%;
}
#left img {
width:100%;
height:100%;
}
#right {
background:#0600ff;
width:14%;
}
#center {
width:72%;
background:#ccc;
}
#nav-menu {
width:100%;
margin:0 auto;
text-align:center;
}
#nav-menu li {
color:#fff;
margin:auto;
display:inline-block;
background-color:#000000;
list-style-position:inside;
border:1% solid #ffffff;
padding:.75%;
width:12.5%;
height:31%;
vertical-align:top;
}
#nav-menu li:hover {
opacity: .55;
filter: alpha(opacity=55);
}
#nav-menu li img {
height:100%;
width:100%;
}
#footer {
width:100%;
height:250px;
background-color:#000;
border-top:solid;
}
Try clossing the id there: <div id="page-wrapper>. Change it to this: <div id="page-wrapper">
I am trying to get a Sticky Footer to work, and have currently tried the following css:
#footer {
width:920px;
height:208px;
font-size:10px;
margin-left:auto;
margin-right:auto;
background-image:url(images/grad.png);
background-repeat:repeat-y;
padding:0 20px;
clear:both;
position:relative;
margin-top:-208px;
}
body {
margin:0;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#333333;
background-repeat:repeat-x;
padding: 0;
height: 100%;
}
#wrap {
width:960px;
margin:0 auto;
min-height:100%;
height: 100%;
}
#content {
width:892px;
float:left;
border-left:4px solid white;
border-right:4px solid white;
padding:15px 0px 15px 20px;
background-image:url(images/sidebar_bg.png);
position:relative;
padding-bottom:143px;
}
I have had to reduce the #content padding-bottom, so it would fit. But I am still having issues. Firstly, There is too much space at the bottom of longer pages (see - http://bellbird.redgraphic.co.uk/headteacher/ ) Secondly, on a shorter page the footer doesnt scroll up when the browser window is resized (see - http://bellbird.redgraphic.co.uk/school-council/ )
Sticky footers always seem to be an issue, so I must be missing a trick.
Any help would be greatly appreciated.
Lewis
usefull link here. This one helped me with the same issue.
CSS mark-up:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
HTML mark-up:
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
use this css instead of your
#footer {
position:fixed;
bottom:0;
left:0;
right:0;
height:40px; /* Height of the footer */
background:#6cf;
}
html:
<div class="wrap">
<div class="inner-wrap">
...
</div>
</div>
<footer>
...
</footer>
css:
html, body {height:100%;}
.wrap {min-height:100%; height:auto !important; margin-bottom:-100px;}
.inner-wrap {padding-bottom:100px;}
footer {height:100px;}
So, I'm having an issue with CSS Positioning / Height
So, I'm trying to do a sliding navigation UI from the left side of the screen (like a lot of mobile apps). The main content slides over, displaying the navigation menu beneath.
I believe to do with positioning, I can't get height to work properly. I ultimately would like for 100% height to mean 100% of the entire page. Currently, only items that have more content will expand and the shorter ones stop at the screen edge (so they are 100% of screen vs. entire page).
Anyway here is my fiddle: http://jsfiddle.net/2vP67/6/
And here is the code within the post:
HTML
<div id='wrapper'>
<div id='navWide'> </div>
<div id='containerWide'> </div>
<div id='containerTall'>
<div id='container'>
<div id='nav'>
<div id='navNavigate'> Open Menu </div>
<div id='navNavigateHide'> Close Menu </div>
</div>
</div>
</div>
<div id='sideContainerTall'>
<div id='sideContainer'>
<div id='sideNav'>Side Navigation </div>
</div>
</div>
</div>
CSS
#wrapper {
width:100%;
min-width:1000px;
height:100%;
min-height:100%;
position:relative;
top:0;
left:0;
z-index:0;
}
#navWide {
color: #ffffff;
background:#222222;
width:100%;
min-width:1000px;
height:45px;
position:fixed;
top:0;
left:0;
z-index:100;
}
#containerWide {
width:100%;
min-width:1000px;
min-height:100%;
position:absolute;
top:45px;
z-index:100;
}
#containerTall {
color: #000000;
background:#dadada;
width:960px;
min-height:100%;
margin-left:-480px;
position:absolute;
top:0;
left:50%;
z-index:1000;
}
/***** main container *****/
#container {
width:960px;
min-height:585px;
}
#nav {
color: #ffffff;
background:#222222;
width:960px;
height:45px;
position:fixed;
top:0;
z-index:10000;
}
#navNavigate {
background:yellow;
font-size:10px;
color:#888888;
width:32px;
height:32px;
padding:7px 6px 6px 6px;
float:left;
cursor:pointer;
}
#navNavigateHide {
background:yellow;
font-size:10px;
color:#888888;
width:32px;
height:32px;
padding:7px 6px 6px 6px;
float:left;
cursor:pointer;
display:none;
}
#sideContainerTall {
background:#888888;
width:264px;
min-height:100%;
margin-left:-480px;
position:absolute;
top:0;
left:50%;
z-index:500;
}
#sideContainer {
width:264px;
min-height:585px;
display:none;
}
#sideContainerTall {
background:#888888;
width:264px;
min-height:100%;
margin-left:-480px;
position:absolute;
top:0;
left:50%;
z-index:500;
}
#sideContainer {
width:264px;
min-height:585px;
display:none;
}
#sideNav {
width:264px;
height:648px;
float:left;
}
Javascript
$(document).ready(function() {
$('div#navNavigate').click(function() {
$('div#navNavigate').hide();
$('div#navNavigateHide').show();
$('div#sideContainer').show();
$('div#containerTall').animate({
'left': '+=264px'
});
});
$('div#navNavigateHide').click(function() {
$('div#navNavigate').show();
$('div#navNavigateHide').hide();
$('div#containerTall').animate({
'left': '-=264px'
}, function() {
$('div#sideContainer').hide();
});
});
});
Setting the height to 100% or any percent value relative to the browser window, for that matter, is illegal. This is because height cannot be set as a function of percent, because theoretically the browser window could go on forever with a scrollbar. Kind of a weird quirk. The only way you can achieve this is through javascript.
height = window.innerHeight;
getElementById('wrapper').style.height = height;
I have a problem with a website I'm putting together. I have a simple div layout. Which is as follows:
<body>
<div id="Container">
<div id="Logo"></div>
<div id="Banner">
<div id="Nav"></div>
</div>
<div id="Content">
</div>
<div id="footer">Footer</div>
</div>
</body>
And my CSS is as follows:
#charset "utf-8";
/* CSS Document */
html, body {
height:100%;
padding:0;
margin:0;
background-image:url(../layout.img/background_gradient.gif);
background-repeat:repeat-x;
}
#Container {
height:100%;
width:950px;
margin:auto;
background-color:#FFFFFF;
border-left:1px solid #333333;
border-right:1px solid #333333;
}
#Logo {
width:160px;
height:160px;
float:right;
}
#Banner {
width:100%;
height:160px;
}
#Nav {
width:550px;
height:33px;
position:relative;
top:100px;
left:50px;
}
#Content {
clear:both;
}
And finally the result can be seen here:
http://jsfiddle.net/mczMS/
As you can see the 'container' div doesn't stretch out with the content as you scroll down the page. I know this is probably something stupidly simple but I'm running short of brain power today. Haha.
Try adding:
#container { min-height: 100%; }
after height 100%. You may also want to try:
#container { overflow: auto; }
If you remove the height:100% from the container it will stretch to fit its contents.