I have the page as the showed picture
When something is clicked on the right column, the DIV on the left column will appear with generated content. This Div has a fixed height but its position may vary depending on the clicked position on the right column. As you can see when the Div appears, the footer is not pushed down.
I have tried many solutions on SO to re-position the footer as in How to keep footer at the bottom even with dynamic height website
but none of them works for me. Maybe I have done something wrong?
My footer's css:
#footer{ color: #666666; background: #D3D3D3; border-top: 1px solid #AAA;
padding: 1em; margin-top: 0; position:absolute; width:100%; }
DEMO : http://jsfiddle.net/WTUPn/
<div id="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div class="push"></div>
</div>
<div id="footer">
</div>
<style type="text/css">
body, html { height: 100%; }
#wrapper {
min-height: 100%;
margin-bottom: -90px;
position: relative;
}
#footer, .push { height: 90px; }
#footer {
background: #000; color: #FFF;
}
</style>
apparently you'll need to insert more code but your footer cannot be positioned absolutely as it takes a specific position irrespective of other divs
Related
I have a similar problem as described here:
Center page vertically, make it scroll if bigger than screen
however I'm trying to find a pure CSS only solution, not involving JS.
I have a fixed containers defined like that:
.parent{
position: fixed;
z-index: 100;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}
.child{
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(50%);
margin: 0 auto;
width: 600px;
}
It's well centered (as expected) when child is smaller than parent/viewport height. The problem is when child's height is greater then parent's height. Let's say parent has height 1000 px and child's height is 1600 px.
With above styles applied, I can scroll child (as expected) but not all the way to its top. The top of child is hidden and not possible to scroll to it.
What I want to achieve is to be able to scroll the child all the way to its top border.
The main question is if it's possible to achieve that with CSS only?
.parent {
display: flex; /* Use this proparty */
align-items: center; /* For Center align */
justify-content: center; /* For Center align */
overflow: auto; /* For auto scroll */
padding: 20px; /* This is only for spacing */
}
.child {
border: 1px solid red;
margin: 0 auto;
max-width: 560px; /* Use max-width instant of width in responsive it's help you for better view */
max-height: 100%; /* Use max-height instant of heiht in responsive it's tack auto height from text/content */
}
<!-- Parent Div start Here -->
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<!-- Parent Div ends Here -->
I have two divs side by side inside a wrapper div. In the left column, there is an image with a title above. In the right column, there is a number of links. The links div has some top padding to align text of first link with image in left column. But when screen size changes, the image title over the image inside left column breaks into two lines. When this happens the text on right div is not aligned with the image anymore. I'm lost here as I'm trying to solve this with css. Any ideas?
What I want is to align text in right div with image in left div no matter how many lines it takes to print the tile.
.wrapper
{
width: 90%;
margin: auto;
background: #fff;
display:flex;
}
.col1
{
width: 48%;
background: #ccc;
float: left;
overflow: hidden;
}
img.col1 {
width: 100%;
height: auto;
}
.col2
{
width: 49%;
margin-left: 1em;
background: #000;
float: right;
color:white;
}
.text
{
padding-top: 59px;
}
.yellow {
color: #ccc;
font-weight: 600;
clear:both;
font-family: arial;
}
<div class="main">
<div class="wrapper">
<div class="col1"><h4>Lorem ipsum dolor sit amet consect</h4><img src="https://www.elnuevocojo.com/modules/mod_news_pro_gk4/cache/k2.items.cache.633464537f5b069fc4760ed3327b136c_Lnewspro1.jpg">
</div>
<div class="col2">
<div class="text">
<span class="yellow">This text is aligned with image, but when viewport gets smaller and image title takes two lines, text is not aligned anymore.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>
Well if you cannot change the HTML structure one solution would be:
Add a <h4> with the same content to the col2 with the same content as the one from col1. I don;t know if that is feasible for you. Let me know and i can find another solution ( hopefully )
Also, do not use float just take advantage of flexbox
See below
.wrapper {
width: 90%;
margin: auto;
background: #fff;
display: flex;
}
.col1 {
background: #ccc;
overflow: hidden;
}
img.col1 {
width: 100%;
height: auto;
}
.col {
flex: 0 0 calc(50% - 0.5em);
}
.col2 {
background: #000;
color: white;
margin-left: 1em;
}
.col2 h4 {
visibility:hidden;
}
.text {
}
.yellow {
color: #ccc;
font-weight: 600;
clear: both;
font-family: arial;
}
<div class="main">
<div class="wrapper">
<div class="col1 col">
<h4>Lorem ipsum dolor sit amet consect</h4><img src="https://www.elnuevocojo.com/modules/mod_news_pro_gk4/cache/k2.items.cache.633464537f5b069fc4760ed3327b136c_Lnewspro1.jpg">
</div>
<div class="col2 col">
<div class="text">
<h4>Lorem ipsum dolor sit amet consect</h4>
<span class="yellow">This text is aligned with image, but when viewport gets smaller and image title takes two lines, text is not aligned anymore.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>
I'm having trouble getting the following three-column layout to work:
A B C
+-------+-----------+-------------------------+
| | | |
| Fixed | Fixed | Expands to fill width |
| | | |
+-------+-----------+-------------------------+
Where:
A is fixed width.
B is a fixed width.
C contains content which I'd like to fill up the remaining space on the page. The page itself which has a resizable width
I've found numerous solutions where the center column is fluid, but I'm having trouble getting the right column to be the fluid width with the left and middle column having fixed width without having the right column line break when it expands larger. The content in the right column is mostly text while the left and middle columns are images.
Here's a fiddle I've been using for testing which has everything setup: http://jsfiddle.net/7y7Lmvr9/2/
You can ditch the floats and use display:table-cell instead:
$('#div_right').click(function () {
$(this).append('-------');
});
#div_left {
display:table-cell;
border:1px solid #F00;
width: 100px;
}
#div_middle {
display:table-cell;
border:1px solid #0F0;
width: 100px;
}
#div_right {
display:table-cell;
border:1px solid #00F;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='div_left'>Fixed width</div>
<div id='div_middle'>Fixed Width</div>
<div id='div_right'>Variable-width (click to widen). Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
display:table has been said, so i ll only say flex:)
body {
display:flex;
}
body>div {
border:solid;
width:100px;
}
#div_right {
flex:1;
width:auto;
}
<div id='div_left'>
Fixed width
</div>
<div id='div_middle'>
Fixed Width
</div>
<div id='div_right'>
Variable-width (click to widen). Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
CSS calc() could be one of the solutions.
Demo - http://jsfiddle.net/7y7Lmvr9/3/
#div_left, #div_middle, #div_right {
border: 1px solid red;
box-sizing: border-box;
float:left;
}
#div_left, #div_middle {
width: 100px;
}
#div_right {
width: calc(100% - 200px);
}
Bowser compatibility - http://caniuse.com/#feat=calc
I recommend wrapping the three divs in another div, and setting the wrapper display to "flex." That way you can set the first two divs' width, and set the third to fill the remaining space.
http://jsfiddle.net/6LgkjpwL/
fiddle with flex implemented on wrapper.
A great resource on flex--
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
body{
font-weight:bold;
}
#wrapper{
display:flex;
flex-direction: row;
}
#div_left{
order: 1;
overflow: hidden;
border:1px solid #F00;
width: 100px
}
#div_middle {
order: 2;
overflow: hidden;
border:1px solid #0F0;
width: 100px
}
#div_right {
order:3;
flex:1;
border:1px solid #00F;
}
<div style="width:100%; overflow:hidden">
<div id='div_left'>
Fixed width
</div>
<div id='div_middle'>
Fixed Width
</div>
<div id='div_right'>
Variable-width (click to widen). Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
body{
font-weight:bold;
}
#div_left{
float:left;
overflow: hidden;
border:1px solid #F00;
width: 9%
}
#div_middle {
float:left;
overflow: hidden;
border:1px solid #0F0;
width: 9%
}
#div_right {
float:left;
border:1px solid #00F;
width: 79%
}
Is there elegant solution to hover only for top element, not for underlying; or i should to do this using javascript?
<div class="WithHover1">
<div class="WithHover2">
I am Top and I want to be the only div hightlighted
</div>
I want to be hightlighted too, but I dont want to be hightlighted when the nested one is
</div>
You can't do this in just CSS, yet. The has selector is in draft for level 4/5 (I forget) CSS selectors, which will be awesome.
For now, javascript/jquery would be the easiest and most practical method.
$(".WithHover2").mouseover(function() {
$(".WithHover1").removeClass("highlight");
$(this).addClass("highlight");
});
Here's a CSS3 solution, using the ::after pseudo-element, with a bottom border that overrides the background color of the bottom text.
The negative z-index prevents the border from covering up the text, and overflow: hidden prevents WithHover1 from expanding due to the large border.
It works in IE11 (at least), Chrome, Firefox, Safari, and Opera:
div.WithHover1 {
font: 14px verdana;
position: relative;
overflow: hidden;
}
div.WithHover1:hover {
background: yellow;
position: relative;
z-index: 1;
}
div.WithHover2:hover {
background: orange;
}
div.WithHover2:hover::after {
content: '';
display: block;
position: absolute;
border-bottom: 1000px solid white;
width: 100%;
z-index: -1;
}
<div class="WithHover1">
<div class="WithHover2">
I am Top and I want to be the only div highlighted
</div>
I want to be highlighted too, but I dont want to be highlighted when the nested one is.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
This isn't what you want? Your post wasn't that clear to me what you needed when hovering over each.
.WithHover2:hover, .WithHover3:hover {
background-color: yellow;
}
<div class="WithHover1">
<div class="WithHover2">
I want to be the only div hightlighted
</div>
<div class="WithHover3">
I dont want to be hightlighted when the nested one is
</div>
</div>
Code is here: http://lasers.org.ru/vs/example.html
How to remove an empty space under main block (#page)?
Another trick which worked fine for me is to use a negative margin-bottom in the relative element that you have moved. No need to go with absolute positioning.
Something like:
position: relative;
top: -200px;
left: 100px;
margin-bottom: -200px;
Similar (if not identical) to the solution I see now, from green.
Well, don't use relative positioning then. The element still takes up space where it originally was when using relative positioning, and you can't get rid of that. You can for example use absolute positioning instead, or make the elements float beside each other.
I played around with the layout a bit, and I suggest that you change these three rules to:
#layout { width: 636px; margin: 0 auto; }
#menu { position: absolute; width: 160px; margin-left: 160px; }
#page { width: 600px; padding: 8px 16px; border: 2px solid #404241; }
#page
{
overflow:hidden;
}
Try this rule:
#page {
border: 2px solid #404241;
bottom: 0;
padding: 8px 16px;
position: absolute;
top: 70px;
width: 600px;
}
I changed position to absolute, this allows you to use the bottom: 0 property.
#page {
padding-bottom: 0;
}
I was able to get rid of the whitespaces using the following framework:
And here is the markup
<div id="the-force-moved-element>I've been moved</div>
<div id="the-hack-part-1">
<div id="the-hack-part-2>The quick brown fox jumps over the lazy dog</div>
</div>
<p>Lorem ipsum dolor sit amet...</p>
My answer is late but it may help others with a similar issue that I had.
I had a <div> with position: relative; where all the child elements have the position: absolute; style. This caused around 20px of white space to appear on my page.
To get around this I added margin-top: -20px; to the next sibling element after the <div> with position: relative;.
If you have a sibling element before, you can use margin-bottom: -20px;
section {
height: 200px;
}
<h2>Extra Whitespace</h2>
<section>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div style="position:relative;">
<div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
</div>
<div>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</section>
<h2>No Whitespace margin-top</h2>
<section>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div style="position:relative;">
<div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
</div>
<div style="margin-top:-20px;">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</section>
<h2>No Whitespace margin-bottom</h2>
<section>
<div style="margin-bottom:-20px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div style="position:relative;">
<div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
</div>
<div>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</section>
The best solution if you don't want to leave spaces below (relative)
Is to use margin-top and position: sticky
#page {
margin-top: -280px;
position: sticky;
}
A negative margin value usually does the trick.
container {
position: relative;
top: -100px;
marginBottom: -100px;
}
Wherever the space appears (top, bottom, left, right)
Just give a negative margin value on the element that was positioned relatively.
I had a similar problem. The easiest way is to replace top on margin-top for #page.
I had the same issue. Negative margin didn't work for me as it left a massive white area where it used to be. I solved this problem in my case by manually entering height.
.maincontent {
height: 675px;
}
This question seems to be well answered - however all the answers above had bad side effects in my layout. This is what really worked for me:
.moveUp {
position: relative;
}
.moveUp > * {
position: absolute;
width: 100%;
top: -75px;
}
/** This part is just design - ignore it ... ****/
.box1, .box2, .box3 {
height: 100px;
color: white;
}
.box1 {
background: red;
}
.box2 {
background: blue;
height: 50px;
}
.box3 {
background: green;
}
<div class="box1">Box 1</div>
<div class="moveUp"><div class="box2">Box 2 - 75px up</div></div>
<div class="box3">Box 3</div>
just add the marginBottom to the element equal to space that you moved relatively.
// you moved top:-120px
// then add marginBottom:-120px