my problem is that I am trying to center a div inside my full-width header like this:
</body>
<!-- the CSS -->
#header {
margin-top: -1em;
margin-left: -1em;
height: 2.95em;
padding:15px 0;
min-width:150%;
background-color: #F4F6F7;
border: 1px solid #E1E1E1;
}
#insideHeader {
border: 1px solid black;
width: 20em;
height: 2.6em;
margin: 0 auto;
}
The result of this code is in the here.
Thanks in advance.
min-width:100%; seem to centre your div...
body {
background-color: red;
margin: 0;
}
#header {
margin: 0;
height: 2.95em;
padding:15px 0;
min-width:100%;
background-color: #F4F6F7;
border: 1px solid #E1E1E1;
}
#insideHeader {
border: 1px solid black;
width: 20em;
height: 2.6em;
margin: 0 auto;
}
<body>
<div id="header">
<div id="insideHeader"></div>
</div>
</body>
or
http://jsfiddle.net/x1b7zpy4/1/
As my understanding you are trying to fit the outer box in the window and center align the inner box.
Add/Update following styles
html, body {
margin: 0;
padding: 0;
}
#header {
margin-top: -1em;
height: 2.95em;
padding:15px 0;
width:100%;
background-color: #F4F6F7;
border: 1px solid #E1E1E1;
}
There are default padding/margin of browser. You need to override those in order to fit your outer box.
Once you do that, you need to remove your negative left margins which were put in order to make box stick to the boundary of window.
Then set the width to 100%.
For reference - http://jsbin.com/lomeganori/1/edit?html,css,output
give
#header
{
box-sizing: border-box;
//and remove height:2.5rem;
}
box-sizing:borderbox will removes all your troubles, and dont give height to parent
that will automatically take the height of the inner div
Related
In this example, which I'm trying to understand, definitely overflow happens, but it doesn't work. why?
body, html, p {
margin: 0;
padding: 0;
}
html{
background-color: #666;
}
body{
margin: 0 auto;
width: 780px;
background-color: #99ccff;
padding: 10px;
overflow: hidden;
}
div{
background-color: #b57c12;
padding: 10px;
border: 1px solid black;
width: 820px;
}
p{
background-color: #f7f0b7;
border: 1px solid whitesmoke;
}
HTML: Inside Body Tag
Emmet: div>p>lorem10
Body should always cover 100% of the width. I would suggest you set a inner wrapper instead that you use overflow hidden on.
https://jsfiddle.net/jjxurtpk/
html
<div class="wrapper">
<div>
test
</div>
</div>
css
.wrapper{
width:400px;
overflow:hidden;
background:#eee;
padding:20px;
}
.wrapper div{
width:500px;
background:#ddd;
padding:10px;
}
update: https://jsfiddle.net/jjxurtpk/1/
I believe the overflow hidden does not fully apply unless the background (html) does not have overflow hidden. I'm not sure why. It could just be thats how browsers simply render the body tag.
See this fiddle
You will have to add overflow:hidden to html too ..
See the below CSS
body,
html,
p {
margin: 0;
padding: 0;
}
html {
background-color: #666;
overflow:hidden; /* <---------------add this----------*/
}
body {
margin: 0 auto;
width: 780px;
background-color: #99ccff;
padding: 10px;
overflow: hidden;
}
div {
background-color: #b57c12;
padding: 10px;
border: 1px solid black;
width: 820px;
}
p {
background-color: #f7f0b7;
border: 1px solid whitesmoke;
}
You need to set a height on the body, and apply overflow: hidden to the html.
See demo here
html{
overflow: hidden;
}
body{
height: auto;
}
Here is my code taken from the codepen: http://codepen.io/rags4developer/pen/ONoBpm
Please help me to fix these problems.
How do I prevent the the main div & footer from spilling out of the container div ? overflow: hidden for container will not always work !
How do I make the container div height equal to page height without setting its height to a fixed percentage ?
HTML:
<body>
<div id="container">
<div id="nav">nav links 1,2,3 etc</div>
<div id="main">
<!--no text here-->
<div id="left">left panel</div>
<div id="right">right panel</div>
</div>
<div id="footer">footer</div>
</div>
</body>
CSS:
* {box-sizing: border-box;}
html {height: 100%;}
body {height: 100%;}
#container {
border: 8px solid yellow;
height: 100%;
width: 80%;
margin: 0 auto;
}
#nav {
border: 4px solid red;
height: 15%;
}
#main {
border: 4px solid black;
height: 100%;
background: gray;
}
#left {
border-top: 4px solid green;
border-left: 4px solid green;
border-bottom: 4px solid green;
float: left;
width: 15%;
height:100%;
/*I will make this gradient later*/
background: #9e9999;
}
#right {
border: 4px solid blue;
float: right;
width: 85%;
height: 100%;
border-radius: 20px 0 0 0;
background: white;
}
#footer {
border: 4px solid pink;
clear: both;
}
I am not completely sure if I understand you correctly, but your heights (i.e. the heights within the #container div) add up to 15% + 100% + the height of the footer = at least 115% of the #container height plus the footer height, which causes the "spilling over".
I changed the #content height to 80% and added height: 5%; to the footer in this fork of your codepen: http://codepen.io/anon/pen/EKeOdm
Now everything remains within the #container. Is this what you want?
The clearfix solution still works well for floated elements, IMO. Try removing the height styles and add this:
#main:before,
#main:after {
display: table;
content: "";
}
#main:after {
clear: both;
}
Further: http://nicolasgallagher.com/micro-clearfix-hack/
Using display table should fix this.
#container {
border: 8px solid yellow;
height: 100%;
width: 80%;
margin: 0 auto;
**display: table;**
}
#content {
border: 4px solid black;
background: gray;
height: 100%;/*Not sure 100% of what ? Parent ???*/
**display: table-row;**
}
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 want to make this <hr> so it will stretch the full width, right to the edges of its parent container. I have tried adding margin-left/padding-right to overcome this but it keeps changing when resizing (responsive).
.single-article .article-container-inner {
background: #f0eded;
border: 1px solid #c9c7c7;
padding: 20px;
margin-bottom: 20px;
}
.single-article hr {
margin-top: 30px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #c9c7c7;
width:100%
}
<div class="article-container single-article">
<div class="article-container-inner">
<hr>
</div>
</div>
(also at http://jsfiddle.net/bh2f6/1/)
Is there a better solution for this?
Edit: I can't edit the parent container's padding as that is needed for bunch of other elements.
Your width:100%; on the <hr /> and the padding on the parent were messing things up. The <hr /> naturally stretches across the screen and doesn't need width:100%, so remove it. Then to compensate for the padding, just add the same negative margin to the <hr />.
Change your CSS to this:
.single-article hr {
margin: 30px -20px 20px;
border: 0;
border-top: 1px solid #c9c7c7;
}
See working jsFiddle demo
Something like this might work...
hr {
padding: 50px 0;
border: none;
&:before {
// full-width divider
content: "";
display: block;
position: absolute;
right: 0;
max-width: 100%;
width: 100%;
border: 1px solid grey;
}
}
http://codepen.io/achisholm/pen/ZWNwmG
HR Secret things, you must know.
When your horizontal rule (hr) leaves 15px from left and right, probably when you use with bootstrap.
<hr class="my-hr-line">
.my-hr-line {
position: relative;
left: -15px;
width: calc(100% + 30px);
height: 2px;
border: 2px solid blue;
}
Hope it will help many one.
Removing Padding should work for you
Working Example
.single-article .article-container-inner {
background: #f0eded;
border: 1px solid #c9c7c7;
margin-bottom: 20px;
}
.single-article hr {
margin-top: 30px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #c9c7c7;
width:100%
}
You mean like this?
Fiddle
just change the padding to padding: 20px 0;
I'm having issues getting my content box to extend to encompass everything within it. shouldnt max-height:100% do this?
http://codepen.io/anon/pen/xujAC
There's the codepen of my code. The red and blue background are for visual reference only.
Shouldnt the blue background (.container) only extend 20px below the blocks?
Pretty new at this and learning as I go. I'm probably missing something easy.
Thanks a lot.
You have the height of your .container set to 100%. In this sample, it will be as tall as its containing element. Because its top is set to 80px and its height is that of its parent, it will extend below the bottom by ~ 80px.
Other things that throw this off are:
floated elements are outside the regular flow which means the containing element can't calculate the height of its children. In this case, I think the simplest fix would be to use position: inline-block; for the children.
The child elements banner and container are absolutely positioned. This also take them outside the flow of the document. In this example, I believe you can get the results you are looking for using relative positioning.
Margins are also throwing off the layout. Here you can using padding in #content to achieve better results.
Demo fiddle
Updated CSS:
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
header {
width: 100%;
height: 60px;
background-color: #dcdcdc;
position: relative;
}
#content {
position:relative;
margin: 0 auto;
width: 960px;
min-height: 500px;
max-height: 100%;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
box-shadow: 0px 2px 2px #111;
background-color: red;
padding: 20px;
padding-top: 0;
}
#banner {
width: 900px;
position: relative;
margin: 0 auto;
padding: 0;
text-align: center;
border-top: 1px solid #888;
border-bottom: 1px solid #888;
top: 15px;
left: 30px;
height: 100px;
box-shadow: 0 2px 0 #ddd;
}
#banner h2 {
color: #555;
text-shadow: 0 -1px 0 #000;
}
.container {
margin: 0 auto;
padding: 0;
position: relative;
background-color: blue;
}
.blocks {
display: inline-block;
width: 250px;
height: 150px;
background-color: #666;
margin: 25px;
margin-top: 30px;
}