I'd like to know why my class .top does not work for my second DIV wrapper top? I would expect to have 200px between the bottom of the picture on the right and the top of the red DIV but it's not working. See JSFIddle
HTML
<div class="wrapper top">
<div class="block-1">
<p><span>ddfsfsdsfds</p>
<p>fdsfsdfs.</p>
<p>dfsdfdsfds.</p>
</div>
<div class="block-2"><img src="images/136147555-e1329752650296-287x300.jpg" alt="136147555-e1329752650296-287x300" width="287" height="300"></div>
</div><!-- End wrapper -->
<div class="wrapper top">
<div class="block-100pc">
block-100pc
</div>
</div>
CSS
body {
background: #F2F2F2;
}
.top {
margin-top: 200px;
}
.wrapper {
position: relative;
display: block;
margin-right: auto;
margin-left: auto;
width: 980px;
}
.block-1 {
float: left;
box-sizing: border-box;
padding: 20px;
width: 60%;
text-align: justify;
background-clip: border-box;
background: #fff;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.block-1 span {
color: #124191;
font-weight: bold;
}
.block-2 {
float: right;
overflow: hidden;
box-sizing: border-box;
width: 35%;
padding: 20px;
background-clip: border-box;
background: #fff;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
text-align: justify;
}
.block-100pc {
overflow: hidden;
box-sizing: border-box;
width: 100%;
padding: 20px;
background-clip: border-box;
background: #fff;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
text-align: justify;
clear: both;
background: red;
}
That is because of the floated elements. They do not "count into" the height of their container, unless they are cleared.
There are several clearing techniques you can use, for example setting overflow: hidden on the container:
.wrapper {
overflow: hidden;
}
jsFiddle Demo
.block-1 {
margin-top: 200px;
}
or
.top {
margin-bottom: 200px;
}
either one should work
The margin-top doesn't work in your case because the two block that are above it are floated. the margin-top property applies to the top of the parent.
In order to see a top margin, you will have to apply a margin-top= height of the hieghest floated div + the margin you want.
You have some broken code in your fiddle, I've updated it with some fixes. Another thing is that you are not taking into account your padding when you've set the width of block-1 and block-2, therefor they are overlapping. Fix your block-1 width down to a lower percent to allow for the padding on the blocks. Here is an updated fiddle: http://jsfiddle.net/pB5kq/5/
<div class="wrapper top">
<div class="block-1">
<p><span>ddfsfsdsfds</span></p>
<p>fdsfsdfs.</p>
<p>dfsdfdsfds.</p>
</div>
<div class="block-2">
<img src="images/136147555-e1329752650296-287x300.jpg" alt="136147555-e1329752650296-287x300" width="287" height="300"></img>
</div>
<div class="wrapper top">
<div class="block-100pc">
block-100pc
</div>
</div>
Along with the other answers regarding floating divs and clearing, this should help.
Related
I'm trying to add a little design flourish to some tabs.
The tabs are contained inside a tab bar, which has a bottom border.
When a tab is active I want it to appear as if it's on the same level of the content, with the other tabs appearing set back.
To do this, I need to make the section of border beneath the active tab disappear - my first thought was to set the tab background white and overlap the parent - but this doesn't work.
Anyone got any ideas as to how to get the effect I'm looking for?
.container {
padding: 30px;
}
.tab-bar {
display: flex;
background-color: #fff;
border-bottom: solid 1px rgba(0,0,0, .12);
height: 48px;
overflow: hidden;
}
.tab {
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: center;
height: 48px;
max-width: 200px;
min-width: 100px;
padding: 0 16px;
}
.tab[data-state="active"] {
box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 1px 0 rgba(0,0,0,0.12);
color: red;
}
<div class="container">
<div class="tab-bar">
<div class="tab" data-state="active">Active</div>
<div class="tab">Not Active</div>
</div>
</div>
Link to JsFiddle
from earlier comment
draw the bottom border from the non active tabs
add eventually a pseudo element to fill the room left.
overflow:hidden on the parent hides shadows and also do not allow children to stand on top of the border in order to hide it
What you could do :
.container {
padding: 30px;
}
.tab-bar {
display: flex;
background-color: #fff;
height: 48px;
}
.tab {
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: center;
max-width: 200px;
min-width: 100px;
padding: 0 16px;
border-bottom: solid 1px rgba(0, 0, 0, .12);
}
.tab-bar::after {
content: '';
flex: 1;
border-bottom: solid 1px rgba(0, 0, 0, .12);
}
.tab[data-state="active"] {
box-shadow: 0 -2px 4px -1px rgba(0, 0, 0, 0.2), 0 -4px 5px 0 rgba(0, 0, 0, 0.14), 0 -1px 1px 0 rgba(0, 0, 0, 0.12);
color: red;
border-bottom: none;
}
<div class="container">
<div class="tab-bar">
<div class="tab" data-state="active">Active</div>
<div class="tab">Not Active</div>
</div>
</div>
You should overflow: hidden from .tab-bar.
But after you remove it. It seems not to be as you wanted ("the same level of the content").
So I edited box-shadow of active tab. to make it with no box-shadowfrom button.
border-bottom: 1px solid white is responsible to override tab-bar border
See Full Example here:
.container {
padding: 30px;
}
.tab-bar {
display: flex;
background-color: #fff;
border-bottom: solid 1px rgba(0,0,0, .12);
height: 48px;
}
.tab {
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: center;
height: 48px;
max-width: 200px;
min-width: 100px;
padding: 0 16px;
}
.tab[data-state="active"] {
box-shadow: -4px -2px 4px -1px rgba(0,0,0,0.1), 4px -2px 4px -1px rgba(0,0,0,0.1);
color: red;
border-bottom: 1px solid white;
}
<div class="container">
<div class="tab-bar">
<div class="tab" data-state="active">Active</div>
<div class="tab">Not Active</div>
</div>
</div>
I want to put 2 divs next to each other centered, like described here. The problem is that it seems that my right div is always a bit under the left one when I put a <span> and a heading into the right div. Why does this happen and how can I avoid this?
#right {
display: inline-block;
width: 100px;
height: 160px;
padding: 15px;
background: rgba(0, 0, 0, .4);
border-radius: 1px;
box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}
#wrapper {
text-align: center;
padding: 40px;
height: 160px;
max-height: 160px;
}
#left {
display: inline-block;
width: 100px;
height: 160px;
padding: 15px;
background: rgba(0, 0, 0, .4);
border-radius: 1px;
box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}
<div align="center" id="wrapper">
<div id="left"></div>
<div id="right">
<span style="text-decoration: underline;">Heading</span>
<div id="some-content"></div>
</div>
</div>
Use vertical-align:top; on the #right and #left divs to get the wanted result
#right {
display: inline-block;
width: 100px;
height: 160px;
vertical-align:top;
padding: 15px;
background: rgba(0, 0, 0, .4);
border-radius: 1px;
box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}
#wrapper {
text-align: center;
padding: 40px;
height: 160px;
max-height: 160px;
}
#left {
display: inline-block;
vertical-align:top;
width: 100px;
height: 160px;
padding: 15px;
background: rgba(0, 0, 0, .4);
border-radius: 1px;
box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}
<div align="center" id="wrapper">
<div id="left"></div>
<div id="right">
<span style="text-decoration: underline;">Heading</span>
<div id="some-content"></div>
</div>
</div>
inline-blockelements are aligned according to the baseline of the included text. If there is no text, the bottom border will act as the baseline. In you example, the bottom border of the left DIV is aligned with the baseline of the text in the right div. If you erase the text (independently from the span tag), they are aligned. If there is text in both boxes, they will be aligned by their lowest text lines (see here: http://codepen.io/anon/pen/YqpJRg)
To align both boxes, use display: block and float: lefton the two DIVs, and for the wrapper position: relative; and margin:auto PLUS a fixed width (the sum of both DIV widths) to center it.
Here's a codepen of the result: http://codepen.io/anon/pen/mPOzaZ
Is there a way to realize the following kind of shadow with CSS only?
So far I only managed to draw the shadow around the complete box without the recess around the inactive tab:
The Code Here
HTML:
<div class="box">
<div class="tabs">
<span class="tab active">Bild</span>
<span class="tab">Text</span>
</div>
<div class="content"></div>
</div>
CSS:
.box {
width: 200px;
height: 250px;
box-shadow: 0 0 2.5px 2px rgba(0, 0, 0, 0.18);
margin: 16px;
}
.tabs {
height: 30px;
}
.tab {
display: inline-block;
width: calc(50% - 2px);
height: 30px;
text-align: center;
line-height: 30px;
}
.tab:not(.active) {
/* Should be removed in the final solution with correct shadows... */
background-color: rgba(0, 0, 0, 0.18);
}
The solution doesn't need to take care of legacy browsers (< IE 10).
Thanks
Use This CSS
.tab.active {
box-shadow: 0 -5px 2.5px 2px rgba(0, 0, 0, 0.18);
position: relative;
z-index: 99999;
}
.tab {
background: #fff none repeat scroll 0 0;
display: inline-block;
height: 30px;
line-height: 30px;
text-align: center;
width: calc(50% - 2px);
}
.content {
box-shadow: 0 0 2.5px 2px rgba(0, 0, 0, 0.18);
margin-top: 0;
min-height: 50px;
position: relative;
z-index: 999;
}
Edit Your CSS
.box {
- Remove this-
/*box-shadow: 0 0 2.5px 2px rgba(0, 0, 0, 0.18); */
height: 250px;
margin: 16px;
width: 200px;
}
I've this code :
span p {
margin: 0;
}
span {
background-color: red;
display: inline-block;
border-radius: 50%;
}
<span>
<p>25</p>
<p>08</p>
</span>
I want to make a perfect circle on my span. I try a border-radius: 50%; but it does not work.
Thanks for the help !
You can do this by giving the span a fixed width and height:
span p {
margin: 0;
}
span {
background-color: red;
display: inline-block;
border-radius: 50%;
width: 50px;
height: 50px;
text-align: center;
}
<span>
<p>25</p>
<p>08</p>
</span>
You need a predefined width and height on the span to be able to make it round.
span p {
margin: 0;
}
span {
background-color: red;
display: inline-block;
border-radius: 50%;
width:40px;
height:40px;
padding-left:10px;
box-sizing: border-box;
}
<span>
<p>25</p>
<p>08</p>
</span>
add line-height and width:
span {
background-color: #F00;
display: inline-block;
border-radius: 50%;
width: 50px;
line-height: 25px;
text-align: center;
}
Use this code.
HTML:
<span>
<p>25</p>
</span>
<span>
<p>08</p>
</span>
CSS:
span {
background-color: red;
display: inline-block;
border-radius: 50%;
width: 50px;
height: 50px;
text-align: center;
}
border-radius: 50% and padding
document.addEventListener('DOMContentLoaded', () => {
let el = document.querySelector('#wrapper .container');
setTimeout(() => (el.style.marginTop = '20px'), 500);
}, false);
#wrapper {
display: flex;
justify-content: center;
}
#wrapper .container {
display: flex;
flex-direction: column;
align-items: center;
padding: 6px 16px;
font-family: sans-serif;
font-size: 15px;
font-weight: 500;
border-radius: 50%;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
transition: margin-top 650ms ease-out, box-shadow 120ms, transform 120ms;
will-change: margin-top, box-shadow, transform;
user-select: none;
cursor: pointer;
}
#wrapper .container:hover:not(:active) {
box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.1),
0 2px 10px 0px rgba(0, 0, 0, 0.08),
0 0px 10px 0px rgba(0, 0, 0, 0.08);
}
#wrapper .container:active {
transform: scale(1.4) translateY(5px);
box-shadow: 0 9px 11px -5px rgba(0, 0, 0, 0.2),
0 18px 28px 2px rgba(0, 0,0 , 0.14),
0 7px 34px 6px rgba(0, 0, 0, 0.12);
}
<div id="wrapper">
<div class="container">
<span>10</span>
<span>3</span>
</div>
</div>
It looks like you incorrectly nested paragraph elements inside of span, which is against HTML5 spec, as span is being defined there as an element, which Content Model is described as Phrasing Content, and that:
Most elements that are categorized as Phrasing Content can only contain elements that are themselves categorized as phrasing content, not any flow content.
And because paragraph element doesn't belong to Phrasing Content list, you can use div instead of span for this purpose, only if you care to be semantically correct.
So coming back to your problem, it can be rewritten as so:
HTML:
<div>
<p>25</p>
<p>08</p>
</div>
CSS:
p {
margin: 0;
text-align:center;
}
div {
background-color: red;
display: inline-block;
border-radius: 50%;
width:50px;
height:50px;
line-height:25px;
}
Where general rule for achieving the circle by using border radius set to 50%, is that you need to make sure that content of such element has the same width and height. You can get that by fixing these values in your css.
Here is JsFiddle presenting that.
do you know why the text in my .block-left DIV goes outside the container .block? I would expect .block (which has no fixed height) to adapt its height based on what's in .block-left and .block-right. http://jsfiddle.net/9dUC9/ Thanks
.block {
padding: 20px;
text-align: justify;
background-clip: border-box;
box-sizing: border-box;
border: 1px solid #000;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.block-left {
float: left;
box-sizing: border-box;
overflow: hidden;
width: 50%;
}
.block-right {
float: right;
overflow: hidden;
box-sizing: border-box;
width: 50%;
}
<div class="block">
<div class="block-left">CENTRE DE kkjljljlj
<p>3, rue der</p>
<p>51 lmlm (klklkl)</p>
<ul id="contact">
<li>+3 691 123.456</li>
<li><a href="javascript:sendAnnotatedMailTo('contact','lmlml','lu','Contact via mlmlm.lu','')">contact#blolklkl.la>
</li>
<li> Plan d'accès
</li>
</ul>
</div>
<!-- End DIV block-left -->
<div class="block-right">hgh</div>
<!-- End DIV block-right -->
</div>
Try adding overflow: auto; to .block. FIDDLE
.block {
padding: 20px;
text-align: justify;
background-clip: border-box;
box-sizing: border-box;
border: 1px solid #000;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
overflow: auto; /* here */
}
Use clearfix
Is this what you want
http://jsfiddle.net/cancerian73/9dUC9/1/
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Or, if you don't require IE<8 support, the following is fine too:
.clearfix:after {
content: "";
display: table;
clear: both;}