I am making a website that uses numerous DIVs with a 100% height. Now when the text is bigger than the page I want the normal scrollbars to appear. Unfortunately they don't. and with trying overflow:auto anywehre, it gets worse and worse.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title><PageTitle> | Anga Designs</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/standard.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="css/iefix.css" /><![endif]-->
<!-- /Stylesheets -->
<!-- Scripts -->
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<!-- /Scripts -->
<!-- Meta Tags -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- /Meta Tags -->
</head>
<body>
<div id="bgstripe"></div>
<div id="outercontainer">
<div class="leftbar"></div>
<div id="innercontainer">
<div id="header">
<div class="leftbar"></div>
<div class="innercontent">
</div>
</div>
<div id="content">
<div>
<span class="articletitle">Page Title!</span>
<div class="articletitlebar"></div>
</div>
<div class="articletext"><p>
Put your text here
</div>
</div>
</div>
<div id="faderight"></div>
</div>
<!-- /container -->
</body>
</html>
CSS
body, html {
margin: 0;
background-color: #eeeeee;
height: 100%;
font-family: Tahoma;
overflow: auto;
}
#bgstripe {
float: left;
background-color: #67a7ff;
width: 50%;
height: 100%;
}
#faderight {
position: relative;
float: right;
background: url('../images/layout/fade-right.jpg');
width: 50px;
height: 100%;
}
#outercontainer {
position: relative;
margin: auto;
width: 1000px;
height: 100%;
background-color: #2a5d95;
}
#innercontainer {
position: fixed;
float:left;
width: 950px;
background-color: #2a5d95;
}
.leftbar {
position: absolute;
background: url('../images/layout/leftbar.png');
width: 50px;
height: 100%;
}
.innercontent {
position: relative;
float: left;
background-color: #2a5d95;
height: 100%;
width: 100%;
margin-left: 50px;
}
#header {
position: relative;
float: left;
width: 950px;
height: 200px;
}
#content {
position: relative;
float: left;
width: 100%;
height: 100%;
}
.articletitle {
background-color: #003366;
padding: 10px 10px 10px 60px;
font-size: 20px;
font-family: Georgia;
color: #eeeeee;
}
.articletitlebar {
position: absolute;
width: 50px;
height: 40px;
background: url('../images/layout/articletitlebar.png');
margin-top: 10px;
}
.articletext {
display:block;
position: absolute;
margin-left: 70px;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
width: 700px;
min-height: 500px;
}
Anyone who can help me with this? I'm totally lost right now..
Online sample: http://rune.blupfis.nl/wendy/
position:fixed on #innercontainer is part of the problem, if not the whole issue. That will act like an absolutely positioned element and be removed from the normal flow.
The problem here is that the height of your contentdiv is set to 100%. This makes it expand so that it is the same height as its contents. If you try something more like this:
#content {
float: left;
height: 500px;
overflow: auto;
position: relative;
width: 100%;
}
you should see the scroll bars appearing (but some other styling may be lost now).
Related
I have used some code from stackoverflow oct 13 by Mark e Haas. The aim is to have two images side by side with a fig caption below them and for the images to respond to the screen size.
The image sizing is working inthe sense that te images stay on the screen as the size shrinks. The issue is with the I have tried amending various parameters but the caption always appears on the left of the image not below it. Before i start invetigating using a grid to place the image in is it possible to have the place itself below the Image preferably in the middle.
Code is below.
<style type="text/css">
<!-- css -->
#content { /* main display pane for all content */
float: left;
/* width: 595px; */
width: 75%;
min-height: 600px;
/* border: 1px solid #ccc; */
margin-left: 1px;
padding: 5px;
padding-bottom: 8px ;
background: #white;
}
div.fill-screen {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 10;
text-align: bottom;
}
img.make-it-fit {
max-width: 99%;
max-height: 10%;
float: left;
margin: auto;
}
img.make-right {
max-width: 99%;
max-height: 10%;
float: right;
margin: auto;
}
figure {
padding: 4px;
margin: auto;
}
figcaption {
font-style: italic;
text-align: bottom;
}
/Style
<html>
<head>
<link rel="stylesheet" type="text/css" href="/media/trsppic.css" />
</head>
<div id=content>
<!-- <div class='fill-screen'> -->
<figure>
<img class='make-it-fit' src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg' width=30%>
<figcaption>test</figcaption>
</figure>
<figure>
<img class='make-right' src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg' width=30%>
</figure>
</div</div>
</html>
Try this, i had modified a little bit the HTML but works fine.
.fig_box {
float: left;
width: 50%;
height: fit-content;
position: relative;
}
.make-it-fit {
width: 50%;
}
span.caption {
position: absolute;
top: 100%;
width: 50%;
left: 0;
text-align: center;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="/media/trsppic.css" />
</head>
<div id=content>
<!-- <div class='fill-screen'> -->
<div class="figure_content">
<div class="fig_box">
<img class='make-it-fit'
src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg' />
<span class="caption">test1</span>
</div>
<div class="fig_box">
<img class='make-it-fit'
src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg' />
<span class="caption">test2</span>
</div>
</div>
</html>
I have a problem with my brand new html & css sites : I want to have a that opens when hovering on a floating element of itself. The problem is not on animation but on layout. When it's empty, it works well, but when I add content into the , it goes under the floating element. To solve this, I've tried different overflow values as explained here, but of course the part of the whitch is "outside" of it got impacted.
(in this sample, the "menu" is already opened)
section
{
background-color: white;
margin: 10px;
}
.scroll_aside{
overflow-y: auto;
width: 100%;
height: 100%;
}
.aside_left{
width: 70%;
height: 100%;
display: block;
background-color: gold;
position: fixed;
top:0;
}
.aside_left .cote{
position: relative;
top:0px;
right: -80px;
width: 80px;
background-color: orange;
margin-top: 100px;
margin-left:0;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="TEST2.css"/>
</head>
<body>
<div class='aside_left'><span class='cote' onclick="openjourney()">Floating on the right</span>
<div class="scroll_aside">
<section style='height: 400px'>Section 1</section>
<section style='height: 800px'>Section 2</section>
</div>
</div>
</body>
</html>
Another thing I've noticed is that when the content is thin enough, it goes to the top....
But what I want, is to have the content taking all the , so going at the top and with width=100%.
Is there a way to do that ?
Thank you in advance....
Instead of float use absolute position:
section {
background-color: white;
margin: 10px;
}
.scroll_aside {
overflow-y: auto;
width: 100%;
height: 100%;
}
.aside_left {
width: 70%;
height: 100%;
display: block;
background-color: gold;
position: fixed;
top: 0;
}
.aside_left .cote {
position: absolute;
left: 100%;
width: 80px;
background-color: orange;
top: 100px;
}
<div class='aside_left'><span class='cote' onclick="openjourney()">Floating on the right</span>
<div class="scroll_aside">
<section style='height: 400px'>Section 1</section>
<section style='height: 800px'>Section 2</section>
</div>
</div>
I'm having a problem creating a layout that's partly liquid. The layout has to have 100% width and height but it shouldn't have scrollbars (overflow: hidden;).
On the image above shows what I'm trying to achieve. As you can see:
The header has to be fixed - 110px with 100% width.
Two divs wrapped via a container div. The blue one needs to be with fixed width 130px & 100% height, while the green one needs to be with liquid width and 100% height.
Here is my current code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0px;
color: white;
}
html, body {
height: 100%;
width: 100%;
}
.spacer {
clear: both;
}
#header {
background: black;
width: 100%;
height: 100px;
float: left;
}
#content {
height: 88%;
width: 100%;
padding: 0px;
margin: 0px;
position: relative;
}
#left {
background: #1664a0;
height: 100%;
width: 100px;
float: left;
}
#right {
background: #4aa016;
height: 100%;
float: left;
width: 91%;
}
</style>
</head>
<body>
<div id="header">
My Header
</div>
<div class="spacer"></div>
<div id="content">
<div id="left">Left container</div>
<div id="right">Right container</div>
</div>
</body>
</html>
There are a couple of problems with this code:
It doesn't work on various resolutions (800x600,1024x768, 1280x1024 and etc)
The "content" div doesn't always fill the page to the end.
The green div would go below the blue one if you resize the page to lower resolutions.
I guess I might be doing something TERRIBLY wrong here but I'm not a designer so is there somebody who could point me to "the right way" of solving this problem?
Take a look here http://jsfiddle.net/bmqPV/2/
you have the left set to 100px and the right to 91%, so if 100px is greater than 9% it will go to the next line.
EDIT, here is a new fiddle http://jsfiddle.net/bmqPV/4/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0px;
color: white;
}
html, body {
height: 100%;
width: 100%;
}
.spacer {
clear: both;
}
#header {
background: black;
width: 100%;
height: 100px;
position: absolute;
top: 0px;
left: 0px;
z-index:3;
}
#content {
height: 100%;
width: 100%;
padding: 0;
margin: 0px;
position: relative;
}
#left {
background: #1664a0;
height: 100%;
width: 100px;
float: left;
}
#right {
background: #4aa016;
height: 100%;
width: 100%;
}
#wrapper
{
position: relative;
height: 100%;
width: 100%;}
.contentcontainer {
padding-top:100px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
My Header
</div>
<div id="content">
<div id="left">
<div class="contentcontainer">Left container</div>
</div>
<div id="right">
<div class="contentcontainer">Right container</div>
</div>
</div>
</div>
</body>
</html>
You can achieve your result through a simple CSS with defining positions in #content & #right for better understanding please see the simple code:-
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
{
padding: 0;
margin: 0px;
color: white;
}
html, body {
height: 100%;
width: 100%;
}
#header {
background: black;
height: 100px;
}
#content {
width:100%;
border:5px solid red;
overflow:hidden;
position:relative;
}
#left {
background: #1664a0;
height: 100%;
width: 130px;
float: left;
}
#right {
background: #4aa016;
height: 100%;
float: left;
width:100%;
position:absolute;
margin-left:130px;
}
</style>
</head>
<body>
<div id="header">
My Header
</div>
<div id="content">
<div id="left">Left container</div>
<div id="right">Right container</div>
</div>
</body>
</html>
see the demo:- http://jsbin.com/ajasey/17/edit
My page is perfect with a doctype, and breaks horribly when one is applied. (More specifically, it breaks with any HTML4 doctype. An HTML3 one works fine, but that's clearly not acceptable.)
As is typical, I have cut the page down to only include the minimum needed to demonstrate the problem, but the main problem remains.
Without doctype, desired:
With doctype, horribly broken:
And the code, of course. Add a doctype to break it.
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container1">
<div id="main"></div>
</div>
<div id="container2">
<div id="test1">
<p style="text-align: center;">content goes here</p>
</div>
<div id="test2">
<p style="text-align: center;">more content goes here</p>
</div>
</div>
</body>
</html>
And style.css:
body
{
margin: 0px;
overflow:hidden;
color: white;
background-color: black;
text-transform: lowercase;
height: 100%;
}
#container1
{
background-color: black;
width: 100%;
height: 75%;
margin-left: auto;
margin-right: auto;
margin-top: 0%;
}
#main
{
width: 800px;
height: 480px;
margin-left: auto;
margin-right: auto;
position: relative;
background-color: blue;
}
#container2
{
background-color: black;
width: 100%;
height: 22%;
margin-left: auto;
margin-right: auto;
position: relative;
}
#test1
{
position: absolute;
width: 50%;
height: 100%;
background-color: blue;
}
#test2
{
position: absolute;
width: 50%;
margin-left: 50%;
height: 100%;
overflow: auto;
background-color: green;
}
Live demo: http://jsfiddle.net/ZcYwQ/
html { height:100%; }
left:0; bottom:0; and right:0; bottom:0; on the #test1 and #test2 elements
Basically #content is not obeying the height: auto attribute.
What am i doing wrong?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title id="title" runat="server">AMIDS: Advanced Management Information Data Store</title>
<style type="text/css">
#container
{
background-color: White;
height: 100%;
min-height: 100%;
min-width: 600px;
width: 100%;
}
#header
{
height: 50px;
overflow: hidden;
width: 100%;
}
#headerLeft
{
background-image: url('/Amids/App_Themes/Default/Images/HeaderLeft.jpg');
float: left;
height: 50px;
width: 5px;
}
#headerCenter
{
background-image: url('/Amids/App_Themes/Default/Images/HeaderCenter.jpg');
float: left;
height: 50px;
width: 99.2%;
}
#headerRight
{
background-image: url('/Amids/App_Themes/Default/Images/HeaderRight.jpg');
float: left;
height: 50px;
width: 5px;
}
#menu
{
background-image: url('/Amids/App_Themes/Default/Images/Menu.jpg');
height: 20px;
width: 100%;
}
#content
{
background-color: Pink;
height: auto;
width: 100%;
}
#footer
{
height: 40px;
overflow: hidden;
width: 100%;
}
#footerLeft
{
background-image: url('/Amids/App_Themes/Default/Images/FooterLeft.jpg');
float: left;
height: 40px;
width: 5px;
}
#footerCenter
{
background-image: url('/Amids/App_Themes/Default/Images/FooterCenter.jpg');
float: left;
height: 40px;
width: 99.2%;
}
#footerRight
{
background-image: url('/Amids/App_Themes/Default/Images/FooterRight.jpg');
float: left;
height: 40px;
width: 5px;
}
* html #container
{
height: 100%;
}
*
{
margin: 0;
padding: 0;
}
html, body, form
{
border: none;
height: 100%;
}
</style>
</head>
<body>
<form id="form" runat="server">
<div id="container">
<div id="header">
<div id="headerLeft"></div>
<div id="headerCenter"></div>
<div id="headerRight"></div>
</div>
<div id="menu"></div>
<div id="content"></div>
<div id="footer">
<div id="footerLeft"></div>
<div id="footerCenter"></div>
<div id="footerRight"></div>
</div>
</div>
</form>
</body>
</html>
Any ideas anyone?
Auto is already the default value.
Block level elements don't stretch to fill the parent's height.
So, that div is not supposed to stretch - is it? (Maybe see height calculation for block level elements )
Which would mean is is obeying the height:auto attribute.
Maybe you can do what you want using position: absolute; bottom: 10px; on the footer and some bottom-margin on the content.
Background might be tricky - maybe you can give "pink" background to all body, and white to the header and menu.