How To Add Bottom Border When Overflow Is Hidden?
I'm using the margin-bottom: -10000px; padding-bottom: 10000px; trick/hack to have divs fill their parent container while keeping everything % based. The only problem, the overflow hides the bottom border.
jsFiddle
http://jsfiddle.net/CSS_Apprentice/0Lkxw1je/1/
I'm trying to use :after to add the bottom border, but no matter what I do to the :after selector (position: absolute, overflow: visible), I can't get the border to show
body {
width: 100%
}
.container {
margin: 0 auto;
text-align: center;
overflow: hidden;
}
.box {
display: inline-block;
width: 25%;
height: 100%;
border: 3px solid black;
padding: 2%;
vertical-align: top;
margin-bottom: -10000px;
padding-bottom: 10000px;
}
.box:after {
border-bottom: 3px solid black;
content: '';
}
Try This updated css, with display: table; & display:table-row:-
body {
width: 100%;
display: table;
}
.container {
margin: 0 auto;
text-align: center;
overflow: hidden;
display: table-row;
}
.box {
display: inline-block;
width: 25%;
height: 100%;
border: 3px solid black;
padding: 2%;
vertical-align: top;
display: table-cell;
}
.box:after {
border-bottom: 3px solid black;
content: '';
}
.remainder {
height: 100%;
}
h1 {
background-color: #fff;
border: 3px solid black;
}
/* Colors */
.blue {
background-color: blue;
}
.green{
background-color: green;
}
.yellow{
background-color: yellow;
}
.red{
background-color: red;
}
What worked for me was to create an outer div with a border and without overflow:hidden. The outer box will have the border and the content of the inner will be overflow.
Related
This question already has answers here:
CSS technique for a horizontal line with words in the middle
(34 answers)
Closed 3 years ago.
I have the following HTML and CSS:
body {
text-align: center;
}
div {
border: 1px solid black;
margin: 0 auto;
width: 200px;
}
p {
border: 1px solid red;
line-height: 0.5;
margin: 20px;
text-align: center;
}
span {
display: inline-block;
position: relative;
}
span:before,
span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid black;
top: 0;
width: 100%;
}
span:before {
right: 100%;
margin-right: 20px;
}
span:after {
left: 100%;
margin-left: 20px;
}
<div>
<p class="strike"><span>Phrase</span></p>
</div>
I added a line on left and right of text but with 2 problems:
The line gets outside of the P border;
The P does not fill the entire width off the container DIV.
How can I solve these problems?
I've left your original CSS in but commented much of it out. FlexBox is a good way to achieve what you want (as opposed to position: absolute and position: relative:
/*body {
text-align: center;
}*/
div {
border: 1px solid black;
margin: 0 auto;
width: 200px;
}
p {
border: 1px solid red;
/*line-height: 0.5;*/
/*margin: 20px;*/
/*text-align: center;*/
}
span {
display: flex;
/*position: relative;*/
/*width: 100%;*/
align-items: center;
}
span:before,
span:after {
content: "";
/*position: absolute;*/
/*height: 5px;*/
border-bottom: 1px solid black;
/*top: 0;*/
width: 100%;
}
span:before {
/*right: 100%;*/
margin-right: 20px;
}
span:after {
/*left: 100%;*/
margin-left: 20px;
}
<div>
<p class="strike"><span>Phrase</span></p>
</div>
use left:0; and right:0 to make sure the lines stay within the borders
The margins you have on the p is what's stopping it from filling the entire width of the container.
Also the span is not really needed.
body {
text-align: center;
}
div {
border: 1px solid black;
margin: 0 auto;
width: 200px;
}
p {
border: 1px solid red;
line-height: 0.5;
/* margin: 20px; to span full width*/
text-align: center;
position: relative;
}
p:before,
p:after {
content: "";
position: absolute;
height: 1px;
background:black;
top: 50%;
transform:translateY(-50%);
width: 20%;
}
p:before {
left: 0;
}
p:after {
right: 0;
}
<div>
<p class="strike">Phrase</p>
</div>
I have been using display: table for my html along with display: table-cell for my body lately, to make all of the contents of my page appear at the very center of the screen. While, this works with paragraphs, headings, inputs and labels etc.(as far as I have tested at least), it doesn't seem to work with div elements.
Is there any way to make this work for div elements like it does for the other ones? Pure CSS solution would be best.
Example (also on Codepen)
html {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
body {
display: table-cell;
vertical-align: middle;
}
.hidden {
display: none;
}
.leaf {
border-radius: 15px 2px 15px 2px;
border: 1px solid green;
background-color: green;
width: 250px;
height: 80px;
}
<div class="leaf">Why am I not centered?</div>
<p>And why am I centered?</p>
Just add margin: 0 auto;.. Working right.
html {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
body {
display: table-cell;
vertical-align: middle;
}
.hidden {
display: none;
}
.leaf {
border-radius: 15px 2px 15px 2px;
border: 1px solid green;
background-color: green;
width: 250px;
height: 80px;
margin:0 auto;
}
<div class="leaf">Why am I not centered?</div>
<p>And why am I centered?</p>
Just add margin: 0 auto; to .leaf class.
html {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
body {
display: table-cell;
vertical-align: middle;
}
.hidden {
display: none;
}
.leaf {
margin: 0 auto;
border-radius: 15px 2px 15px 2px;
border: 1px solid green;
background-color: green;
width: 250px;
height: 80px;
}
<div class="leaf">Why am I not centered?</div>
<p>And why am I centered?</p>
Yes now i've got the grid outertcontainer fixed but somehow its not expanding 100%.
Please tell me where am i doing it wrong.
i am giving the emitted css.
if you see it in full screen you can see the outer container div is still not 100%.
Thanks.
Here is the
FIDDLE
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
body {
margin: 0;
padding: 0; }
img {
max-width: 100%; }
.bordered {
border: 1px solid black; }
.redbordered {
border: 1px solid red; }
.greenbordered {
border: 1px solid green; }
.outerContainer {
max-width: 68em;
margin-left: auto;
margin-right: auto;
min-height: 300px;
width: auto;
margin-left: 133px;
background-color: crimson; }
.outerContainer:after {
content: "";
display: table;
clear: both; }
.outerContainer .leftSide {
float: left;
display: block;
margin-right: 0%;
width: 50%;
background-color: blue;
min-height: 200px; }
.outerContainer .leftSide:last-child {
margin-right: 0; }
.leftNav {
height: 100%;
width: 133px;
background-color: black;
position: fixed;
left: 0px; }
Of course, position:fixed is exactly for that purpose, to have the element fixed in that position, overlapping everything below it. To have a regular 2 columns layout with no overlapping, just try this (there are many ways to do it, this is just one using CSS without changing your HTML)
body {
margin: 0;
padding: 0;
display:block;
min-height:100%;
}
.leftNav {
height: 100%;
width: 10%;
background-color: black;
display:inline-block;
opacity: 0.7;
}
.rightContainer {
background-color:silver;
min-height: 300px;
display:inline-block;
}
.fluid {
width: 89%;
}
jsFiddle
remove width 100% in fluid and make rightContainer as width auto and margin-left 100px
.rightContainer
{
background-color:silver;
min-height: 300px;
width:auto;
margin-left:100px;
}
What my CSS structure consists of is, basically, a container,which contains the background and side borders.. Within this container, I inserted my div elements(header,navigation, sidemenus..) On the bottom of that, I included my footer(which is in no importance now). My problem is, that I can't really adjust the height of the container.. I want it to be automatically as much as the longest div element inside it(the center column usually). The picture below represents all of this with fixed height of 400px.
http://tinypic.com/view.php?pic=2qnw8pv&s=8#.U5nZAyhqNuB
Here is the CSS code:
The container:
#pagewidth{
position: relative;
width: 1000px;
text-align:left;
margin: 0 auto;
height: 400px;
border-top: 1px solid #354350;
border-left: 1px solid #354350;
border-right: 1px solid #354350;
background-color:#0f0f0f;
}
The header:
#header {
position: relative;
float: left;
height:150px;
width: 100%;
display: block;
background-image:url('images/logo2.png');
/*border-bottom: 1px solid #354350; */
}
Columns structure:
#columns {
width: 100%;
position: relative;
}
#leftmenu {
position: relative;
width: 17%;
float: left;
}
#twocols {
position: relative;
width: 81%;
float: right;
}
#centercol {
position: relative;
width: 67%;
float: left;
}
#rightmenu {
position: relative;
width: 20%;
float:right;
}
and finally, the footer:
#footer{
height: 30px;
clear: both;
position: relative;
display: block;
overflow: auto;
background-color: #F8F4F4;
width: 100%;
border-top: 2px solid #E8E8E8;
}
P.S - I haven't added the navigation and table-like designed columns because I thought they had no relevance in the matter.
Just remove the height attribute. Like so
#pagewidth{
position: relative;
width: 1000px;
text-align:left;
margin: 0 auto;
border-top: 1px solid #354350;
border-left: 1px solid #354350;
border-right: 1px solid #354350;
background-color:#0f0f0f;
}
And ad a class for example called clearfix to your HTML.
<div id="pagewidth" class="clearfix">
Then add this to your CSS
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
More information about this and crashing floats here
http://jsfiddle.net/myxzh/6/
ul {
display: table;
table-layout: fixed;
width: 100%;
padding:0;
position: absolute;
top: -10px;
}
li {
display: table-cell;
height: 150px;
border: 1px solid black;
text-align: center;
vertical-align: bottom;
}
#con {
width: 100%;
border: 1px solid red;
height: 200px;
overflow: hidden;
}
#logo {
width: 80%;
height: 100px;
margin: 10px auto;
border: 1px solid yellow;
z-index: 1;
}
<div id="con">
<div id="logo">
</div>
<div id="list">
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
</div>
</div>
I have this code and I am trying to make it where the list elements take up 100% of the red div box. Right now, the list goes outside of the red div which is not what I am trying to do. How do i make the black div(list items) fill up 100% of the red div and not go outside the red div?
If you want the black div to take up 100% of the height and width of the red div, change your CSS to:
ul {
display: table;
table-layout: fixed;
width: 100%;
padding:0;
position: absolute;
margin:0;
bottom:0;
height:100%;
}
li {
display: table-cell;
height: 150px;
border: 1px solid black;
text-align: center;
vertical-align: bottom;
}
#con {
width: 100%;
border: 1px solid red;
height: 200px;
overflow: hidden;
position:relative;
}
#logo {
width: 80%;
height: 100px;
margin: 10px auto;
border: 1px solid yellow;
z-index: 1;
}
jsFiddle example
I added position:relative; to your #con div since your absolute positioned ul element is positioned relative to it's first positioned ancestor, which in your example was the body, but you needed it to be #con. Then I made a few small changes to your ul's CSS rules so that it would take up all the space of the red div.
I changed your mark up a bit, there is no need for the div #list, that why ul exists.
This is the css
#con {
width: 100%;
border: 1px solid red;
height: 200px;
overflow: hidden;
position: relative;
}
#logo {
width: 80%;
height: 100px;
margin: 10px auto;
border: 1px solid yellow;
z-index: 1;
}
#list {
width: 100%;
list-style: none;
position: absolute;
top: 0px;
margin: 0;
padding: 0;
}
li {
float: left;
width: 33.1%;
height: 200px;
border: 1px solid black;
text-align: center;
vertical-align: bottom;
}
Is this good enough?
http://jsfiddle.net/myxzh/11/
A working fiddle --> http://jsfiddle.net/2VvTu/
You needed to set your container element to position: relative; and float your table cells left.
the box sizing property calculates borders and margins as part of the width (rather than default of adding them on on top of the width) --> you'll need to vendor prefix this as appropriate. More about that here --> http://paulirish.com/2012/box-sizing-border-box-ftw/
li {
-webkit-box-sizing: border-box;
display: inline-block;
height: 150px;
margin: 0;
padding: 0;
text-align: center;
width: 33.33%;
float: left;
border: thin purple dashed;
}