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%;
}
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;
}
I have searched and searched and tried many of options to fix this "bug", and I cannot get it to work. I have a div that has a background image that is half-way hidden behind the wrapper. On hover, it animates towards the top. The link is inside an absolute positioned div, and has no text. On IE there is no "pointer", therefore making the link un-clickable. This works in Chrome/FF.
I've tried:
border-right 1px transparent (this i actually can get a "pointer"
on the far right, but it's so small
background:
url(/images/transparent.gif) 0 0 repeat; (yes i made a 1x1px trans
image)
put another div inside the anchor that has the background
image
z-index: 0 or 1 or 2
I would like the CSS/HTML fix for this, not javascript. Thanks so much!
CSS
#wrapper
{
width: 950px;
margin: 60px auto 40px;
background-color: #fff;
position:relative;
}
.login-btn
{
background: url(/images/btn-sprite.png) no-repeat 0 -48px;
height: 34px;
width: 98px;
}
#login-btn
{
position:absolute;
top:-15px;
right:20px;
z-index:-1;
}
#login-btn a
{
display:block;
width: inherit;
height: inherit;
background-image: url(/images/transparent.gif) 0 0 repeat;
}
HTML
<div id="wrapper" class="round">
<div id="login-btn" class="login-btn">
<a href="#">
</a>
</div>
.....
.....
Here is your code, i am attaching the image also please copy to youe image folder and test. i checked in ie8 and ie7 it is working fine.
<!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>Untitled Document</title>
<style>
#wrapper {
width: 950px;
height:450px;
margin: 0 auto;
background-color: #fff;
border:#F33 solid thin;
position:relative;
}
#login-btn {
height: 33px;
width: 145px;
display:block;
position:absolute;
right:0;
top:5px;
}
#login-btn a:link, #login-btn a:visited {
background:url(images/btn-sprite.png) top left no-repeat;
height: 33px;
width: 145px;
display:block;
}
#login-btn a:hover {
background:url(images/btn-sprite.png) bottom left no-repeat;
height: 33px;
width: 145px;
display:block;
cursor:pointer;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="login-btn">
</div>
</body>
</html>
i figured it out. in IE, you cannot have an anchor w/ a negative z-index, b/c it hides it behind the body or whatever, and the event doesn't get passed through. basically what I ended up doing is placing the anchor around the div (login-btn), and giving the div a z-index of -1, therefore relieving the z-index on the anchor
HTML
<div id="wrapper" class="round">
<a href="#" id="login-btn">
<div class="login-btn">
</div>
</a>
....
....
CSS
#wrapper
{
width: 950px;
margin: 60px auto 40px;
background-color: #fff;
position:relative;
}
.login-btn
{
background: url(/images/btn-sprite.png) no-repeat 0 -48px;
height: 34px;
width: 98px;
}
a#login-btn
{
display:block;
height: 34px;
width: 98px;
position:absolute;
top:-15px;
right:20px;
}
a#login-btn div
{
z-index: -1;
position:relative;
}
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:
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.
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.