I am making a navbar for my website. I have a div in which I want to have the logo and, aligned to the far right, a download button. I am using the CSS property 'justify-content' and 'space-between' to align the button to the right. However, when I add padding to the left side of the div, the button is pushed off the page.
Here is my code:
body, html {
margin: 0;
background-color: #000000;
}
#header {
padding-top: 10px;
padding-bottom: 10px;
height: 30px;
position: fixed;
background-color: rgb(10, 98, 160, .5);
width: 100%;
border-bottom: 1px solid #808080;
display: flex;
justify-content: space-between;
padding-left: 20px;
}
<div id="header">
<img src="titanium_tsp.png" height="100%">
<button>Download</button>
</div>
You said that the header is 100% of the width, but with the default box-sizing of content-box, that means that content of the header is 100% of the width, which disregards the padding. Change the box-sizing to border-box so that padding is taken into consideration as well:
#header {
box-sizing: border-box;
. . .
}
You can add a margin-right to your button to make sure you negate the padding.
body, html {
margin: 0;
background-color: #000000;
}
#header {
padding-top: 10px;
padding-bottom: 10px;
height: 30px;
position: fixed;
background-color: rgb(10, 98, 160, .5);
width: 100%;
border-bottom: 1px solid #808080;
display: flex;
justify-content: space-between;
padding-left: 20px;
}
#header button {
margin-right: 20px;
}
<div id="header">
<img src="titanium_tsp.png" height="100%">
<button>Download</button>
</div>
Related
Here is a wrapper div with 450 px. If I set the height to 100vh, then the bottom margin of the title should adapt to the viewport.
.title,
.subtitle {
border: 1px solid #000;
}
.wrapper {
display: flex;
flex-direction: column;
width: 16%;
height: 450px;
margin-right: 42%;
margin-left: 42%;
border: 1px solid #000;
}
.title {
margin-bottom: 1rem;
}
<div class="wrapper">
<div class="title">Title</div>
<div class="subtitle">Subtitle</div>
</div>
https://codepen.io/anon/pen/ZNoZVm
Summary: The margins of the elements in wrapper should remain in proportion to the viewport.
I don't 100% understand (I know, I shouldn't be answering if I don't understand) but could it be that you're trying to say that you'd like the height of the wrapper to be the height of the viewport (screen height).
If that's the case then you're doing everything right, except...
On default the body has a margin of 8px. You simply have to remove that and you will get the result you're looking for.
body {
margin: 0;
}
/* =================== */
.title,
.subtitle {
border: 1px solid #000;
}
.wrapper {
display: flex;
flex-direction: column;
width: 16%;
height: 100vh;
margin-right: 42%;
margin-left: 42%;
border: 1px solid #000;
}
.title {
margin-bottom: 1rem;
}
<div class="wrapper">
<div class="title">Title</div>
<div class="subtitle">Subtitle</div>
</div>
(If you're wandering why you're still able to scroll, it's because "border" adds to the height (and width) so if your border-bottom is 3px and your height like 10px, you have an overall height of 13px)
I need your help. Does anyone know a way of making a Parent's Div height size relative to its child divs.
If I define an auto height to the DIV #layout then the div resizes to 100% of my page window. However, If I define the height on the #layout div then I need to account for every pixel used on the screen in order to keep my border nice and clean around the layout div. How can I make the height on the #layout div box re-size to its contents?
Below is picture of the problem. As you can see the #box6 breaks the #layout div.
Maybe I am missing something that I have overlooked but I am not sure where to begin.
Here is the HTML and CSS in question:
* {
font-family: Segoe UI;
font-size: 9pt;
}
html,
body {
padding: 0;
margin: 0;
}
body {
background: rgb(187, 195, 203);
}
.Absolute-Center {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#layout {
width: 900px;
height: 400px;
border: 1px solid rgb(112, 112, 112);
}
#box1 {
background: rgb(141, 155, 169);
color: #FFF;
padding: 3px;
font-weight: bold;
}
#box2 {
width: 100%;
background: rgb(240, 240, 240);
border-bottom: 1px solid rgb(180, 180, 180);
padding: 4px;
box-sizing: border-box;
}
#box3 {
width: 100%;
border-bottom: 1px solid rgb(180, 180, 180);
}
#box4 {
background: #FFF;
float: left;
width: 175px;
height: 375px;
border-right: 1px solid rgb(180, 180, 180);
}
#box5 {
background: rgb(240, 240, 240);
height: 375px;
}
#box6 {
width: 100%;
height: 100px;
background: blue;
}
#leftcolumn {
float: left;
}
#rightcolumn {
border: 0;
padding: 3px;
text-align: center;
}
.clear {
clear: both;
}
<div id="layout" class="Absolute-Center">
<div id="box1">Application Title</div>
<div id="box2">
<div id="leftcolumn"></div>
<div id="rightcolumn">Some text in here later</div>
<div class="clear"></div>
</div>
<div id="box3">
<!-- LEFT WINDOW PANE -->
<div id="box4">
<ul>
<li data-show="#1">File Information</li>
<li data-show="#2">Comments</li>
</ul>
</div>
<!-- RIGHT WINDOW PANE -->
<div id="box5"></div>
</div>
<div id="box6"></div>
</div>
instead of positioning with absolute, change it to margin: auto with a set width, that way the height will be dependent on the elements inside and the border will adjust with the container. See fiddle https://jsfiddle.net/z5hf5qwf/
CSS
.Absolute-Center {
margin: auto;
}
#layout {
width: 900px;
margin-top: 5%;
margin-bottom: 5%;
background-color: red;
border: 1px solid red;
}
I have a page where I have a div at the bottom of the page which when clicked shows another div, just above the bottom div.
I'd like to avoid the footer divs overlapping the content div higher up the page when the window is resized.
The heights of the divs involved shouldn't change.
Is a CSS-only solution possible?
I've created a jsfiddle here
CSS
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#container {
height: 100%;
width: 100%;
background-color: white;
border: solid #aaa 1px;
padding: 4px;
}
#content {
height: 300px;
border: solid blue 1px;
}
#footer-content {
height: 100px;
border: solid red 1px;
display:none;
}
#footer-footer {
cursor: pointer;
height: 20px;
border: solid cyan 1px;
}
#footer.expanded #footer-content {
display:block;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
HTML
<div id="container">
<div id="content">content
</div>
<div id="footer">
<div id="footer-content">footer-content</div>
<div id="footer-footer">Click me to expand</div>
</div>
</div>
JS
$("#footer-footer").on("click", function (evt) {
$("#footer").toggleClass("expanded");
});
Simply add position: relative to the #container. This way the absolute positioning of the footer refers to the container.
http://jsfiddle.net/5bkznxud/5/
You'll probably notice that in the example above there's always a scrollbar on the right. This is because of the borders and padding on #container. Here's an example with outline (border with no calculated width) and without any padding:
http://jsfiddle.net/5bkznxud/6/
TIP: Always use outline instead of border for blocking a layout OR use box-sizing: border-box. This causes a box' dimensions to also calculate for the border. Otherwise a box with width of 100% and border will span slightly wider than you want.
It can be solved by using calc().
In this case you can create a jQuery function that get the height of footer-content and footer-footer -> .height(). Without jQuery, I don't think it's possible.
Here is an example:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#container {
height: 100%;
width: 100%;
background-color: white;
border: solid #aaa 1px;
padding: 4px;
min-height: 420px;
}
#content {
height:calc(100% - 135px);
border: solid blue 1px;
}
#footer-content {
height: 100px;
border: solid red 1px;
display:none;
}
#footer-footer {
cursor: pointer;
height: 20px;
border: solid cyan 1px;
}
#footer.expanded #footer-content {
display:block;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
http://jsfiddle.net/dokmngv0/
Browser support for the calc() feature: http://caniuse.com/#feat=calc
I have a header element in a header div but for some reason i can't seem to add any bottom margin or padding to it. Margin/padding top, left, and right work find however. is there a reason for this? here is my code.
html
<div id="Container">
<div id="Header">
<h1>My Webpage</h1>
</div>
</div>
css
#Container {
position: relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
/----------------------------------------/
#Header {
position: absolute;
height: 15%;
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;
}
#Header h1 {
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
/*background-color: red;*/
}
I would avoid using position styling like that; it tends to interfere with the way block elements interact with each other. Based on the styles and markup provided, I don't see a reason why padding/margin would not be working; however your example doesn't actually show any padding/margin applied, so it's hard to say what might be going wrong.
I would alter your styling thusly:
#Container {
width: 96%;
margin-left: auto;
margin-right: auto;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
#Header {
height: 15%; /* This should really be a static number, not a percentage*/
width: 100%;
border-bottom: 2px solid #e8e2e2;
margin-bottom: 20px; /* This will push elements below your header div down by 20 px*/
}
Try to add pading to header tag's self. Because it is relative to other containers.
#Container {
position:relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
#Header {
position:relative;
height: 15%;
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;
}
#Header h1 {
position:relative;
padding-top:20px;
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
/*background-color: red;*/
}
<div id="Container">
<div id="Header">
<h1>My Webpage</h1>
</div>
</div>
Firstly, please add #for Container as in #Container in css.
Below is the code where I have added margin bottom for h1. Please let me know if you still have any troubles.
<html>
<head>
<style type="text/css">
#Container {
position: relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
#Header {
position: absolute;
height: 15%;
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;
}
#Header h1 {
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
border:1px solid red;
margin-bottom:10px;
}
</style>
</head>
<body>
<div id="Container">
<div id="Header">
<h1>My Webpage</h1>
<p>some text here</p>
</div>
</div>
</body>
</html>
Hope this helps.
Thanks
Padding-bottom and margin-bottom does actually work, it's just that it's not visible because you're currently setting the height of #Header to 15% and then giving it that light grey bottom border. This is what gives the illusion that padding-bottom or margin-bottom doesn't work.
See working version here http://codepen.io/sajadtorkamani/pen/zxxzgo
HTML
<div id="Container">
<div id="Header">
<h1>My Webpage</h1>
</div>
</div>
CSS
Container {
position: relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
#Header {
position: absolute;
/* height: 15%; */
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;
}
#Header h1 {
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
padding-bottom: 20px;
/*background-color: red;*/
}
Just commenting out height: 15% for #Header solves the issue.
I've just been introduced to the Zurb Foundation 4 framework via a friend of mine. Interesting stuff. But i'm having a problem I can't seem to understand. I have a site based on 4 rows (header, navbar, content, footer);
<div class="row siteBase">
<div class="row siteHeader" id="siteHeader">
<div class="large-12 c7olumns">
<h2>Welcome to Foundation</h2>
<p>This is version 4.1.2.</p>
</div>
</div>
<div class="row siteNavbar" id="siteNavbar">
navbar
</div>
<div class="row siteBody" id="siteBody">
base
</div>
<div class="row siteFooter" id="siteFooter">
footer
</div>
</div>
here's my CSS
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.siteBack {
background-color: #545454;
}
.siteBase {
/*base size and color*/
width: 1280px;
min-height: 100%;
margin: 0 auto;
background-color: #f2f2f2;
/* exact fit the contents to the border */
padding-left:15px;
padding-right:15px;
/* border size and color */
border-style: solid;
border-left-width: 4px;
border-top-width: 0px;
border-right-width: 4px;
border-bottom-width: 0px;
border-color: #7da500;
/* add some shadows to the borders */
-moz-box-shadow: 0 0 10px 5px #272727;
-webkit-box-shadow: 0 0 10px 5px #272727;
box-shadow: 0 0 10px 5px #272727;
}
.siteHeader
{
width: 100%;
height: 250px;
background-color: #7da500;
}
.siteNavbar
{
height: 50px;
background-color: #1d1d1d;
}
.siteBody
{
min-height: 100% auto;
margin: 0 auto;
background-color: #f2f2f2;
}
.siteFooter
{
height: 50px;
background-color: #7da500;
}
The problem I have is that the sitebody div isn't stretched to to full 100%. The header and navbar is fixed size, as is the footer. But I wan't the sitebody div to take the remaining space so that the footer is always placed in the lower bottom of the screen (at minimum).
What am I missing here? Thanks a lot for your help.
Basically what you need is to stick your footer to the bottom of the page. In that manner you will have a full body even if your main content is small. You can take a look at this SO question to see how it is implemented. There could be a lot going on in there as that layout is a bit complex. So I did a sample for you that you can use for a more simple layout. Here is the modified css from the other SO question.
html, body, #wrapper{ height: 100%; }
body > #wrapper{height: auto; min-height: 100%;}
#main { padding-bottom: 75px; /* same height as the footer */
overflow:hidden;
top: 75px; bottom: 0; left: 0; right: 0;
background-color:yellow;
}
#footer {
position: relative;
margin-top: -75px; /* negative value of footer height */
height: 75px;
clear:both;
}
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}