I have created the following demo:
http://thedrivepartnership.com/overflow.html
The scrolls expand fine in FireFox / Chrome but in IE it just does seem to want to work.
Does anyone come across the problem before.
css
body {padding:0px; margin:0px;}
.wrapper {
position:absolute;
top:0px;
bottom:0px;
width:100%;
height:100%;
background:red;
}
.block1 {
position:absolute;
top:0px;
right:0px;
width:70%;
height:50%;
background:green;
}
.block2 {
position:absolute;
bottom:0px;
right:0px;
width:70%;
height:50%;
background:blue;
}
.heading {width:100%; height:50px; background:black;}
.scroll {
overflow-y:scroll;
overflow-x:hidden;
width:100%;
position:absolute;
float:left;
top:50px;
bottom:0px;
zoom:1
}
html
<div class="wrapper">
<div class="block1">
<div class="heading"></div>
<div class="scroll">
<!--content here -->
</div>
</div>
<div class="block2">
<div class="heading"></div>
<div class="scroll">
<!--content here -->
</div>
</div>
</div>
Your design works fine in IE, you just need to declare a DOCTYPE in the first line of your document first.
<!DOCTYPE html>
Related
I have problem with my code. I need have whitespace between the last div (friday_div) and the end of my web page.
HTML code:
<body>
<div class="header">
<h1>Schedule 613</h1>
</div>
<div class="wrapper">
<div class="monday">
<h1>Monday</h1>
<div id="monday_div"></div>
</div>
<div class="tuesday">
<h1>Tuesday</h1>
<div id="tuesday_div"></div>
</div>
<div class="wednesday">
<h1>Wednesday</h1>
<div id="wednesday_div"></div>
</div>
<div class="thursday">
<h1>Thursday</h1>
<div id="thursday_div"></div>
</div>
<div class="friday">
<h1>Friday</h1>
<div id="friday_div"></div>
</div>
</div>
</body>
CSS code:
body{
background-color:lightgray;
min-width:850px;}
.header{
position:fixed;
z-index:1;
left:0;
top:0;
min-height:50px;
width:100%;
background-color:white;}
.wrapper{
position:relative;
top:90px;
left:1%;
width:97.5%;}
.monday,.tuesday,.wednesday,.thursday,.friday{
float:left;
text-align:center;
min-height:250px;
width:100%;
background-color:white;}
.tuesday,.wednesday,.thursday,.friday{
margin-top:30px;}
.friday{
margin-bottom:30px;}
The problem appears only when i tested project in Internet Explorer browser and EDGE. I used Chrome to test what I did but in Chrome 'margin-bottom' works normal. The problem may also appear in other browsers, but I can not check it out. I hope that somebody help me.
(My level of English is not good enough to explain the problem in more detail, so I wrote here a lot of lines of code to people who know how to solve problems like my problem)
Try to add overflow:hidden; to .wrapper
.wrapper{
position:relative;
top:90px;
left:1%;
width:97.5%;
overflow:hidden; // add this
}
Add overflow:hidden; to .wrapper
Then change your CSS to:
body{
background-color:lightgray;
min-width:850px;}
.header{
position:fixed;
z-index:1;
left:0;
top:0;
min-height:50px;
width:100%;
background-color:white;}
.monday,.tuesday,.wednesday,.thursday,.friday{
float:left;
text-align:center;
min-height:250px;
width:100%;
background-color:white;}
.tuesday,.wednesday,.thursday,.friday{
margin-top:30px;}
.friday{
margin-bottom:30px;}
.wrapper{
position:relative;
top:90px;
left:1%;
width:97.5%;
overflow:hidden;
}
I want to have a page like this.
After trying some CSS and HTML code like this:
CSS Code:
html,body{
margin:0px;
background-color:#CCC;
}
#header{
background-color:#FFF;
height:350px;
width:750px;
display:block;
}
#menu{
background-color:#096;
height:60px;
width:100%;
display:block;
}
#content{
background-color:#03F;
width:750px;
height:400px;
}
#footer{
background-color:#900;
height:120px;
width:750px;
display:block;
bottom:0px;
position:relative;
}
HTML Code:
<center>
<div id="header">
</div>
<div id="menu">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</center>
it was the same thing but after making some text into "content" part divs got separate. like thisThis.
Whats the issue in my CSS code?
It is Because p tag have some default margin.
Add CSS like this
p{
margin:0px;
}
Fiddle
Is there any way to make .bar pop up out of bounds of .foo and .plaa and over .baz in the following example:
jsfiddle
HTML:
<div class="plaa">
<div class="foo">
FOO
<div class="bar">
BAR
</div>
</div>
</div>
<div class="baz">
BAZ
</div>
CSS:
.bar{
display:none;
width:420px;
height:420px;
background-color:pink;
z-index:420;
position:absolute;
overflow:auto;
}
.foo{
width:50px;
height:50px;
background-color:orange;
cursor:pointer;
position:relative;
}
.baz{
position:absolute;
top:55px;
background-color:yellow;
}
.plaa{
position:absolute;
overflow:auto;
max-width:50px;
max-height:50px;
}
JS:
$(".foo").click(function(){$(".bar").toggle()});
It works fine when I remove overflow:auto; from .plaa but unfortunately I can't do that in my real world case.
Make these change
.plaa{
position:absolute;
max-width:50px;
max-height:50px;
}
$(".foo").click(function(){$(".bar").toggle(function(){$(".bar").css({"overflow":"visible"});})});
I hope this is what you want.
if you really can't do that in real world case then manipulate the DOM using javascript.
Using HTML, CSS and DIVs, I like to create a 3 row layout, like: here.
Additionally I need a signin-box with a fixed width in the top right of the first row.
I tried that:
<div id="container">
<div id="top">
<div id="header"></div>
<div id="signin"></div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
body {
margin:0;
padding:0;
}
div#top {
position:fixed;
width:100%;
height:65px;
z-index:100;
background-color:#AAA;
}
div#header {
width:100%;
height:65px;
background-color:#F00;
float:left;
}
div#signin {
width:100px;
height:65px;
background-color:#0F0;
float:right;
}
div#footer {
width:100%;
height:65px;
position:fixed;
bottom:0;
background-color:#06F;
}
div#content {
background-color:#111;
width:100%;
height:100%;
position:absolute;
}
But the login box is placed below the first row; see here.
How can I place the login box at the right of the first row? TIA!
you need to add positon:absolute; and right:0px; to signin selector
try this
div#signin {
width:100px;
height:65px;
background-color:#0F0;
position: absolute;
right:0px;
}
DEMO here
Simple code move signin div inside header div
<div id="container">
<div id="top">
<div id="header">
<div id="signin"></div>
</div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
You can put your <div id="signin"></div> inside <div id="header"></div>
<div id="header">
<div id="signin"></div>
</div>
My code is viewable at http://jsfiddle.net/ATbA5/2/ code will also be at the end of this post
I am trying to make content-wrapper 100% height however for it to be centered. I have looked at other theards on stackoverflow and Can't find a solution. Also A fixed footer at the end of the page not the bottom of the broswer window
HTML
<head>
<link rel="stylesheet" type="text/css" href="primary-resources/css/main-styles.css"/>
</head>
<body>
<div class="content-wrapper">
<!-- Header -->
<div class="header">
<div class="threetwentyleft">
<img src="primary-resources/imgs/header-logo.png" />
</div>
<div class="sixfortyright">
<div class="gameAdBanner">
<img src="game-resources/gameone/imgs/banner.png"/>
</div>
</div>
</div>
<!-- Content -->
<div class="gameLeft"></div>
<div class="gameRight"></div>
</div>
</body>
</html>
CSS
body ,html {
background-color:#000000;
height:100%;
top:0px;
bottom:0px;
clear:both;
padding:0px;
margin:0px;
}
.content-wrapper {
margin:auto;
background-color:#ffffff;
width:960px;
padding:0px;
bottom:0;px;
top:0px;
margin:auto;
box-sizing:border-box;
height:100%;
box-sizing:border-box;
clear:both;
box-sizing:border-box;
}
.header {
width:100%;
}
.threetwentyleft {
width:320px;
float:left;
padding:2px;
}
.threetwentyleft img{
width:320px;
padding:2px;
border:0px;
}
.sixfortyright {
width:630px;
float:right;
height:130px;
}
.gameAdBanner {
width:610px;
margin-top:2px;
margin-left:auto;
margin-right:auto;
}
.center {
margin-left:auto;
margin-right:auto;
}
.gameLeft {
width:700px;
padding:5px;
float:left;
}
.gameRight {
width:260px;
background-color:#CCC;
float:right;
padding:5px;
height:100%;
margin-right:3px;
}
.footer {
width:960px;
background-color:#FC6;
bottom:0px;
height:25px;
position:absolute;
}
Sounds like you want normal html behaviour, no need for any css, just add a div, or any block element after the content.