http://i.stack.imgur.com/aDBuK.png
http://i.stack.imgur.com/mPbuX.png
How do I get #cols to contain the whole of #botcol's area. I realise this is quite basic but I've been struggling with it for a while, thanks for your help in advance.
Html:
<div id="content">
<img id="worldmap" src="worldmap.png"/>
<div id="cols">
<div id="topcol">
...
</div>
<div id="botcol">
<div id="infopanel">
...
</div>
</div>
CSS:
div#container{
margin-left: auto;
margin-right: auto;
width: 70%;
height:100%;
position: relative;
border: grey solid 1px;
}
#cols {
z-index:1;
position: absolute;
top:0;
left:0;
height:100%;
width:100%;
overflow:auto;
}
#topcol {
width:100%;
overflow:auto;
}
#botcol {
height:100%;
width:100%;
}
div#content{
position:relative;
}
Related
So I have been looking around on the internet to find a solution in order to make the footer stay at the very bottom on the page regardless of the length of the content of the page. I have followed the CSS from tutorials, the footer is only at the bottom of the page if the content is not long enough, if the content is much longer, the page will get the scroll bar and the footer will get stuck in the middle of the page as you scroll down for more content. Below is my CSS and HTML.
body,html{
background-color:#fff;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
.wrapper {
position:relative;
top:0px;
width:100%;
min-height:100%;
padding:0px;
margin:0px;
}
.country-container {
position:absolute;
top:100px;
left:20%;
width: 1024px;
height:1300px;
background:blue;
}
.container {
position:absolute;
top:0px;
left:20%;
width: 1024px;
height:86px;
max-height:300px;
background:blue;
}
#footer{
position:absolute;
bottom:0px;
width:100%;
height:100px;
max-height:900px;
left:0px;
color:#000099;
background:#f2f2f2;
}
Now this is my html, the two absolute positioned divs and the footer are inside the wrapper which has position relative.
<html>
<body>
<div class="wrapper">
<div class="container">Container 1</div>
<div class="country-container">Container 2</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Try to use this above in Css code
<div style="width: 100%;height: auto;border:1px solid red;float:left;">
<div style="width: 100%;height: auto;border:1px solid green;float:left;">
</div>
<div style="width: 100%;height: auto;border:5px solid Yellow;position: fixed;float:left;margin-top: 50%;">
</div>
</div>
body,html{
background-color:#fff;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
.wrapper {
position:relative;
top:0px;
width:100%;
min-height:100%;
padding:0px;
margin:0px;
}
.country-container {
position:absolute;
top:100px;
left:20%;
width: 1024px;
height:1300px;
background:blue;
}
.container {
position:absolute;
top:0px;
left:20%;
width: 1024px;
height:86px;
max-height:300px;
background:blue;
}
#footer{
position:fixed;
bottom:0px;
width:100%;
height:100px;
max-height:900px;
left:0px;
color:#000099;
background:#f2f2f2;
}
<div class="wrapper">
<div class="container">Container 1</div>
<div class="country-container">Container 2</div>
<div id="footer">Footer</div>
</div>
change #footer to
position:fixed;
Please try this css and see fiddle link:
body,html{
background-color:#fff;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
.wrapper {
position:relative;
top:0px;
width:100%;
min-height:100%;
padding:0px;
margin:0px;
}
.country-container {
background: #0000ff none repeat scroll 0 0;
height: 1300px;
left: 20%;
position: relative;
width: 1024px;
}
.container {
background: #0000ff none repeat scroll 0 0;
height: 86px;
left: 20%;
margin-bottom: 3%;
max-height: 300px;
position: relative;
top: 0;
width: 1024px;
}
#footer {
background: #f2f2f2 none repeat scroll 0 0;
bottom: 0;
color: #000099;
height: 100px;
left: 0;
max-height: 900px;
position: absolute;
width: 100%;
}
https://jsfiddle.net/tn30t1k7/2/
Otherwise you can reffer this link:
http://www.cssstickyfooter.com/
<body>
<section class="wrapper">
<main class="content">
content
</main>
<footer class="footer">
footer
</footer>
</section>
</body>
html {
position: relative;
min-height: 100%;
}
body{
margin: 0 0 60px 0;
}
/* don't do that */
/* .wrapper {
position: relative;
} */
.content {
background: green;
height: 200px;
/* height: 700px; */
}
footer{
position: absolute;
bottom: 0;
left:0;
width: 100%;
height: 60px;
background-color: orange;
}
How about this https://jsfiddle.net/zkto8o88/2/.
.footer class will search for the nearest parent with relative position which in this case is html tag.
If the .wrapper class would have the position relative property then it would not work.
Can someone plz show me how to center this image in its div while keeping the image overlapping its div top.
jsfiddle.net/MalcollmS/0ees82hc
<body>
<div id="outerdiv">
<div id="innerdiv">
<img src="http://www.mylester.lester.com.au/Content/Images/LesterBanner.jpg" alt="lesterbanner" id="banner" />
<div id="body">
</div>
</div>
</div>
</body>
body{
height:100%;
background-color: #142758;
padding-top:50px;
}
#outerdiv {
margin:auto;
width:70%;
height:500px;
background-color:#778CAC;
}
#innerdiv {
width:95%;
margin:auto;
height:95%;
background-color:white;
position: relative;
top: 50%;
transform:translateY(-50%);
}
header {
width:100%;
}
#banner {
background-image:url('lesterbanner.jpg');
width:300px;
margin-left:auto;
margin-right:auto;
margin-top:-90px;
}
Malcolm
Just text-align:center; add to #innerdiv
jsFiddle example
img tags are display: inline-block by default which can be centered with text-align: center; on the parent element:
#innerdiv {
...
text-align: center;
}
JSFIDDLE
Try using % for margin or assign it to a div here
<body>
<div id="outerdiv">
<div id="innerdiv">
<!-- assign div --><div class="img_holder">
<img src="http://www.mylester.lester.com.au/Content/Images/LesterBanner.jpg" alt="lesterbanner" id="banner" />
</div>
<div id="body">
</div>
</div>
</div>
</body>
Css
body{
height:100%;
background-color: #142758;
padding-top:50px;
}
#outerdiv {
margin:auto;
width:70%;
height:500px;
background-color:#778CAC;
}
#innerdiv {
width:95%;
margin:auto;
height:95%;
background-color:white;
position: relative;
top: 50%;
transform:translateY(-50%);
}
header {
width:100%;
}
#banner {
background-image:url('lesterbanner.jpg');
width:100%;
}
.img_holder{
position: relative;
width:300px;
margin: 0 auto;
top: -30px;
}
#banner {
background-image:url('lesterbanner.jpg');
width:300px;
margin:-2% 0 0 42%;
}
I have got the following code:
HTML:
<div id="mapWrapper" style="height: 624px;">
<div class="box" id="map">
<h1>Campus</h1>
<p>Description Campus Map.</p>
<img src="abc.png">
</div>
</div>
CSS:
.box {
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 5px;
padding: 3px;
overflow:hidden;
height:100%;
}
#mapWrapper {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
overflow: hidden;
padding: 10px;
}
#map {
display: inline-block;
position: relative;
}
#map img {
height: 100%;
}
I want the image to take the rest of the height, that is free in the map-div. Currenty the image is set to 100% and that is why it runs out of the box at the bottom. Can someone help? Thanks!
Why not use a display:table setup, the advantage of this is that you can add as much content as you want to the first 'row' and the image will take up the remaining space (whatever is left from the table height minus the first row of content) and scale accordingly.
Demo Fiddle
HTML
<div class='table'>
<div class='row'>
<div class='cell'>
<h1>Campus</h1>
<p>Description Campus Map.</p>
</div>
</div>
<div class='row'>
<div class='cell'></div>
</div>
</div>
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
.table {
display:table;
table-layout:fixed;
height:624px;
width:100%;
max-height:624px;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
}
.row:first-of-type >.cell {
height:1%;
}
.row:last-of-type >.cell {
height:100%;
background-image:url(http://www.gettyimages.co.uk/CMS/StaticContent/1357941082241_new_banner-700x465.jpg);
background-size:contain;
background-repeat:no-repeat;
background-position:center center;
}
We're building an application to run on both desktop and mobile, so we're making our site as dynamic as we can.
In the new design, we've got a full width, fixed top, fixed-height header, followed by a max-width header, fixed position header, max-width footer bottom-fixed, and a center scrollable area to fill up the rest of the vertical space.
I've got the headers and footers fixed and seemingly working right, but the center body isn't filling the center space.
Here's the code and fiddle I've been working in: http://jsfiddle.net/chazthetic/KE5cX/2/
<div id="top">
<div style="float:left;color:white;">a<br /></div>
<div style="float:right;color:white;">a<br /></div>
</div>
<div id="sub">
<div id="mid">
<div id="inside">
<div id="insideHeader">
<div style="float:left;color:white;">a<br /></div>
<div style="float:right;color:white;">a<br /></div>
</div>
<div id="insideInner">
<div id="div" style="float:left;color:white;">a
<div id="div" style="float:right;color:white;">1
</div>
</div>
<div id="bot">
<div style="float:left;color:white;">a<br /></div>
<div style="float:right;color:white;">a<br /></div>
</div>
</div>
</div>
And the accompanying CSS:
* {
margin: 0;
}
html, body {
margin: 0;
}
#top {
height: 100px;
width: 100%;
background: #f00;
z-index: 5;
margin:0px;
padding:0px;
position:fixed;
top:0px;
}
#sub {
position:relative;
width: 100%;
margin:100px 0 0;
height:100%;
}
#mid {
background: #222;
width:100%;
max-width:400px;
height:100%;
margin:0 auto;
}
#push {
height: 150px;
}
#inside {
width:100%;
height:100%;
padding:0 0 0 0;
margin:50px 0 50px;
overflow:auto;
}
#insideHeader {
height:50px;
background: #0ff;
width:100%;
margin:100px auto 0;
top:0px;
position:fixed;
max-width:400px;
}
#insideInner {
height:100%;
width:100%;
display:table;
overflow:auto;
}
#inside #div {
height: 50px;
width: 50px;
background: #888;
border: 1px solid #fff;
}
#bot {
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
max-width: 400px;
background: #0ff;
z-index: 2;
margin:0px auto;
left:auto;
right:auto;
}
Am I missing something to make the inside div work right? Is this solution even possible?
I figured it out!
Turns out it is possible and I was missing height:100%; on the body tag.
Once I added that, the center area filled up the space and voila, it scrolled! I also needed to add a bit of padding to the insideInner div (thanks #alireza) so the header didn't overlay any of it.
I have this HTML:
<div id="cont">
<div class="chatarea">
<div class="row">
<div class="message">
<div class="nick">
<p>Some Nick</p>
</div>
<p>Some Message</p>
<div class="timestamp"><p>Some Timestamp</p></div>
</div>
</div>
</div>
</div>
and this CSS:
#cont {
width:100%;
text-align:center;
}
.chatarea
{
display: table;
height : 100%;
padding-top:50px;
margin:0px;
width:80%;
}
.nick
{
width: 400px;
border-right-style: solid;
text-align: center;
height:100%; position:absolute; top:0; left:0;
}
.timestamp
{
width: 400px;
border-left-style: solid;
position:absolute; top:0; right:0; height:100%;
}
.message
{
border-style: solid;
padding:0 50px 0 140px;
overflow:hidden;
position:relative;
}
im trying to display 3 divs (left and right smaller than the centre one) in the centre of the page. 80% of the browser width.
i have made a fiddle here: http://jsfiddle.net/zQ9pu/
im having a bit of trouble with it - what would be the best way to do this?
Just add
.chatarea
{
display: table;
height : 100%;
padding-top:50px;
margin:0px auto;
width:80%;
}
It works fine !! here is ur new fiddle http://jsfiddle.net/zQ9pu/2/
Contain those divs in a parent block level element which has a specified width and then apply CSS margin-left: auto; margin-right: auto; on it.