For the last days I had some issues with a specific layout I want for a website. I have added an image to explain the layout and also some CSS code I have been trying out with below. I tried using floating layout, absolute positioning and all kinds of combinations to fix the layout but I can't seem to get it right. I hope any of you guys could help me out with this.
Here is the layout image:
Here is the CSS code:
html, body {
overflow:hidden;
}
* {
margin:0;
padding:0;
}
.header {
background-color:#CCC;
position:fixed;
left:0;
top:0;
width:100%;
height:40px;
}
.wrapper {
position:absolute;
width:100%;
top:40px;
bottom:40px;
}
.left {
float:left;
overflow-y:scroll;
width:30%;
min-width:300px;
height:100%;
}
.right {
float:left;
overflow-y:scroll;
right:0;
width:70%;
height:100%;
}
.footer {
background-color:#000;
position:fixed;
bottom:0;
left:0;
width:100%;
min-width:500px;
height:40px;
}
Is this what you wanted? DEMO
REMOVE
.wrapper
{
position:absolute;
width:100%;
top:40px;
bottom:40px;
}
.left
{
float:left;
overflow-y:scroll;
width:30%;
min-width:300px;
height:100%;
}
.right
{
float:left;
overflow-y:scroll;
right:0;
width:70%;
height:100%;
}
REPLACE WITH
div.left,
div.right {
display:inline;
float: left;
position: relative;
height: 100%;
overflow-y: scroll;
}
.left {
width: 30%;
}
.right {
width: 70%;
}
UPDATE DEMO
*
{
margin:0;
padding:0;
}
div.wrapper {
width: 100%;
min-width: 600px; /* If the window gets bellow 600px .left will stay 30% of 600 and .right will stay 70% of 600*/
}
div.left,
div.right {
display:inline;
float: left;
position: relative;
height: 100%;
overflow-y:scroll;
}
.left {
width: 30%;
background: red;
}
.right {
width: 70%;
background:green;
}
.header
{
background-color:#CCC;
position:fixed;
left:0;
top:0;
width:100%;
height:40px;
}
.wrapper
{
position:absolute;
width:100%;
top:40px;
bottom:40px;
}
.footer
{
background-color:#000;
position:fixed;
bottom:0;
left:0;
width:100%;
min-width:500px;
height:40px;
}
We eventually used flex-box layout to be able to use for example 300px and let the rest be fluid.
Related
If have an iframe in my PhoneGap app. The frame has been given a height of 1000.
By adjusting its width to 50% I can scroll by touching the parent on the space next to the frame. But when I try to scroll by touching the frame itself, there is no response.
I looked for this problem and some issues have been reported that came with a solution including the -webkit-overflow-scrolling: touch; but no luck.
#content_wrap {
display: inline-block;
float:left;
width:100%;
overflow-x:hidden;
position:relative;
height:auto;
z-index:300;
}
#content_wrap .content_container {
position:absolute;
left:0px;
display:inline-block;
float:left;
width:100%;
padding:0;
min-height:100%;
height:auto;
background-color:#FFF;
}
#tickets {
display:inline-block;
float:left;
width:50%;
margin:0px;
height:auto;
}
#ticketFrame {
height:1000px;
display:inline-block;
float:left;
width:100%;
}
The html:
<div id="content_wrap">
<div class="content_container">
<div id="tickets">
<iframe src="someurl" frameborder="0" id="ticketFrame"></iframe>
</div>
</div>
</div>
I am a fan of using display inline block and float left as u can see ;)
What to do to be able to scroll with touchscreen in phonegap?
maybe problem is your iframe tag? </iframe">
if its not, add/change your css and try again.
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
#content_wrap {
display: inline-block;
float:left;
width:100%;
overflow-x:hidden;
position:relative;
height:100%;
z-index:300;
}
#content_wrap .content_container {
position:absolute;
left:0px;
display:inline-block;
float:left;
width:100%;
padding:0;
min-height:100%;
height:auto;
background-color:#FFF;
}
#tickets {
display:inline-block;
float:left;
width:50%;
margin:0px;
height:100%;
right: 0;
bottom: 0;
left: 0;
top: 0;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
#ticketFrame {
height:1000px;
display:inline-block;
float:left;
width:100%;
}
I try to vertically center an image in the middle of the body but nothing seems to work. I've tried different tricks found here (height 100%, table-cell, position:relative...), but with no luck until now. My code is
html:
<div id="container">
<div id="header">Header</div>
<div id="body">
<div class="image"></div>
</div>
<div id="footer">Footer</div>
</div>
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ccc;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px;
}
.image {
background: url("http://lorempixel.com/300/200/nature/") no-repeat center;
height: 200px;
width: 100%;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#ccc;
}
I made a fiddle here: http://jsfiddle.net/dragoeco/hjcz6j0r/1/
I looking for a working solution with IE8+ so maybe there is a jQuery way to do that job? What is important for me is to keep the footer at the bottom of the viewport so that's why I used a obsolute position for footer. Thanks.
Something like this maybe :
LIVE EXAMPLE
html, body {
height: 100%;
}
#container {
height: 100%;
width: 100%;
display: table;
margin-top:-60px; //height of the footer
}
#body {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.image {
background: url("http://lorempixel.com/300/200/nature/") no-repeat center;
height:200px;
}
#header {
background:#ccc;
padding:10px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#ccc;
}
I had success with the following CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ccc;
padding:10px;
position: relative;
}
#body {
padding:10px;
padding-bottom:60px;
position: relative;
}
.image {
background: url("http://lorempixel.com/300/200/nature/") no-repeat center ;
position: absolute;
height: 200px;
width: 100%;
top: 50%;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#ccc;
}
Source: http://www.w3.org/Style/Examples/007/center.en.html#vertical
Add this:
.image{
position: absolute;
top: 50%;
margin-top: -100px;
}
It works everywhere (except IE6-7, position relative may be needed there). You can do the same for horizontal centering.
Here is the fiddle: http://jsfiddle.net/hjcz6j0r/7/
Hello I'm trying to align the "container2" div to bottom of "cointainer" but I'm having troubles and I dont know where, any help?
HTML
<div id="container">
<div id="container2">
<p>Text</p>
</div>
</div>
CSS
#container{
/*Colors*/
background-color:rgb(129, 159, 255);
/*Size Box*/
width:400px;
height:200px;
margin:0 auto;
overflow:auto; }
#container2{
/*Colors*/
background-color:black;
color:white;
/*Size Box*/
width:50%;
height:50%;
padding:20px;
margin:0 auto;
overflow:auto; }
http://jsfiddle.net/G4GT4/1/
With the current structure you would have to position the child with position:absolute.
JSfiddle Demo
CSS
#container{
/*Colors*/
background-color:rgb(129, 159, 255);
/*Size Box*/
width:400px;
height:200px;
margin:0 auto;
overflow:auto;
position: relative;
}
#container2{
/*Colors*/
background-color:black;
color:white;
/*Size Box*/
width:50%;
height:50%;
padding:20px;
margin:0 auto;
overflow:auto;
position: absolute;
bottom:0;
left:50%;
margin-left: -25%;
}
Add
#container { position: relative; }
#container2 { position: absolute; bottom: 0; }
Or simply use tables
Demo
#container {
background-color:rgb(129, 159, 255);
display: table-cell;
width:400px;
height:200px;
margin:0 auto;
overflow:auto;
text-align: center;
vertical-align: bottom;
}
#container2 {
background-color:black;
color:white;
/*Size Box*/
width:50%;
height:50%;
padding:20px;
margin:0 auto;
overflow:auto;
display: inline-block;
}
You have to set margin-top (you know both heights) or using positioning, I´ve chosen second variant.
#container {postition: relative}
#container2 {position: absolute; bottom: 0; left: 25%;}
http://jsfiddle.net/G4GT4/2/
You can set position relative to container2
Working fiddle here
#container2{
/*Colors*/
position: relative;
top: 15%;
background-color:black;
color:white;
/*Size Box*/
width:50%;
height:50%;
padding:20px;
margin:0 auto;
overflow:auto;
}
If you don't want to use position absolute; you can do this:
fiddle
css
#container{
text-align:center;
}
#container:before {
content:"";
height:100%;
display:inline-block;
vertical-align:bottom;
}
#container2{
display:inline-block;
vertical-align:bottom;
}
For the first time i'm doing some responsive DIV'S and now i have made my responsive background and i wanted to my content look like this:
But it looks like this:
If someone could help me it would be great.. Here is my code that you see what i was doing
jsFiddle
HTML:
<div class="container">
<div class="leftColumn"><img src="projekt.png" width="400" height="400"></div>
<div class="rightColumn"><img src="projekt2.png" width="400" height="400"></div>
</div>
CSS:
.container {width:100%;}
.leftColumn {width:50%; float:left;}
.rightColumn {width:50%; float:left;}
#media(max-width:400px)
{
.leftColumn { width:100px; float:none; display:block; position:relative; background-color:red; }
.rightColumn { width:100px; float:none; display:block; position:relative; background-color:blue; }
}
Images are 400 x 400 pixels and background image is 1920 x 1080
For background, use background-size property (CSS3).
.container {width:100%;}
.leftColumn {width:50%; float:left;}
.rightColumn {width:50%; float:left;}
#media(max-width:400px)
{
.container {
width: 400px;
height: 400px;
background: url(http://www.extremedialer.com/wp-content/uploads/2013/10/bg-1.jpg);
background-size: 400px;
}
.leftColumn { width:100px; float:none; display:block; position:relative; background-color:red; }
.rightColumn { width:100px; float:none; display:block; position:relative; background-color:blue; }
}
#media (min-width:401px) and (max-width:800px)
{
.container {
width: 800px;
height: 800px;
background: url(http://www.extremedialer.com/wp-content/uploads/2013/10/bg-1.jpg);
background-size: 800px;
}
.leftColumn { width:200px; height:200px; float:left; margin: 20px; display:block; position:relative; background-color:red; }
.rightColumn { width:200px; height:200px; float:left; margin: 20px; display:block; position:relative; background-color:blue; }
}
http://jsfiddle.net/XmqNy/235/
try it in your css file:
#media(max-width:400px)
{
.leftColumn { width:100px; position:relative; background-color:red; }
.rightColumn { width:100px; position:relative; background-color:blue; }
}
You don't need to write display:none.
Given the following HTML:
<div id="wrapper">
<div id="header">*header*</div>
<div id="content">*content*</div>
<div id="footer">*footer*</div>
</div>
And the following CSS:
#wrapper {
min-height:100%;
position:relative;
}
* {margin:0;padding:0;height:100%;}
#header {
width:100%;
height:auto;
margin-top: 0;
}
#content {
width:100%;
height: auto;
margin:0;
margin-top:0;
margin-bottom:0;
}
#footer {
width:100%;
height:auto;
position:absolute;
margin-top: 0;
margin-bottom: 0;
bottom:0;
left:0;
}
There is a gap between the content and the footer's div. How can I set that the content's height must be all the space between the header and the footer?
The footer has to have the 'absolute' position to position is at the bottom of the page.
Try using display:table, table-row options
display:table to #wrapper
display:table-row to #header, #content (width and height should be 100% here) and #footer
#wrapper {
min-height:100%;
position:relative;
display: table;
width:100%
}
#header {
width:100%;
height:auto;
margin-top: 0;
background:#dbfcd6; display: table-row;
}
#content {
width:100%; display:table-row; background:green; height:100%
}
#footer {
width:100%;
height:auto;
position:absolute;
margin-top: 0;
margin-bottom: 0;
bottom:0;
left:0; background:yellow;
display: table-row;
}
DEMO
It is because your footer has a bottom:0 and its position is absolute.This will make it stuck at the bottom.
You should give your content a min height-and max-height like this:
#content {
background-color:red;
width:100%;
min-height:450px;
max-height: auto;
margin:0;
margin-top:0;
margin-bottom:0;
}
Then change the position of the footer to relative
Check out this fiddle : )Check me!