I would like to place the middle portion div on top for a #media query -- and then I would like to stack the left portion and right portion divs below it side by side for a responsive and clean looking design, possibly for mobile as well.
Here is my code -- any help would be greatly appreciated! Thanks.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' href="needhelpagain.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|Arvo|Josefin+Slab|Lato|Old+Standard+TT|Open+Sans|PT+Sans|PT+Serif|Roboto|Ubuntu|Vollkorn|Dancing+Script">
<title></title>
</head>
<body>
<header></header>
<div class="container">
<div class="left-portion"></div>
<div class="middle-portion">Blank Content</div>
<div class="right-portion"></div>
</div>
</body>
</html>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background-color:#1a0000;
}
.container{
margin:auto;
width:80%;
overflow:hidden;
background-color:white;
}
header{
padding:50px;
background-color:#000000;
}
.left-portion{
width:22%;
height:1200px;
float:left;
background-color:#fff3e5;
}
.middle-portion{
width:56%;
height:100%;
float:left;
background-color:#ffffff;
color:#000000;
font-family:'old standard tt';
text-align:center;
}
.right-portion{
width:22%;
height:1200px;
float:left;
background-color:#fff3e5;
font-family:'vollkorn';
}
You may be able to get away with making the div on top you have it labeled as left .. Make that 100% width then the other 2 divs set as 50% and the set all of the divs in the container to position relative. And the bottom divs to float left.
<style>
.container{
height: 1200px;
width: 100%;
}
.container div{
position: relative;
}
.topDiv{
width:100%;
height:100px;
}
.botDivs{
width:50%;
height: 200px;
float: left
}
.green{
background:green;
}
.red{
background:red;
}
.blue{
background:blue;
}
</style>
<div class="container">
<div class="topDiv red"></div>
<div class="botDivs green"></div>
<div class="botDivs blue"></div>
</div>
I want to make a container in the middle of the screen and put some div itmes in.
I want sth like this.
I stripped down the html to its essentials for you people.
<!DOCTYPE HTML>
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Webshop</title>
<link href="../css/boilerplate.css" rel="stylesheet" type="text/css">
<style type="text/css">
#content {
position:relative;
width:200px;
height:115px;
background-color:#F00;
top: 900px;
margin:10px;
padding:10px;
display:inline-block;
}
#container {
max-width: 960px;
background: #FFF;
margin: 0 auto;
min-height:100%;
height: auto;
padding-top:0;
padding-left:1em;
padding-right:1em;
padding-bottom:0;
}
</style>
</head>
<body style="background-color:#CF6" >
<div id="container">
<div id="content"> </div>
<div id="content"> </div>
<div id="content"> </div>
</div>
</body>
</html>
The result is awful.
I dont really understand, what you want but have a look at this :
http://jsfiddle.net/u7k6cyf5/
#content {
position:relative;
width:200px;
background-color:#F00;
margin:10px;
padding:10px;
display:inline-block;
}
I am trying to center my webpage. Also there is a min 1000px with and it scales up. Currently my page as it scales it is off centered 30%-center-70%. I am confused as to why this is happening. If anyone can explain why this is happening that would be great.
<!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</title>
<style type="text/css">
#page {
position:relative;
display:block;
width:75%;
margin:auto;
min-width:1000px;
z-index:0;
}
#pageImg {
position:absolute;
width:75%;
margin:auto;
min-width:1000px;
z-index:1;
}
#navBarImg {
position:absolute;
width:75%;
margin:auto;
min-width:1000px;
z-index:2;
}
</style>
</head>
<body>
<div id="page">
<img id="pageImg" src="../Navigation/backgroundImg.png" />
<div id="navBar">
<img id="navBarImg" src="../Navigation/navBarBGImg.png" />
</div>
</div>
</body>
</html>
Maybe try 50% on your page width... I think you got your result from doing a 75% of 75%...
example - http://jsfiddle.net/rob_towner/q8vKK/
#page {
position:relative;
display:block;
width:50%;
margin:auto;
min-width:1000px;
z-index:0;
}
There is additional code to consider that you haven't posted yet. This can be inferred because the code you did post works as you intend it to. A working example (the 1000px width won't fit in the default window size of the rendered window, use the sliders to expand it and see your code is working).
Your CSS I used:
#page {
position:relative;
display:block;
width:75%;
margin:auto;
min-width:1000px;
z-index:0;
}
#pageImg {
position:absolute;
width:75%;
margin:auto;
min-width:1000px;
z-index:1;
}
#navBarImg {
position:absolute;
width:75%;
margin:auto;
min-width:1000px;
z-index:2;
}
I've got two panels in the following code. The first should be a fixed size (or auto), but the second should get the rest of the space available.
So that's the reason that I set height:100%; but it's not still working.
<html style="height:100%;">
<body style="height:100%;">
<div style="background-color:green;">a
</div>
<div style="background-color:gray; height:100%;">d
</div>
</body>
</html>
What am I missing to display the second panel in the rest of the view.
i personally like to use position:absolute.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<style>
html,body {
width:100%;
height:100%;
}
#Green {
position:absolute;
top:0;
left:0;
right:0;
height:30px;
background-color:green;
}
#Gray {
background-color:gray;
position:absolute;
top:30px;
left:0;
right:0;
bottom:0;
}
</style>
<body>
<div id="Green">a</div>
<div id="Gray">d</div>
</body>
</html>
This would force the inheritance of the full length of the div respectful of the top 30px.
Okay so I haven't been able to find a question with an answer yet, so I decided to make my own.
I am trying to create a 100% fluid layout, which technically I have done.
http://stickystudios.ca/sandbox/stickyplanner/layout/index2.php
BUT, what I want to do now, is to make the page 100% in HEIGHT... But I don't want the page to scroll I want the inner DIV to scroll.
So I believe in short I want it to detect the height of the viewport screen, go 100%, and then IF content is longer then the screen, scroll the specific DIV, NOT the page.
I hope this makes sense.
<html>
<body style="overflow:hidden;">
<div style="overflow:auto; position:absolute; top: 0; left:0; right:0; bottom:0">
</div>
</body>
</html>
That should do it for a simple case
I believe this will work for your case
<html>
<body style="overflow:hidden;">
<div id="header" style="overflow:hidden; position:absolute; top:0; left:0; height:50px;"></div>
<div id="leftNav" style="overflow:auto; position:absolute; top:50px; left:0; right:200px; bottom:50px;"></div>
<div id="mainContent" style="overflow:auto; position:absolute; top:50px; left: 200px; right:0; bottom:50px;"></div>
<div id="footer" style="overflow:hidden; position:absolute; bottom:0; left:0; height:50px"></div>
</body>
</html>
this example will give you a static header and footer and allow the navigator and content area to be scrollable.
This is a different way to do this with all abs panels, it will fail on IE6, but I can provide the workaround CSS for IE6 if that is a requirement:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fluid Layout</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style rel="stylesheet" type="text/css">
body { background-color:black; margin:0px; padding:0px; }
.pageBox { position:absolute; top:20px; left:20px; right:20px; bottom:20px; min-width:200px}
.headerBox { position:absolute; width:100%; height:50px; background-color:#333; }
.contentBox { position:absolute; width:100%; top:52px; bottom:32px; background-color:blue; }
.footerBox { position:absolute; width:100%; height:30px; background-color:#ccc; bottom:0px; }
.contentBoxLeft { position:absolute; width:20%; height:100%; background-color:#b6b6b6; }
.contentBoxRight { position:absolute; width:80%; left:20%; height:100%; background-color:white; }
.contentBoxLeft,
.contentBoxRight { overflow:auto; overflow-x:hidden; }
</style>
</head>
<body>
<div class="pageBox">
<div class="headerBox">Header</div>
<div class="contentBox">
<div class="contentBoxLeft">ContentLeft asdf asdf adsf assf</div>
<div class="contentBoxRight">ContentRight asdf asdfa dasf asdf asdfd asfasd fdasfasdf dasfsad fdasfds<br /><br />asdfsad ff asdf asdfasd</div>
</div>
<div class="footerBox">Footer</div>
</div>
</body>
</html>
make overflow:auto for the div
overflow:auto;
on the DIV style
You should just know that the size of the div should increase so it can show scrolls in it.
If you increase the page's size (which should be with style="overflow: hidden;" on the body)
it won't work.
If you don't want to use position:absolute (because it messes up your print out if your margins need to be different than all zeros) then you can do it with a little bit of JavaScript.
Set up your body and div like so to allow the div to scroll:
<body style='overflow:hidden'>
<div id=scrollablediv style='overflow-y:auto;height:100%'>
Scrollable content goes here
</div>
</body>
This technique depends on the div having a set height, and for that we require JavaScript.
Create a simple function to reset the height of your scrollable div
function calculateDivHeight(){
$("#scrollablediv").height(window.innerHeight);
}
And then call this function on both page load and on resize.
// Gets called when the page loads
calculateDivHeight();
// Bind calculate height function to window resize
$(window).resize(function () {
calculateDivHeight();
}
You can try this:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style rel="stylesheet" type="text/css">
.modal{width:300px;border:1px solid red;overflow: auto;opacity: 0.5;z-index:2;}
.bg{background:-webkit-linear-gradient(top,red,green,yellow);width:1000px;height:2000px;top:0;left:0;}
.btn{position:fixed;top:100px;left:100px;}
</style>
</head>
<body style='padding:0px;margin:0px;'>
<div class='bg' style='position:static'></div>
<div class='modal' style='display:none'></div>
<button class='btn'>toggle </button>
</body>
<script>
var str='',count=200;
while(count--){
str+=count+'<br>';
}
var modal=document.querySelector('.modal'),bg=document.querySelector('.bg'),
btn=document.querySelector('.btn'),body=document.querySelector('body');
modal.innerHTML=str;
btn.onclick=function(){
if(bg.style.position=='fixed'){
bg.style.position='static';
window.scrollTo(0,bg.storeTop);
}else{
let top=bg.storeTop=body.scrollTop;
bg.style.position='fixed';
bg.style.top=(0-top)+'px';
}
modal.style.display=modal.style.display=='none'?'block':'none';
}
</script>
</html>