http://www.xs4all.nl/~peterned/examples/csslayout1.html
The tutorial above is essentially what I want with a white column that extends to the bottom of the browser. In the tutorial it actually begins at the very top, with the header being a different shade of grey covering the white.
My case, the header would have to match the textured background. So, what I want is to have the container begin below the header. I don't know if it is possible because right now my header pushes the container down.
http://andrew.x10.mx/adam/
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>for adam</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
</div>
<div id="container">
<br class="push"></br>
<div id="content">
<h1>Hi</h1>
</div>
</div>
</body>
</html>
css -
html,body {
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
#header {
position: absolute;
z-index: 2;
top: 0px;
left: 0px;
width:100%;
height: 49px;
background: #fff url("bg.png") repeat-x top left;
padding: 0;
}
.push {
width: 860px;
height: 49px;
margin: 0;
}
#container {
background: #ff0;
height:auto !important;
height:100%;
position:relative;
width: 860px;
text-align: left;
margin: 0 auto;
min-height:100%;
z-index:1;
}
#content { padding: 10px; }
Only tested it in Firefox, though. :)
Updated: feel free to validate. :)
Updated v2: Had a problem when adding content inside the container. Fixed now, but had to do some more complex-ish stuff.
Related
I am using http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-32-fluid-fluid-fixed/ as the starting point. I want one of the column to always remain visible at the top. I put {position: fixed; top: 0} in the right column css, but that did not achieve what I wanted. It just made the right column content disappear.
How to achieve what I want (using css only, preferably no javascript, atleast no jquery).
Below is total code. Just 2 line modification from original one.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Liquid Layout #3.2- (Fluid-Fluid-Fixed)</title>
<style type="text/css">
body{
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin: 0 200px 0 25%; /*Margins for content column. Should be "0 right-column-width 0 left-column-width*/
}
#leftcolumn{
float: left;
width: 25%; /*Width of left column in percentage*/
margin-left: -100%;
background: #C8FC98;
}
#rightcolumn{
top: 0; /* THIS IS ADDED LINE by me...... */
position: fixed; /* THIS IS ADDED LINE by me...... */
float: left;
width: 200px; /*Width of right column in pixels*/
margin-left: -200px; /*Set margin to -(RightColumnWidth)*/
background: #FDE95E;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
#footer a{
color: #FFFF80;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
</style>
<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>
</head>
<body>
<div id="maincontainer">
<div id="topsection"><div class="innertube"><h1>CSS Liquid Layout #3.2- (Fluid-Fluid-Fixed)</h1></div></div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fluid</em></b> <script type="text/javascript">filltext(450)</script></div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>25%</em></b> <script type="text/javascript">filltext(20)</script></div>
</div>
<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>200px</em></b> <script type="text/javascript">filltext(15)</script></div>
</div>
<div id="footer">Dynamic Drive CSS Library</div>
</div>
</body>
</html>
Your CSS puts the 3rd column off the left side of the screen that is why it is not visible.
Change your CSS from
#rightcolumn {
top: 0;
position: fixed;
float: left;
width: 200px;
margin-left: -200px;
background: #FDE95E;
}
to
#rightcolumn {
top: 0;
position: fixed;
width: 200px;
right: 0;
background: #FDE95E;
}
The layout for this is rather simple and easy to achieve and has been covered here a lot, my problem comes from when I want the right div to be scrollable.
I simply cannot get the left side to be fluid and statically positioned while allowing the right side to be a fixed width and scrollable.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" style="display: none !important;">
body {
margin: 0 0 0 0;
overflow: hidden;
}
#page-wrap {
background: white;
max-width: 100%;
}
#main-content {
background-color: #797979;
padding-right: 350px;
padding-top: 20px;
height: 100%;
float: left;
position: absolute;
}
#right-sidebar {
background-color: #cacaca;
width: 350px;
float: right;
overflow: auto;
height:100%;
}
</style>
</head>
<body>
<div class="page-wrap">
<div id="main-content">
<h2>Content Area</h2>
</div>
<div id="right-sidebar">
Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
Try this - jsFiddle
body {
margin: 0 0 0 0;
background-color: #797979;
/*overflow: hidden;*/
}
#page-wrap {
background: white;
max-width: 100%;
}
#main-content {
position:absolute;
right:200px;
left:0px;
padding:20px;
}
#right-sidebar {
background-color: #cacaca;
position:fixed;
overflow-y:scroll;
right:0px;
width:200px;
height:100%;
}
I have a code:
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
</head>
<body>
<div id="main_body"></div>
</body>
</html>
And css off style.css:
* {
margin: auto;
padding: 0;
}
#main_body {
width: 568px;
text-align: left;
height: 295px;
background: url(../images/form_BG.png) no-repeat left;
}
When i run firefox is result is:
But when run in IE is result error show in left, not show in center as firefox
Try this:
div {
margin: auto;
padding: 0;
}
#main_body {
width: 568px;
text-align: left;
height: 295px; background: url(../images/form_BG.png) no-repeat left; }
work in all browser
Just add a Doctype to your page, for example, for Transitional XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
or HTML5:
<!DOCTYPE html>
For XHTML it will be good to change the <html> opening tag to this:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
margin:auto doesn't work well in IE. You can wrap the #main_body div with another div containing the style text-align:center. But this will center align all your texts inside the #main_body. So, add another text-align property inside #main_body to override.
i.e.
change the #main_body like:
<div style="text-align:center">
<div id="main_body"></div>
</div>
and if you don't want the text inside #main_body to be center aligned, change the css like:
#main_body
{
width: 568px;
text-align: left;
height: 295px;
border:1px solid red;
margin:auto;
text-align:left;
}
* {
margin: auto;
padding: 0;
}
body { text-align: center; }
#main_body {
width: 568px;
margin:0 auto;
text-align: left;
height: 295px;
background: url(../images/form_BG.png) no-repeat left;
}
The text-align property in the body tag will center the #main_body div in IE, then the text-align property inside the #main_body selector will reset the text alignment within #main_body
Add this css:
#main_body {
width: 568px;
text-align: left;
height: 295px;
background: url(../images/form_BG.png) no-repeat;
margin: auto;
}
See results of the above css in below images
Firefox:
IE:
I have a certain problem and searched through a lot of questions to find a solution but I just can not seem to fix it. The problem is as following:
There is the main "wrapper" div on the page (for centering reasons), and inside this is some text, images and a number of includes (footer, header etc.). The images are using "position: absolute" and using the CSS "top" and "left" property to offset them. However, Firefox and Internet Explorer 7 seem to start their offset from a different point, meaning the most of the images are just about 10px lower and 10px more to the right in IE7
What I've done to make sure;
- validated my html with the W3C validator (fixed everything)
- tried to replace position:absolute; with some position:relative;
- The position of the wrapper has been set as position:relative;
- would rather not want to work with a a specific stylesheet just for IE7 (so didn't try that)
- PS: used meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" to let my IE8 browser shows my project like it was in IE7
I'm really hoping you could help me out! Thanks in advance and hereby i'm giving the corresponding HTML and CSS
HTML:
<?xml version="1.0" encoding="utf-8"?>
<!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>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<title>
Document Title
</title>
<link rel='stylesheet' type="text/css" href="includes/mainmenu/Mainmenustyle.css"/>
<link rel='stylesheet' type="text/css" href="includes/header_main/header_mainstyle.css"/>
<link rel='stylesheet' type="text/css" href="includes/footer_main/footer_mainstyle.css"/>
<link rel='stylesheet' type="text/css" href="Homepagestyle.css"/>
</head>
<body>
<div id="bg"></div>
<div id="wrapper">
<div>
<!--#include virtual="includes/mainmenu/mainmenu.html" -->
</div>
<div>
<!--#include virtual="includes/header_main/header_main.html" -->
</div>
<div id="about_us" class="about_us">
<p>Some text.</p></div>
<span class="displace"></span>
<div id="aboutgreyhorsenl_title" class="aboutgreyhorsenl_title">
<img src="images/aboutnl_image.png" alt="About Greyhorse"/></div>
<div>
<!--#include virtual="includes/footer_main/footer_main.html" -->
</div>
</div>
</body>
</html>
CSS:
#wrapper{
position:relative;
z-index: 1;
margin:10px auto;
width:1100px;
}
#bg {
width: 100%;
height: 614px;
position: absolute;
top: 93px;
left: 0;
background-image: url(images/stripe.png);
background-repeat: repeat-x repeat-y;
background-attachment: scroll;
}
body {
background-image:url(images/Background_Homepage.png);
background-attachment: scroll;
background-repeat: repeat-x;
background-position: top;
font-family: arial;
color: #111111;
font-size: 0.75em; /* 12px/16=0.75 em */
word-spacing: 2px;
line-height: 175%;
}
.about_us {
display: block;
width: 420px;
height: 12px;
position: absolute;
left:290px;
top:-110px;
}
.aboutgreyhorsenl_title {
position: absolute;
top: 280px;
left: 400px;
}
a.rollover {
display: block;
width: 155px;
height: 115px;
text-decoration: none;
background: url("images/FotoAnne_thumbnail.png");
position: absolute;
left:735px;
top:-100px;
}
a.rollover:hover {
background-position: 775px 0;
}
.displace {
position: absolute;
left:287px;
top:-205px;
}
Thanks in advance again for anyone who could help me out!
the style.css file from the html5boilerplate will make all browsers have the same 'default' settings.. adding this css file to your site (as the first one to be loaded), might fix the issue.
http://html5boilerplate.com/
I have a web page with large div(for example white) and another div that is follows the previous one. The problem is that if white block is big enough and it height is almost or even bigger than the browser window(and scroll bars appear), the red block is in the bottom of the page there is still gap between red div and end of the window in Firefox/Safari/Opera:
But in Explorer/Chrome everything is ok:
My code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title></title>
<style type="text/css">
root { display: block; }
html, body{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-family: Tahoma;
background-color: blue ;
}
#container{
position: absolute;
left: 50%;
width: 961px;
height: 100%;
margin-left: -480px;
}
.infContainer{
position: relative;
padding-left: 19px;
background-color: white;
color: #434343;
}
div#footerCopyright{
position: relative;
bottom: 15px;
font-size: 0.75em;
background-color: red;
}
div#bottomFooterDivider{
height: 50px;
}
div#pageBottomDivider{
height: 35px;
}
</style>
</head>
<body>
<div id="container">
<div id="mainBlock" class="infContainer">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
</div>
<div id="footerCopyright">
<div id="bottomFooterDivider"></div>
</div>
</div>
</body>
</html>
How to solve this problem and have the same page without blue gap in Firefox/Opera/Safari.
Actual page:
http://109.74.203.141/stack/1/tmp.html
Your footerCopyright div is set to position: relative; bottom: 15px;
When I set the bottom to 0 it lines up on the bottom in FF.