<div class="con">
<div class="left" id="left">
<input type="button" value="set the height of the left panel" id="open" />
</div>
<div class="right" id="right"></div>
</div>
The left and right panel are both floated left,they work well when no scroll bar exist,however if the height of the left panel changed,and the scroll bar will display,then the right panel will go to bottom.
See exmaple here:
At first,the right div will display beside the left,when you click the button,the right will go to bottom.
How to fix it?
update
In fact I can not set the absolute size of the left and right div,since I want them resize according the content autoly.
Fullcode:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body{
padding:0px;
margin:0px;
height:100%;
}
.con{
float:left;
position:relative;
left:100px;;
top:100px;
border:2px solid red;
max-height:80%;
overflow-y:auto;
}
.left{
background-color:black;
position:relative;
float:left;
}
.right{
background-color:blue;
position:relative;
float:left;
width:300px;
height:200px;
}
</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById("open").onclick=function(){
document.getElementById("left").style.height="900px";
//document.getElementById("right").style.width="300px";
//document.getElementById("right").style.height="500px";
}
}
</script>
</head>
<body>
<div class="con">
<div class="left" id="left">
<input type="button" value="set the height of the left panel" id="open" />
</div>
<div class="right" id="right"></div>
</div>
</body>
</html>
This works...
.con{
float:left;
position:relative;
left:100px;;
top:100px;
border:2px solid red;
max-height:80%;
overflow-y:scroll;
}
The best way is to make the left and/or right panel a bit more "narrow"
Related
I've a html page with some div tags in it, I want to put my container div in center of computer screen whether I zoom-in or zoom-out.
I want to modify my html page in such a manner as www.bing.com. The homepage centers on the screen when you zoom-out, whereas, my web page continuously expands while zooming.
My HTML pagecode:
<html>
<head>
<title>
HTML test page
</title>
<style>
.horizontal{
width:100%;
height:100px;
background-color: #bbb;
}
.vertical{
width:100px;
height:70%;
background-color: #bbb;
}
#container{
margin:auto;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div class="horizontal">
</div>
<div class="vertical" style="float:left;">
</div>
<div class="vertical" style="float:right;">
</div>
<div class="horizontal" style="float:left;" >
</div>
<h1 style="font-size:3em; color:Green; text-align:center;">
HTML Test page
</h1>
</div>
</body>
</html>
How to adjust my CSS code so that I can implement centralized page style same of (www.bing.com)? I want to centralize my container div on pressing Ctrl+-
I just check bing.com. It seems they change position and size of their centered div using JS. It centered while page load and the same when page is re-sized. And do not forget absolute position for #container.
<script>
$(window).resize(function() {
doResize();
}
$(document).ready(function(){
doResize();
}
function doResize() {
var windowHeight = $(window).height();
$('#container').css('top',(windowHeight - $('#container').height())/2);
}
</script>
it has something to do with you using percentages rather than say Pixels or EMs
I got it so that it is staying centered but i still have it sticking to the top of the browser.
<html>
<head>
<title>
HTML test page
</title>
<style>
.horizontal{
width:100%;
height:100px;
background-color: #bbb;
}
.vertical{
width:100px;
height:250px;
background-color: #bbb;
}
#container{
margin:auto auto;
width:750px;
height:400px;
}
</style>
</head>
<body>
<div id="container">
<div class="horizontal">
</div>
<div class="vertical" style="float:left;">
</div>
<div class="vertical" style="float:right;">
</div>
<div class="horizontal" style="float:left;" >
</div>
<h1 style="font-size:3em; color:Green; text-align:center;">
HTML Test page
</h1>
</div>
</body>
</html>
Edit possibility
you could use a MediaQuery and set the top:###px so that the rest of your page sets up with the center. but you would probably have to create several CSS Files or write a lot of CSS code to make it work
Answer to css get height of screen resolution
this answer has a link in it to media queries that takes you to w3.org Media Queries site
After looking that bing page you just referred us, I believe this is what you probably want this
<html>
<head>
<title>
HTML test page
</title>
<style>
body {
width: 100%;
height: 100%;
margin:auto;
}
#container {
vertical-align: middle;
margin:auto;
height:100%;
width:100%;
display: table;
}
span {
display: table-cell;
vertical-align: middle;
text-align:center;
font-size:5em;
color:#fff;
}
#inner {
margin:auto;
width:50%;
height:auto;
border:100px solid #bbb;
color:Green;}
</style>
</head>
<body>
<body>
<div id="container">
<div class="horizontal">
</div>
<div class="vertical" style="float:left;">
</div>
<div class="vertical" style="float:right;">
</div>
<div class="horizontal" style="float:left;" >
</div>
<span><div id="inner">HTML Test page</div>
</span>
</div>
</body>
</body>
</html>
This creates a 100px sized border to your div, which is aligned in center as you want
i tried using <input type="text" id="nam_beneficiary" size="70" style ="BORDER-STYLE: none;align:left" value=""/> but it didnt work, pls how can I make it justify from the left, so thyat while printing it will align from the left instead of the right
You can use
margin:0;
padding:0;
try it our self
<!DOCTYPE html>
<html>
<head>
<style>
body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="container">
<div class="right">
<p><b>Note: </b><input type="text" id="nam_beneficiary" size="70" style ="BORDER-STYLE: none;align:left" value=""/> </p>
</div>
</div>
</body>
</html>
Im working on a website, and Im trying to put a navigation bar in the navigation divider I made, however when I put the image in, it doesnt go into the divider, even though its between the tags.
Heres what it looks like:
Heres My code:
CSS:
body{background-color:#030303}
#wrapper {width:800px;
margin:0 auto;
}
#header {background-color:yellow;
text-align:center;
height:50px;
}
#footer{clear:both;
background-color:yellow ;
text-allign:center;
}
#logo {float:left;
width: 139px;
background-color: black;
text-align: left;
height:70px;}
#navigation {width: 800px;
background-color:#EDEDED;
height:50px;
}
#sidebar {float:left;padding:20px; background-color:green;text-align:right;width:100px;height:460px;}
#content {float:right;width: 620px;
padding:20px; background-color:gray;
text-align:left; height:500px;
border-color:#0017FF;
}
HTML:
<! DOCTYPE html>
<html>
<head> <title>Website</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
This is my header.
</div>
<div id="logo">
<br/>
<img src="images/SubZer0-logo-and-name.png" width="140" height="50" align="left"></div>
<div id="navigation">
<img src="images/subzero-banner-new.png" width="750" height="45" align="top">
</div>
<div id="content">
This is my content box.
</div>
<div id="sidebar">
This is my sidebar.
</div>
<div id="footer">
This is my footer.
</div>
</body>
</html>
How Do I fix this?
Thank you!
Never Mind, I fixed it... Turns out the image was too big for the container.. I dont understand why though, Since the Containter was 800x50 and the image was 750x45, but it works now and thats what matters.
I have a problem when using negative position(Ex. top:-20px) in absolute div and add overflow auto to the parent div. The text goes to hide in all browser. I want to make it visible. In my application structure its not possible to remove overflow:auto;. Do yo have any idea, how to make it visible? Just copy this code you will get the better idea.
<!DOCTYPE html>
<head>
<title>Untitled Document</title>
<style>
body{
margin:50px;
}
.Relative{
width:200px;
height:200px;
position:relative;
overflow:auto;
background-color:#CCCCCC;
z-index:1;
}
.Abs{
position:absolute;
top:-20px;
right:0;
width:100px;
height:100px;
border:solid 1px;
background-color:#99CCCC;
z-index:99999999 !important;
}
.RemoveOverFlow{
overflow:inherit;
}
</style>
</head>
<body>
<div class="Relative RemoveOverFlow">
<div class="Abs">This is a test text in absolute div</div>
Remove <br />
overflow <br />
from the <br />
relative div
</div>
<br />
<br />
<div class="Relative">
<div class="Abs">This is a test text in absolute div</div>
Add <br />
overflow:auto <br />
into <br />
relative div
</div>
</body>
</html>
Try changing overflow: auto to overflow:visible in .Relative class
Example Fiddle : http://jsfiddle.net/Wpcnx/
Can you have the div .Abs outside the div .Relative if so this would work:
http://jsfiddle.net/9CqUC/1/
Hi I have a problem cosidering a floating div that i can't figure out. I know many people have got the same problem but i have not found a normal solution. maybe you can help me ?
I want that the div on the left will grow on it's height when the one on the right will grow it's height. The one on the right will grow dynamicaly, because the text or other things in it will have diffrent sizes.
This is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<style>
#content
{
width:600px;
height:auto;
overflow:hidden;
background-color:#FF3399;
}
#content1
{
width:300px;
background-color:#3333CC;
float:left;
}
#content2
{
width:300px;
overflow:hidden;
background-color:#CCFF66;
}
</style>
</head>
<body>
<div id="content">
<div id="content1">
1
</div>
<div id="content2">
2
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</div>
</body>
</html>
This is the eternal css column height issue. There are some (painful) ways to work around it with pure css, but I've been happy using this jQuery plugin: http://www.cssnewbie.com/equalheights-jquery-plugin/
It's not the "right" way to handle it but in my experience it's the only way that won't drive you insane.
I usually use this snippet of jQuery..
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
equalHeight($('.your-divs'));
Is that ok ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Untitled Document
<style>
#content
{
width:600px;
height:auto;
overflow:hidden;
background-color:#FF3399;
}
#content1
{
width:300px;
background-color:#3333CC;
}
#content2
{
width:300px;
overflow:hidden;
float: right;
background-color:#CCFF66;
}
</style>
</head>
<body>
<div id="content">
<div id="content2">
2
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
<div id="content1">
1
<div style="clear: both"></div>
</div>
</div>
</body>
this solution is what i was looking for but i have a very important question i want to place a div at bottom of the content1 with a static height and width but i can't do it because the div just wont go there the div can also be an imgage, you can't use position:absolute because the content1 div height will not be static so the div in it will not be in one place all the time. I'm using a solution that helped me a lot and I just want to add to it that div at the bottom on content1. So it looks like this content1 have got 2 divs one in the top as first and the other in the bottom. It is very important to use this code because it fixes the div height problem that I mentioned:
<style>
#content
{
width:600px;
height:auto;
overflow:hidden;
background-color:#FF3399;
}
#content1
{
width:300px;
background-color:#3333CC;
}
#content2
{
width:300px;
overflow:hidden;
float: right;
background-color:#CCFF66;
}
</style>
<div id="content">
<div id="content2">
2
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
<div id="content1">
1
<div style="clear: both"></div>
</div>
</div>