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.
Related
I have 5 <div> tags on my page.
container <div>
header <div>
left panel <div>
middle panel <div>
right panel <div>
The left panel, middle panel and the right panel <div> are placed side by side using CSS float left. Now the problem comes when the fetched data is displayed in the middle panel <div> and its height starts increasing according to the amount of fetched data. Left panel <div> stays where it suppose to be but the right panel <div> changes its margin as shown in the figure.
This image explains the exact situation. Below is my CSS.
*{
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}
.container{
margin:0 auto;
padding:0;
}
.header{
height:100px;
width:100%;
}
.left_panel{
width:130px;
float:left;
}
.middle_panel{
width:70%;
float:left;
}
.right_panel{
float:right;
width:130px;
}
Please help me out with this. Thanks.
I think the issue is being caused because the combined width of your left, middle and right panels are exceeding the width of your page.
Try something like my fiddle where I have set the width of the left and right panels to 15% so under no circumstance will they exceed 100%
.left_panel {
width:15%;
float:left;
background: yellow;
}
.middle_panel {
width:70%;
float:left;
background: blue;
}
.right_panel {
float:right;
width:15%;
background: pink;
}
http://jsfiddle.net/WPgt9/
Hope this helps
HTML
<div class="container">
<div class="header">Header</div>
<div class="left_panel">Left</div>
<div class="middle_panel">
Middle
</div>
<div class="right_panel">Right</div>
</div>
CSS
*{
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}
.container{
margin:0 auto;
padding:0;
}
.header{
height:100px;
width:100%;
background-color:green;
}
.left_panel{
width:15%;
float:left;
background-color:red;
height:400px;
}
.middle_panel{
width:70%;
float:left;
background-color:blue;
height:500px;
}
.right_panel{
float:right;
width:15%;
background-color:red;
height:400px;
}
Fiddle http://jsfiddle.net/WPgt9/9/
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.
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;}
i have a problem in aligning the div's vertically,what should be problem?
here is my html code
<div class="recentProfiles">
<div class="profiles" id="profile1">
</div>
<div class="profiles" id="profile2">
</div>
<div class="profiles" id="profile3">
</div>
</div>
css
.recentProfiles
{
width:950px;
height:200px;
border:2px dotted green;
margin-left:20px;
margin-top:10px;
}
.profiles
{
width:300px;
height:190px;
border:2px dotted black;
}
#profile1
{
float:left;
clear:both;
position:relative;
margin-left:5px;
margin-top:5px;
}
#profile2
{
position:relative;
margin-left:310px;
margin-top:5px;
}
#profile3
{
position:relative;
margin-left:620px;
margin-top:5px;
}
i want the three div's to be aligned vertically together inside the parent, here is the demo
I'm not sure why you need so many redundant codes to achieve like what you describe, just do:
.recentProfiles
{
width:300px;
border:2px dotted green;
margin-left:20px;
margin-top:10px;
}
.profiles
{
width:300px;
height:190px;
border:2px dotted black;
}
Demo: http://jsfiddle.net/VvqXF/
That's because of your margins. If you take clear:both off profile1 and then add float: left onto all profiles, then take off those margins.
Demo: http://jsfiddle.net/WC5gT/
Try using float:left on class profiles and then no margin on profile1, profile2, profile3
Working example: http://jsfiddle.net/rK38V/
Have all the boxes float left (float: left) and remove all margin properties, like this: http://jsfiddle.net/2ABmU/
You get the idea of float wrong. Here's the new code: http://cdpn.io/AvJqI
HTML
<div class="recentProfiles">
<div class="profiles" id="profile1">
</div>
<div class="profiles" id="profile2">
</div>
<div class="profiles" id="profile3">
</div>
<div class="floatClear"></div>
</div>
CSS
.recentProfiles
{
width:950px;
height:200px;
border:2px dotted green;
margin-left:20px;
margin-top:10px;
}
.profiles
{
width:300px;
height:190px;
border:2px dotted black;
}
#profile1
{
float:left;
position:relative;
margin-left:5px;
margin-top:5px;
}
#profile2
{
float:left;
position:relative;
margin-left: 10px;
margin-top:5px;
}
#profile3
{
float:left;
position:relative;
margin-left: 10px;
margin-top:5px;
}
.floatClear {
clear: both;
}