This question already has answers here:
Why does my header moves down when I set it fixed?
(1 answer)
Why aren't my absolutely/fixed-positioned elements located where I expect?
(3 answers)
Closed 2 years ago.
body {
background-color:whitesmoke
}
.fixed {
background-color:gray;
position: fixed;
}
<body>
<div class="fixed">
<h1>header data</h1>
</div>
<div style="margin-top: 60px;">
<h1>hello how are you</h1>
</div>
</body>
I have this code inside my body and first div inside the body which has fixed position but it starts by giving the margin 60 from the top which is given in the second div. As the fixed position always takes position with respect to document, then why it is taking the margin of the second div.
Just specify the position of the fixeddiv, if not it get (wrongly) inferred.
Adding top: 0 will set the fixed div to the top of the screen.
<div style=" position: fixed; background-color: aqua; top: 0;">
<h1 >header data</h1>
</div>
<div style="background-color: aliceblue;">
<div style="margin-top: 60px;">
<h1>hello how are you</h1>
</div>
</div>
Edit
As stated in documentation (bold added):
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none [...]
And as CBroe pointed out, for margin collapsing:
If there is no border, padding, inline content, height, or min-height to separate a block's margin-top from its margin-bottom, then its top and bottom margins collapse.
You can see the difference between this two snippets: the first creates a non-empty, 1px block that contains the fixed element, while the other creates an empty block, causing margins to collapse.
<div style="display: block; height: 1px;">
<div style=" position: fixed; background-color: aqua;">
<h1 >header data</h1>
</div>
</div>
<div style="margin-top: 60px; background-color: aliceblue;">
<h1>hello how are you</h1>
</div>
Another solution will be to use padding instead of margin, in order to avoid the collpasing to trigger:
<div style="display: block; height: 0px;">
<div style=" position: fixed; background-color: aqua;">
<h1 >header data</h1>
</div>
</div>
<div style="margin-top: 60px; background-color: aliceblue;">
<h1>hello how are you</h1>
</div>
<div style=" position: fixed; background-color: aqua;">
<h1 >header data</h1>
</div>
<div style=" padding-top: 60px;">
<div style="background-color: aliceblue;">
<h1>hello how are you</h1>
</div>
</div>
Related
I need to have a div (divParent) which needs to have 2 other divs (divContainer, divButtons) where the divButton will display at the very bottom of the DivParent and the divContainer will use the entire remaining space of the divParent up to the divButton, but it cannot overlap the divButtons and if the content of the divContainer is too big, I need the vertical scrollbar to be displayed.
I've got the following more or less working but the divContainer seems to be overlapping the divButtons and it does not display the vertical scrollbar if the content is too big, even when I specify overflow: auto or overflow-y: auto.
<div id="divParent" style="width: 100%; height: 100%; background-color: red; position: relative">
<div id="divContainer" style="overflow-y:auto;">
<table id="fields">
<large content goes here>
</table>
</div>
<div id="divButtons" style="width: 100%; background-color: blue; position: absolute; bottom: 0">
<div style="float:right;">
<table>
<tr>
<td style="padding: 2px">
<div id="submitbutton">test1</div>
</td>
<td style="padding: 2px">
<div id="cancelbutton">test2</div>
</td>
</tr>
</table>
</div>
</div>
</div>
If I specify "max-height:100px" on the divContainer to test, it does exactly what I need where the vertical scrollbar is displayed but it's clearly no longer stretched all the way to the divButton.
Note that the divParent is then used in a third-party popup window.
Any suggestions?
Thanks.
I eventually figured it out, but credit to #Brad for his answer in:
from How do I make a div stretch in a flexbox of dynamic height?
I had to rejig a few things but eventually got there and my divs are defined as follows now:
<div id='divParent' style='display: flex;
flex-direction: column; height: 100%; width: 100%;'>
<div id='divContainer' style='width: 100%; flex-grow:1;
overflow: auto'>
<div id='divButtons' style='width: 100%; height: 40px;
margin-top: 5px'>
That'it!
Install bootstrap and you will have great control of div placements. Bootstrap creates 12 columns for each row:
<div class="row">
<div class="col-md-7" align="right">
<div class="row">
</div>
<div class="row">
</div>
</div>
<div class="col-md-3" align="left">
</div>
<div class="col-md-2" style="padding-right:2%;">
</div>
</div>
I am having a problem with my footer. I am trying to force it to the bottom, but it always looks ugly.
Here is the code:
<div id="footer">
<div class="container">
<div class="row">
<h3 class="footertext">About Us:</h3>
<br>
<div class="col-md-4">
<center>
<img src="http://oi60.tinypic.com/w8lycl.jpg" class="img-circle" alt="the-brains">
<br>
<h4 class="footertext">Programmer</h4>
<p class="footertext">You can thank all the crazy programming here to this guy.<br>
</center>
</div>
<div class="col-md-4">
<center>
<img src="http://oi60.tinypic.com/2z7enpc.jpg" class="img-circle" alt="...">
<br>
<h4 class="footertext">Artist</h4>
<p class="footertext">All the images here are hand drawn by this man.<br>
</center>
</div>
<div class="col-md-4">
<center>
<img src="http://oi61.tinypic.com/307n6ux.jpg" class="img-circle" alt="...">
<br>
<h4 class="footertext">Designer</h4>
<p class="footertext">This pretty site and the copy it holds are all thanks to this guy.<br>
</center>
</div>
</div>
<div class="row">
</div>
</div>
I tried to use
<div class="footer navbar-fixed-bottom">
but in that case my text ,which is located over the footer, get overlapped by footer
Here is css I used:
#footer {
padding-top: 100px
position: absolute;
bottom: 0;
width: 100%;
/* Sets the fixed height of the footer here */
height: 280px;
background:
/* color overlay */
linear-gradient(
rgba(240, 212, 0, 0.45),
rgba(0, 0, 0, 0.45)
),
/* image to overlay */
url(222.png);
}
.footertext {
color: #ffffff;
}
Here is what I mean by ugly. I did try to set html and body height as 100% in css
Please show us what you mean by "looks ugly" so we can help you, because we can't really understand your issue.
I'd say the problem could be in what the parent of #footer div.
I think you only have to change position: absolute; to position: relative; or position: fixed; for the div to stay at the bottom (depending on what behaviour you exactly expect).
Side note, don't use the tag <center> because it's now deprecated, use CSS instead (text-align: center).
You are missing a semi-colon after padding-top: 100px . You can also try position:fixed instead of position:absolute. An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
Its <div class="footer navbar fixed-bottom">
not <div class="footer navbar-fixed-bottom">
you mistypes a -
I am going to make a website like this http://watcherboost.com/
SO i want to create middle menu for my website.so i need to create a div tag which is always top on following background:
This is the code i tried
<form id="form1" runat="server">
<div>
<div id="top" style="background-color:#072530; height: 30px;margin-top: -10px;margin-left:auto;margin-right:initial">
</div>
</div>
</form>
<div style="height: 300px;background-color: #0E5D7B; margin-top: 0px;">
</div>
<div style="background-color:#072530; height: 30px;margin-top: -10px;margin-left:auto;margin-right:initial">
</div>
<div style="height: 650px; background-color: #C2C2C2; margin-top: 0px;">
</div>
<div style="background-color:#072530; height: 30px;margin-top: -10px;margin-left:auto;margin-right:initial">
</div>
<div style="height: 300px;background-color: #0E5D7B; margin-top: 0px;">
</div>
<div style="background-color:#072530; height: 30px;margin-top: -10px;margin-left:auto;margin-right:initial">
</div>
<div id="middle" style="margin-left: 150px;margin-right:150px;margin-top:-250px;background-color:black"></div>
I want to get this last div (id =middle) to always top mode like upper website.
But unfortunately my div (id=middle) is not showed the page..
Please advice how to edit this code
Thanks
Your div is not showing up, because it doesn't contain any content. Add height property to its inline CSS.
If you want a div stay on top you should set:
position:fixed;
top:0px;
try this:
https://jsfiddle.net/TiG3R/ug4vvo48/
This is my css:
html{
position: relative;
height: 100%;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
min-height: 100%;
margin-bottom: 60px;
}
.container {
padding-top: 50px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
.footer p{
line-height: 60px;
}
.messages {
/*background-color: blue;*/
min-height: 100% !important;
height: 100% !important;
}
This is my markup (using blaze for template rendering):
<template name="messages">
<div class="container messages">
<div class="row">
<div class="col-md-3 conversations">
{{> message}}
</div>
<div class="col-md-9 conversation-holder">
<h1>John Doe</h1>
<div class="conversation">
</div>
</div>
</div>
</div>
</template>
This is my output:
What I want is that the line between the list of conversations and the title(John Doe( on the right) should be of 100% height and that any overflow should be scrollable.
I have set the min-height and height of the .messages container to be 100% with the !important but it does not work i do not know why.
How do I make it 100%? Thanks.
P.S: Here is the template after rendering:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="__blaze-root">
<nav class="navbar navbar-inverse navbar-fixed-top">
<!-- navbar stuff removed for better understanding-->
</nav>
<div class="container messages">
<div class="row">
<div class="col-md-3 conversations">
<a href="#">
<div class="message">
<div class="conversation-title">
<img class="pull-left img-circle" height="50px" src="/images/dummy-profile-pic.png" width="auto">
<p class="pull-left">John Doe</p>
</div>
</div></a>
</div>
<div class="col-md-9 conversation-holder">
<h1>John Doe</h1>
<div class="conversation"></div>
</div>
</div>
</div>
<footer class="footer">
<p class="text-muted">Place sticky footer content here.</p>
</footer>
</div>
</body>
</html>
Just realized that you are using bootstrap framework. You have to cascade the height from the parent div to the inner div till it reaches the .message element.
Otherwise, you can't set the height as 100%. (Any padding or margin in the intermediate div would introduce vertical scroll)
Fiddle that shows the 100% to 2 level down from the body tag.
http://jsfiddle.net/skelly/zrbgw/
Solution 2: You have to use position:absolute for .message
Solution 3: You can use position:fixed
But solution 2 & 3 will remove the elements out of the content flow resulting in need of setting a proper parent height.
I am making a responsive site for a mobile. The HTML should not be changed but the css should handle the positioning of the elements so as to not effect the main site.
BACKGROUND INFORMATION
The desktop site has a navigation bar set at the bottom of the screen with a contact number below it whilst the site title and logo is placed at the top. For the mobile this is unfeasable so I've put the navigation bar at the top of the screen alongside the title and logo. The number has remained at the bottom as desired. Between the top header and the contact number at the bottom, I have placed the bulk content area. The content is being displayed correctly by using the height:calc(100% - 336px) property to set the content wrapper 100% - the total height of the top header and the contact number. The content wrapper is then set absolute to a position top: 176px to meet the bottom of the top header. The content inside the content wrapper does not fit inside the wrapper so overflow-y:scroll is used to ensure that the user can scroll through the content area.
PROBLEM
The content area within the wrapper is not scrolling.
CODE
CSS
.PageContentBox {
top: 176px!important;
height: calc(100% - 336px);
z-index: 12;
width: 100%;
overflow-y: scroll;
left: 0px!important;
}
#content {
padding: 0;
height: 100%;
overflow-y: scroll; /*This here for testing purposes*/
}
HTML
<div class="PageContentBox">
<div id="content">
<div id="pages">
<div class="page" id="page0">
<h1>HEADER</h1>
<div class="grid grid-pad" style="padding: 0 0 0 0!important">
<div class="row" id="r1">
<div class="col-5-12">
<div class="content">
<img class="megaServiceImage" src="../template/img/gallery/mega/test.jpg" alt="??????" />
</div>
</div>
<div class="col-7-12">
<div class="content">
<h2>Applications</h2>
<p class="MegaServicesText">
DUMMY TEXT
</p>
</div>
</div>
</div>
<div class="row" id="r2">
<div class="col-5-12">
<div class="content">
<img class="megaServiceImage" src="../template/img/gallery/mega/test.jpg" alt="??????" />
</div>
</div>
<div class="col-7-12">
<div class="content">
<h2>Performance</h2>
<p class="MegaServicesText">
DUMMY TEXT
</p>
</div>
</div>
</div>
<div class="row" id="r3">
<div class="col-5-12">
<div class="content">
<img class="megaServiceImage" src="../template/img/gallery/mega/test.jpg" alt="??????" />
</div>
</div>
<div class="col-7-12">
<div class="content">
<h2>Specifications</h2>
<p class="MegaServicesText">
DUMMY TEXT
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You need to set position on your .PageContentBox: top: and z-index don't work unless you define position.
Here is you updated Fiddle with the position set to absolute.
In your question you save already given the solution just use that only.
You have specified that absolute but not used it in css. Just use it and it will work no need to put the #content css.
css should be like this:
.PageContentBox {
position: absolute;
top: 176px!important;
height: calc(100% - 336px);
z-index: 12;
width: 100%;
overflow-y: scroll;
left: 0px!important;
}
See the example
I am getting desktop and mobile view like this and I think its fine. What you say?