I have tried many things but I still haven't found a decent solution.
Whilst desiging a webpage, I'm using this lay-out (lay-out using different full length colored stripes in the background as sections):
<body>
<div id="wrap_banner" class="bg_banner">
<div id="wrapcentering_banner">
<p>Here comes banner</p>
</div>
</div>
<div id="wrap_middle" class="bg_middle">
<div id="wrapcentering_middle">
<p>text</p>
</div>
</div>
<div id="wrap_footer" class="bg_footer">
<div id="wrapcentering_footer">
<table width="879" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="text_webmade">
<p>
Company</p></td>
</tr>
</table>
</div>
</div>
</body>
CSS contains following:
#wrap_banner, #wrap_middle, #wrap_footer {
position: relative;
height: auto;
}
#wrapcentering_footer {
position: relative;
width: 1000px;
left: 50%;
margin-left: -500px;
height: 100%;
top: 0px;
}
#wrapcentering_middle{
position: relative;
width: 1000px;
left: 50%;
margin-left: -500px;
height: auto;
top: 0px;
}
#wrapcentering_banner {
position: relative;
width: 1000px;
left: 50%;
margin-left: -500px;
height: 200px;
top: 0px;
}
.bg_middle, .bg_footer, .bg_banner {
width: 100%;
position: relative;
background-color:#FFF
}
PROBLEM:
Any div I'm putting in the wrapcentering_banner containing an automatic height is NOT pushing the footer div down. Depending on the Z-index, it's putting the content either behind the footer div er on top of the footer div, but it never pushes the div's.
I tried to put some relative divs in one container div ( inside the wrapcentering div ) using automatic heights and float lefts, but still nothing is pushing the divs down. Offcourse absolute divs are not working either.
The only solution I have to get the content shown is giving the wrapcentering div a specific height and making sure the contents is made for that height. Or I have to use a table in wrapcentering div. Tables pushes the footer divs down.
Since I'm not a big fan of tables, is there a way to push these divs down?
Thanks.
You can try giving automatic heights and floats to the wrapcentering_banner div and clearing the float for the footer div. This will make sure the footer div does not float along with the upper divs and will position it below the other divs.
Related
I want to make two images part of a background div, one at the top and the other at the bottom but the bottom image keeps extending my div height and width.
This image is what I am trying to recreate:
I have both background patterns saved and I want to position one at the top left and the other at the bottom right without altering my div's width or height
I've tried using positions and even margins but it keeps extending my div
.body {
position: absolute;
margin-top: 0;
background-color: #1799A7;
width: 100%;
height: 720px;
}
.bg-top {
position: absolute;
margin-top: -400px;
margin-left: -400px;
}
.bg-bottom {
position: absolute;
margin-top: 400px;
margin-left: 600px;
}
<div class="body">
<div class="bg-top">
<img src="images/bg-pattern-top.svg" alt="">
</div>
<div class="bg-bottom">
<img src="images/bg-pattern-bottom.svg" alt="">
</div>
</div>
Check this: https://codepen.io/marceloag/details/DbqYwy
An almost identical template is solved in this codepen.
This example also includes JavaScript, which you can omit:
$(document).ready(
function iniciar(){
$('.follow').on("click", function(){
$('.follow').css('background-color','#34CF7A');
$('.follow').html('<div class="icon-ok"></div> Following');
});
}
);
I have an image I want to have come out of the website from the left and right side. See the image for what I have so far.
I managed to get it to work by giving the div the image on the left is in a position absolute and a left of -30px, but when I do the opposite for the image on the right (aka position:absolute and right:-30px), the image doesn't get cut off like it does on the right side.
Instead, the page get wider to have space for the image on the right. I have no idea as to how to get this to work and I also don't really know how to word this issue and my searches have come up barely anything to do with what I'm trying to find.
Below the HTML for both sides:
<div class="imgdecalleft">
<img src="images/img/patroon.svg" alt="patroon">
</div>
</div>
<div class="imgdecalright">
<img src="images/img/patroon.svg" alt="patroon">
</div>
And the subsequent CSS:
.imgdecalleft {
width: 15%;
position: absolute;
left: -30px;
}
.imgdecalright {
width: 15%;
position: absolute;
right: -30px;
}
Add this:
body {
overflow-x: hidden;
}
Here is an alternate approach that relies on setting the image width to the width of the container div and then offsetting the image inside the container. Using overflow in this case only effects these divs and their images.
This should still allow the page to be scrollable horizontally on narrow screens.
.imgdecalleft {
width: 30%;
position: absolute;
left: 0px;
overflow: hidden;
}
.imgdecalleft img {
width: 100%;
position: relative;
left: -50%;
}
.imgdecalright {
width: 30%;
position: absolute;
right: 0px;
overflow: hidden;
}
.imgdecalright img {
width: 100%;
position: relative;
left: 50%;
}
<div class="imgdecalleft">
<img src="https://cdn.pixabay.com/photo/2012/03/01/15/47/abstract-20445_960_720.jpg" alt="patroon">
</div>
</div>
<div class="imgdecalright">
<img src="https://cdn.pixabay.com/photo/2012/03/01/15/47/abstract-20445_960_720.jpg" alt="patroon">
</div>
I have variable-height content in a fixed position div. In my case, it's a table, which gets rows added to it. I need it lined it up at the bottom of the div, which I accomplished by making the content position absolute bottom 0.
<div id="outer">
<div id="inner">
<table border="1">
<tr>
<td>BlahBlahBlah</td>
</tr>
<!-- Add more rows here. -->
</table>
</div>
</div>
#outer {
position: absolute;
top: 16px;
left: 64px;
right: 64px;
bottom: 128px;
padding-bottom: 16px;
background: #EEEEEE;
}
#inner {
position: absolute;
top: 0px;
left: 32px;
right: 32px;
bottom: 16px;
overflow-y: auto;
}
table {
width: 100%;
/**
This aligns content to the bottom,
but there's never a scrollbar.*/
position: absolute;
bottom: 0;
}
http://jsfiddle.net/2g1kLd5g/
If I add content, it remains lined up at the bottom, however eventually the content becomes taller than the div. In this case, the new content overflows past the top of the div and can't be seen.
http://jsfiddle.net/rs7ewqdu/
Therefore, I would like a scrollbar so the user can scroll up to see the hidden content. If I remove the absolute positioning and leave the overflow-y auto on the parent div, then I have a scrollbar, however it then always starts at the top position and must be scrolled down every time the page is loaded.
http://jsfiddle.net/oncqwq9o/
That could (not ideally) be solved with a JavaScript auto-scroll. However, the real issue here is that if I make the content shorter, it now no longer lines up at the bottom of the div.
http://jsfiddle.net/1wnqbgbo/
#inner {
position: absolute;
top: 0px;
left: 32px;
right: 32px;
bottom: 16px;
overflow-y: auto;
vertical-align: bottom;
display: table-cell;
}
Vertical-align doesn't appear to have any effect and I tried display:table-cell and display:block. The only way I have found to get the alignment I want is with position absolute, and when I do that there is no scrollbar.
Does anyone know how I can get the bottom of the content to line up with the bottom of the div by default, and have a scrollbar to handle the overflow? I would prefer a pure CSS solution if one exists.
So I want to include a side legend that need so remain fixed on the screen. The problem is that I need it to position it relative to another element, in this case a table. I did put it on the right side but if I do it my way if I move to a larger screen it moves all to way to the edge of the screen which is annoying
<div style="position:relative;min-width:960px; max-width:1000px">
<img src="img/untitled.png" style="position: fixed; right:0;" />
</div>
<table align="center" cellpadding="0" style="width: 800px; background-color: #E8E8E8;">
<tr>
<td>
</td>
<tr>
</table>
Your best bet for this is to hack around how a fix element works, by fixed positioning a container, and then absolutely positioning the element you want to be relative to the table.
Set you fixed element to have the same width as your table width. Something like:
HTML
<div id="fixedElemContainer">
<div id="innerElem"></div>
</div>
CSS
#fixedElemContainer{
height:1px; /* make this 0 if you like, its really just so it doesnt cover the page content*/
top:0;
width: 100%;
max-width:960px;
position:fixed;
right:0; /* by setting both this will move the element to the middle when we have a max-width*/
left:0;
}
#fixedElemContainer #innerElement{
position:absolute;
right:0;
top:0;
}
If I understood you right u want to hava a two tiled Screeen, on one side the navigation and on the other the tabel/content/whatever? Then I would work with %.
Step 1:
Create one DIV around all other elements:
<div id="allContent">...</div>
Step 2:
Create a Style section in your header - thats mutch cleaner:
<head>.. <style>[css]</style></head>
Step 3:
Write tell the contDiv that it's the full size of the window (in the CSS section [CSS]):
#allContent{ position: absolute; top: 0px; left: 0px; width:100%; height: 100% }
Step 4:
Create 2 DIV's in the #allCont DIV which will be the left and the right side:
<div id="left"></div> <div id="right"></div>
Css:
#left{ position: absolute; top: 0px; left: 0px; width: 20%; height: 100% }
#right{ position: absolute; top: 0px; left: 0px; width: 80%; height: 100% }
now throw ur stuff in there..
EDIT:
For make the left side / navigation scroll with set the position of the left to fixed:
#left{ position: fixed; top: 0px; left: 0px; width: 20%; height: 100%}
now the left side / navigation will scroll with and the right will stay at position.
Is there a way of making a DIV expand to fill the space left in it's parent container without having to use Javascript to calculate the necessary heights?
<div class="parent" style="height: 100%">
<div class="child-top">
</div>
<div class="child-bottom" style="position: relative;">
</div>
</div>
.parent is a sidebar that takes up the whole screen, .child-top height may vary depending on the content, and I would like .child-bottom to just take up the rest of the space with position relative so that I can correctly position other elements inside.
UPDATE: I can't use fixed heights in any of the elements. .child-top for obvious reasons, and .child-bottom will have an element with a scrollbar when its height outgrows the parent.
If you're just looking to fill it up, you can use overflow:hidden on the parent to fake it. This comes with some caveats. Anything within the child bottom with a height greater than the child will be hidden, so take it as you will.
http://jsfiddle.net/hBLQR/
Your HTML:
<div class="parent">
<div class="child-top">
Hi there
</div>
<div class="child-bottom">
Hi back
</div>
</div>
And the CSS:
.parent {
position: absolute;
left: 0;
right: 200px;
top: 0;
bottom: 0;
overflow: hidden;
}
.child-top {
background: green;
height: 100px;
width: 200px;
}
.child-bottom {
background: red;
height: 100%;
width: 200px;
}