I want to have 3 elements in line.. a round icon for the step number, the title and an optional icon on the far right, separated by a vertical line.
The issue is with the bottom border. Because the bottom border "enlarges" the element, there is a gap in the bottom of the border between the vertical border and the bottom border... (and in fact, in my production code, the border bottom on hover DOES line up with the border-bottom of the container, however, the vertical border still has a gap at the bottom equal to the thickness of the border-bottom of the icon-button.
See the fiddle below:
http://codepen.io/anon/pen/wdvVBX
HTML
<div class="step-container">
<h2 class="step-title">
<div class="round-icon">
3
</div>
<span class="title">Migration</span>
</h2>
<div class="icon-button">
<i class="fa fa-print"></i>
</div>
</div>
CSS
* { margin: 0; padding: 0;}
.step {
}
.step-container {
display: block;
box-sizing: border-box;
border-bottom: 1px solid #ddd;
}
.step-title {
display: inline-block;
padding: 2rem 0 2rem 2rem;
}
.round-icon {
display: inline-block;
background-color: black;
color: white;
width: 2rem;
height: 2reml;
line-height: 2rem;
font-size: 1rem;
border-radius: 50%;
text-align: center;
}
.title {
margin-left: 1rem;
display: inline-block;
vertical-align: middle;
}
.icon-button {
float: right;
padding: 2rem;
border-left: 1px solid #ddd;
font-size: 1.5rem;
height: 100%;
}
.icon-button:hover {
border-bottom: 4px solid black;
}
You can use an ::after pseudo element instead of border.
http://codepen.io/meecrobe/pen/pPoMZo
I resolved it like this: display flex on step-container and margin-left: auto for the icon-button with the height:100% and float:right removed
Related
In my nav, I am separating my section with some text and a horizontal line. For each section this repeats. I am doing this as shown below:
.navSectionHeader {
font-size: 1em;
color: #fff;
margin-left: 5px;
margin-bottom: 10px;
font-family: "Roboto";
font-weight: 700 !important;
border-bottom: 2px solid #6c6c6c;
}
/*.navSectionHeader::after {
content: ' ';
display: block;
border: 2px solid;
border-color: #6c6c6c;
margin-left: 0px !important;
}*/
The issue is, my text is now pretty much stuck to the left of the parent div. It should be with some margin to the left while keeping the bottom border start from 0px to the left. When I try to move it with margin-left: 5px; it ends up moving the border-bottom as well. I tried this with ::after as shown in the commented bit, adding !important to the end but nothing changes. Am I doing this the wrong way? Sorry, I'm a front-end noob!
Edit: The section header is in a <span> if it makes a difference.
Use padding instead of margin.
.navSectionHeader {
padding-left: 5px;
}
An example to see difference,
div {
display: inline-block;
width: 100px;
height: 20px;
border-bottom: 1px solid black;
background: red;
color: white;
}
.padding {
padding-left: 5px;
}
.margin {
margin-left: 5px;
}
<div class="margin">margin</div><br>
<div class="padding">padding</div>
In the following code when i specify margin-top for #thirdDiv, It doesn't work until i give it 36px.
What is the reason?
#Container {
border: 15px solid orange;
width: 350px;
}
#firstDiv {
display: inline-block;
border: 1px solid red;
font-size: 1em;
}
#secondDiv {
border: 1px solid green;
display: inline-block;
font-size: 2em;
}
#thirdDiv {
display: inline-block;
border: 1px solid pink;
font-size: 1em;
margin-top: 36px;
}
<div id="Container">
<div id="firstDiv"> a </div>
<div id="secondDiv"> b </div>
<div id="thirdDiv"> c </div>
</div>
Because the child elements of your Container element are based on the bottom of that div. If you add vertical-align: top to your child elements, any margin-top is possible. You can try it out in this CodePen where I copied you code and tidied the CSS up a bit. Note that you can choose to only put vertical-align: top in your #thirdDiv element. This way you can keep the other two divs in their original position.
What you are looking for is padding. The CSS margin properties are used to create space around elements, outside of any defined borders whereas the CSS padding properties are used to generate space around an element's content, inside of any defined borders.
Try the following instead of applying margin-top to #thirdDiv.
#Container {
padding-top: 36px;
border: 15px solid orange;
width: 350px;
}
#firstDiv {
display: inline-block;
border: 1px solid red;
font-size: 1em;
}
#secondDiv {
border: 1px solid green;
display: inline-block;
font-size: 2em;
}
#thirdDiv {
display: inline-block;
border: 1px solid pink;
font-size: 1em;
}
<div id="Container">
<div id="firstDiv"> a </div>
<div id="secondDiv"> b </div>
<div id="thirdDiv"> c </div>
</div>
You must specify a value for margin-top else it won't know how much margin to add.
What were typing for margin-top before, margin-top: ;?
What is your desired effect?
My second inner div position is weirdly adjusted when my first inner div have a long link text. How to fix it?
My html code:
<div class='div-wrapper'>
<div class='inner-div1'>
This is a long link
</div>
<div class='inner-div2'>
Link 2
</div>
</div>
My css code:
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
link to the picture of the div:
https://www.dropbox.com/s/9zs4mgj7izuqsp1/question.png?dl=0
The problem is with your CSS. Particularly the .div-wrapper div
You need to change the display setting from inline-block to inline-table to get it inside the cell. You mentioned that you wanted the box inside the larger box, but you need to clarify how exactly you want the inner boxes to be placed inside the larger box (ex: small gap between the boxes, both perfectly fit inside the large box with equal sizes)
Just changed inline-block to inline-flex for your inner div and looks fine.
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-flex;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
<div class='div-wrapper'>
<div class='inner-div1'>
This is a long link
</div>
<div class='inner-div2'>
Link 2
</div>
</div>
Just have to fix this, I don't think any solution here explains why the problem exists. Just to add up, the problem with this is because vertical-align is set to baseline by default.
What you have to do is set the vertical-align to top
Insert it in your CSS:
.div-wrapper div {
vertical-align: top;
}
Link to solution: https://jsfiddle.net/Lnvgkfz3/
Small changes in CSS
.div-wrapper {
border: 1px solid black;
width: auto;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 190px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
There is a gap between .heads and .container1 that has something to do with the h1 tag. Tried without h1 and it works, however i need the h1 there though.
How would i go about removing the gap between .heads and .container1?
http://codepen.io/techagesite/pen/Nqxzvg
.heads {
background-color: #FF9000;
padding: 0px 0px 0px 0px;
border: 1px solid #FFC223;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom: none;
border-bottom-right-radius: none;
border-bottom-left-radius: none;
}
h1 {
padding: 0;
font-size: 20px;
font-family: Tekton Pro;
color: #71A00E;
}
.container1 {
width: 100%;
border: 1px solid #006699;
background: #0A3D5D;
float: left;
padding-bottom: 4px;
padding-top: 4px;
padding-right: 0px;
padding-left: 4px;
clear: both;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
border-top-right-radius: none;
border-top-left-radius: none;
}
p.normal {
font-size: 21px;
font-family: tahoma;
color: #F7DF57;
}
<div class="heads">
<h1>Some heading in here</h1>
</div>
<div class="container1">
<p class="normal">Some text in here</p>
</div>
You can remove margin from h1 element:
h1 {
margin: 0;
}
Strongly suggest to read about h1 element here and Collapsing margins too.
codepen
The gap is caused by margin collaspsing. In summary, the bottom margin of h1 is collapsed with that of the head element. Note that The top margin is not collapsed because there is a border between the margin of head element and the margin of h1.
You can use various techniques to contain the margin. The simplest one is to use overflow: hidden (in this example you can add a bottom border whose color matches background color).
.heads {
background-color: #FF9000;
border: 1px solid #FFC223;
border-bottom: none;
/* irrelevant rules removed */
overflow: hidden;
}
h1 {
font-size: 20px;
color: #71A00E;
}
.container1 {
width: 100%;
border: 1px solid #006699;
background: #0A3D5D;
float: left;
clear: both;
/* irrelevant rules removed */
}
p.normal {
font-size: 21px;
color: #F7DF57;
}
<div class="heads">
<h1>Some heading in here</h1>
</div>
<div class="container1">
<p class="normal">Some text in here</p>
</div>
Try this, add margin:0; on h1
h1 {
padding: 0;
font-size:20px;
font-family:Tekton Pro;
color:#71A00E;
margin:0;
}
use
*{
padding:0;
margin:0;
}
it will remove all extra padding and margin of all block element.
I just add a display property of inline-block to the h1 or p element and it removes all the div gaps.
How can I prevent the top edge from being cut off in this code: http://jsfiddle.net/ebW6F/?
HTML code:
<div id="text">
abcd efgh
</div>
CSS code:
#text {
display: inline;
border: 3px solid black;
padding: 10px;
font-size: 40px;
}
Here is one way to do that:
#text {
display: inline-block;
border: 3px solid black;
padding: 10px;
font-size: 40px;
}
Since you appear to be creating a box of some kind, use display:inline-block instead of just display:inline.
See: http://jsfiddle.net/ebW6F/2/