I'm working on a web site and im having trouble with the left navigation. As you can see here http://animactions.ca/test/Desktop/
the left navigation menu does not go to the bottom, it stops after the content. I would need it to stop at the bottom of the page.
Here is the css:
/* CSS layout */
body {
margin: 0;
padding: 0;
}
#masthead {
}
#top_nav {
width: 700px;
background-color: #DDDDDD;
margin-right: auto;
margin-left: auto;
}
#container {
width: 700px;
margin-right: auto;
margin-left: auto;
}
#left_col {
width: 95px;
float: left;
background-color: #B79F63;
border-right: 5px solid #976F43;
}
#page_content {
width: 600px;
float: right;
background-color: #D2C388;
}
#footer {
clear: both;
width: 700px;
text-align: center;
background-color: #E0E0E0;
margin-right: auto;
margin-left: auto;
}
Thanks
One way around this is to create a background image for the div containing the navigation and the main content (in your code it's "container") that mimicks the background colors and separation lines you want for the columns. It can often be as small as 1px high but should be the width of the container, and will repeat down the page.
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
http://www.cssnewbie.com/equal-height-columns-with-jquery/
Related
This is a two part question, I believe, with a third and fourth, bonus twist.
What am I doing wrong to get the height of the purple set to 100% to be a little bit too high?
How can I set the width of the purple so that it goes 100% of the remaining space?
Is the only way to get rid of the spacing between the yellow and the purple to alter the HTML code by putting everything on the same line?
How can I remove the margin that the green border holds between self and the outer component?
jsfiddle.net/jL8e5/1/
div.faqticleList {
background: #ffdd00; /* yellow */
display: inline-block;
padding: 3px;
width: 200px;
height: 150px;
}
div.faqticlePreview {
background: #bb88ff; /* purple */
display: inline-block;
padding: 3px;
width: auto;
height: 100%;
}
I'm not sure if I completely understand your goals. I assumed:
Fixed width left
Variable width right
http://jsfiddle.net/wXme4/
CSS
body{
margin: 0;
padding: 0;
width: 100%;
}
div.faqticleList {
background: #ffdd00;
width: 200px;
height: 100%;
float: left;
}
div.faqticlePreview {
background: #bb88ff;
width: 100%;
height: 100%;
margin-left: -203px;
padding-left: 203px;
}
div.container {
border: solid 1px #007700;
margin: 0px;
height: 100px;
//overflow: hidden;
//overflow: auto;
}
div.faqticleList div, div.faqticlePreview div {
padding: 3px;
}
Script
document.getElementById("faqticleList").innerHTML = "<div>faqticleList</div>";
document.getElementById("faqticlePreview").innerHTML = "<div>faqticlePreview</div>";
Updated Demo
Float the left column, and make the right column a regular block element with overflow: hidden. That might be the simplest way to do it.
CSS
div.faqticleList {
/* display: inline-block; */
float: left;
...
}
div.faqticlePreview {
/* display: inline-block; */
/* width: auto; */
overflow: hidden;
...
}
This will do what you want, but I would recommend you set your height to fixed, or it wont work,
div.faqticleList {
background: #ffdd00;
display: inline-block;
width: 30%;
height: 150px;
}
div.faqticlePreview {
background: #bb88ff;
display: inline-block;
width: 69%;
height: 100%;
clear: both;
}
div.container {
border: solid 1px #007700;
margin: 0px;
height: 100%;
//overflow: hidden;
//overflow: auto;
display: block;
clear: both;
}
You can use jquery to dynamically find the width.
JS:
document.getElementById("faqticleList").innerHTML = "faqticleList";
document.getElementById("faqticlePreview").innerHTML = "faqticlePreview";
var difWidth = $('.container').width() - 212;
$('#faqticlePreview').css( "width", difWidth )
Then, in your CSS, remove the width from faqticlePreview and float the other div left:
div.faqticleList {
background: #ffdd00;
display: inline-block;
padding: 3px;
width: 200px;
height: 150px;
float: left;
}
div.faqticlePreview {
background: #bb88ff;
display: inline-block;
padding: 3px;
height: 100%;
}
Updated jsfiddle:
http://jsfiddle.net/a2Run/
Note: The width you are subtracting needs to be 212. 200px width from the first div, plus 3px of padding on each side of both divs 200+(3x4)=212
I am following this tutorial link but do not know how to put the footer on the bottom of the page so when the user open the page the footer is on the very bottom of page regardless of size of the monitor.
So that when they change the size of window or use a bigger monitor footer should be at the end of page.
The important part is that I do not have much text in my content section so the scroll bar is expected to be invisible in any size of monitor.(those that are not very tiny)
*Please also note that I have looked at the previous question but could not find a correct answer.
* If you know of any other tutorial I would appreciate your suggestion. (I need float layout)
Layout
container
{
header
content
{
leftnav | rightnav
}
footer
}
Css
#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
#top h1
{
padding: 0;
margin: 0;
}
#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}
#content
{
margin-left: 200px;
border-left: 1px solid gray;
padding: 1em;
max-width: 36em;
}
#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
#leftnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }
In the tutorial the footer is in a container div.
If you remove from the container width:90% the example will be rendered across the whole width of the screen.
Use the sticky wrapper jQuery plugin, or use position: fixed with bottom: 5% and left: 0 and margin-left values in -ve.
<footer style="background-color: crimson; color:springgreen; font-family: serif; text-align: center; font-size: 15px; position:absolute; width: 99.82%;margin-left: -6px; margin-right: -6px;"><h1>THIS IS MY FOOTER</h1></footer>
Browser: Google Chrome
System Screem: 15.6"
I have experienced that the appearance of our divs, headers, footers & navs varies from screen to screen and may be browser to browser.
try this :
#footer{
position: absolute;
bottom: 0px;
height: 50px;
width: 100%;
}
Hi I have page http://rygol.cz/qlife/ and when Iam zooming out the content goes out of his div. If i you height: auto; or height: 100% its ok but leftcolumn is smaller then right, clear doesnt help me.
Have anybody some idea how to fix it?
#leftcolumn {
color: #333;
background: #fff;
background-image:url("./images/corner.png");
background-repeat:no-repeat;
padding: 10px;
height: 800px;
width: 244px;
float: left;
}
#rightcolumn {
float: right;
color: #333;
background: #fff;
padding: 10px;
height: 800px;
width: 638px;
display: inline;
margin-bottom: 10px;
}
If you need that extra space between header and the content you should just go ahead and place the #leftcolumn and #rightcolumn in an additional wrapper container with the background-color set and have the #container without the background-color set.
HTML structure:
<div id="container">
<div id="header"></div>
<div id="content-wrapper">
<div id="leftcolumn"></div>
<div id="rightcolumn"></div>
</div>
</div>
And CSS:
#container {
margin: 0 auto;
width: 922px;
}
#header {
color: #333;
background: #fff;
width: 902px;
padding: 10px;
margin-bottom: 10px;
height: 200px;
}
#content-wrapper {
background-color: #fff;
min-height: 1px;
overflow: hidden; /* clear hack :) */
}
#leftcolumn {
color: #333;
background: #fff;
background-image: url("./images/corner.png");
background-repeat: no-repeat;
padding: 10px;
width: 244px;
float: left;
}
#rightcolumn {
float: right;
color: #333;
background: #fff;
padding: 10px;
width: 638px;
margin-bottom: 10px;
}
Remove the height declarations in the columns. You could also use overflow-y: scroll though I would stick to removing the heights. Another thing to consider is that people generally don't zoom out that far anyway: the text becomes impossible to read at the zoom level it breaks at (chrome v24).
If you want equal height columns have the shorter column floated to one side then set position: relative and top: 0; bottom: 0; then set the other column to have overflow: hidden; to 'clear' the float. Note: the floated column should come first in the markup for this to work.
I use this template
<style>
#block_center{
position: absolute;
right: 210px;
left: 210px;
text-align: left;
border: 1px solid #000;
overflow: auto;
height: auto;
}
#block_right{
width: 200px;
border: 1px solid #000;
position: relative;
right: 3px;
text-align: left;
float: right;
}
#block_left{
position: relative;
left: 3px;
width: 200px;
border: 1px solid #000;
text-align: left;
float: left;
}
#block_content{
clear: both;
float: none;
width: 100%;
text-align: center;
overflow-y:auto;
overflow-x:auto;
height: auto;
/* margin-bottom: -50px; */
margin: auto;
}
#block_buttom {
background-color: blue;
/* z-index: -10; */
width: 100%;
height: 50px;
clear: both;
}
.clear {
clear:both;
overflow:hidden;
}
</style>
<div id="block_content">
<div id="block_center"> ARTICLE <br> article_ajax_content </div>
<div id="block_right"> Artile links </div>
<div id="block_left"> banner </div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div id="block_buttom"> some text info about site and 31px height img </div>
Problem that I having is that Article not only can be random height size but also there is ajax block of random size content going after it and I simply can't absolutely stick bottom div to stay in bottom after all content regarding browser window size, content size, ajax block size...
Can any one help me with how css (I do not want to use jQuery to pin bottom block to a fix y coordinate) should look like for my pattern of use?
Make all blocks relatively positioned and give the heights and widths using percentage rather than pixels.
Make sure the sum of all your height percentages is 100%(in case you want to cover the whole screen).
This ensures your page content covers the whole screen, irrespective of the screen resolution.
The relative sizes of each block is also kept the same across all resolutions.
The key is to use PERCENTAGE values and not PIXEL values.
To solve the Dynamic sized article data, just CSS the article div to have a scroll bar.
this is currently does want i want
<style>
#block_buttom {
margin-top: 10pt;
/* z-index: -10; */
width: 100%;
display: inline-block;
height: auto;
clear: both;
}
.page-buffer {
padding-top: 50px inherit;
height: 50px;
clear: both;
width: 100%;
}
.clear {
clear:both;
font-size:0;
overflow:hidden;
}
#block_content {
width:100%;
text-align:center;
}
#block_left {
position: relative;
top: 0px;
text-align: left;
float:left;
width: 10%;
min-width:210px;
height: auto;
padding: 3px;
}
#block_center {
text-align: left;
display: inline-block;
margin:0 auto;
width:70%;
min-width: 640px;
height: auto;
padding: 3px;
}
#block_right {
position: relative;
text-align: left;
float:right;
width: 10%;
min-width:210px;
height: auto;
padding: 3px;
}
</style>
on high resolution it looking very nice, on lower - still require some tuning with finding balance of center block size and spaces between fixed size left\right blocks
I am having an issue with my divs in Internet Explorer. I have a three column layout and it displays correctly in all browsers (chrome, firefox, safari) except for Internet Explorer. In IE, the middle div displays at the bottom of the page instead of between the sidebars.
I've been trying for days to figure out what the issue is. I'm sure it's something to do with my CSS, but I'm not sure.
Any help would be appreciated!
My website is: http://www.onedirectionconnection.com
And here's the CSS:
div#container {
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width: 1125px;
text-align: left;
}
div#header {
clear: both;
height: 500px;
margin-top: 0px;
padding: 0px;
border: 0px
}
div#navi {
text-align: center;
background: #FFFFFF;
clear: both;
height: 60px
margin-left: 13px;
margin-right: 13px;
margin-bottom: 10px;
padding-left: 39px;
border-bottom: 3px solid #FF0000;
border-top: 3px solid #FF0000;
}
div#left {
float: left;
width: 320px;
}
div#right {
float: right;
width: 320px;
}
div#middle {
padding: 0px 325px 5px 325px;
margin: 0px;
}
I just included the parts I think are relevant to the problem, but anyone can feel free to serf the code on my website if necessary!
Increase width of container or decrease some margins.
#middle
{
padding: 0px 0px 5px 0px;
margin: 0px;
overflow: hidden;
width: 485px;
float: left;
}
You need to work on the positioning of the DIVs. The left div is ok. Add middle div after left div and then right div.
Add float: left; width: 400px; margin: 0; to middle. And adjust the widths of middle DIVs child elements.