I have 2 child anchor tags inside a parent div. I want to add a background color and some styles to the child divs without affecting the entire row.
Here's my HTML:
<div class= 'about-header-container header-info' id='about-header' style='display: block;'>
<a class='bio-header tablink' href='#bio-dashfolio'>Bio</a>
<a class='timeline-header tablink' href='#timeline-dashfolio'>Timeline</a>
</div>
and CSS:
.tablink {
margin-right: 20px;
}
.header-info {
margin-left: 80px;
margin-top: 10px;
font-size: 15px;
background-color: red; /* trial color*/
}
Fiddle: https://jsfiddle.net/kesh92/t5zzk6oc/
Currently, the red affects the entire row from the bio-header child div. If I add a width property to the .header-info parent div, then there's no precise way to wrap it exactly around the children, especially given the red background-color for the children divs wraps itself perfectly around the first child div (being bio-header). Please help me add the red color around the children divs with equal left and right margins.
Thanks in advance!
Edit: This is the result I want to achieve -
.header-info
{
display: block;
font-size: 0px;
}
.header-info a
{
text-decoration: none;
background-color: red;
font-size: 15px;
padding: 10px 20px;
}
<div class="header-info">
<a class="anchor" href='#bio-dashfolio'>Bio</a>
<a class="anchor" href='#timeline-dashfolio'>Timeline</a>
</div>
Try this:
.tablink {
padding-right: 20px;
background-color: grey;
}
a {
float: left;
}
.header-info {
margin-left: 80px;
margin-top: 10px;
font-size: 15px;
}
Updated: https://jsfiddle.net/63nqdswL/
Use display:table on parent, and display:table-cell on each child. display:table-* wraps tight so use padding on each child for spacing as needed.
SNIPPET
.header-info {
display: table;
margin-left: 80px;
margin-top: 10px;
font-size: 15px;
background-color: red;
/* trial color*/
}
.tablink {
margin-right: 20px;
display: table-cell;
}
.bio-header {
padding: 3px 15px 3px 5px;
}
.timeline-header {
padding: 3px 5px 3px 15px;
}
<div class='about-header-container header-info' id='about-header'>
<a class='bio-header tablink' href='#bio-dashfolio'>Bio</a>
<a class='timeline-header tablink' href='#timeline-dashfolio'>Timeline</a>
</div>
Related
There is a strange effect with the css setting that has come with the latest chrome version.
Do you've an idea why the second box is below the first one (see image) ?
display: inline-block;
some help is welcomed.
If you want the boxes to anchor to the top you can use the CSS vertical-align: top property.
Here is the example,
Please view it in a full screen mode so that the boxes appear side by side.
.ic3a-container {
width: 100%;
color: white;
}
.ic3a-mini-box-c {
display: inline-block;
width: 500px;
vertical-align:top;
}
.ic3a-mini-box {
height: 100px;
margin: 15px;
padding: 20px;
background-color:#990033;
}
.ic3a-mini-box i {
display: block;
height: 100%;
line-height:100px;
font-size: 60px;
width: 100px;
float: left;
text-align: center;
border-right: 2px solid rgba(255, 255, 255, 0.5);
margin-right: 20px;
padding-right: 20px;
color: white;
}
.ic3a-mini-box .value {
font-size: 2em;
}
.ic3a-mini-box .measure {
font-size: 1.5em;
}
.ic3a-mini-box .description {
margin-top: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="ic3a-container">
<div class="ic3a-mini-box-c">
<div class="ic3a-mini-box">
<i class="ic3a-sep fa fa-cubes"></i>
<div class="value">$4 500</div>
<div class="measure">License</div>
<div class="description"><span class="diff">+23%</span>difference from previous quarter</div>
</div>
</div>
<div class="ic3a-mini-box-c">
<div class="ic3a-mini-box">
<i class="ic3a-sep">Icon</i>
<div class="value">Amount</div>
<div class="measure">AmountLabel</div>
<div class="description"><span class="diff">Amount2</span> Amount2Label</div>
</div>
</div>
</div>
Actually its working fine as expected only, when it is coming below means when container width reduce by the screen why because you given width: 100%; to the parent and given fixed width to the child elements, still you want that side by side only give white-space: nowrap; to the parent element.
There is an another way too, you can you give display: table; to the parent element and for child's give display: table-cell;. It wont come down anymore
Displaying inline block does exactly as it says, if in your markup you have any spaces it will render these spaces as well (the white space - it is supposedly a bug - i see it as a bug as inline should butt up next to each other), example is what you have displayed. With the width of both of the boxes and the space next to them will result in the boxes breaking down.
There are a few ways to remove this:
<div>Element</div><!--
--><div>Element 2<div>
or you can do:
<div>Element</div><div>Element</div>
Will result in the blocks showing inline next to one another. Another way to combat this is to use a negative margin:
.class{
margin-left: -3px;
}
There is also the workaround of setting the parent element to:
font-size: 0;
or
white-space: nowrap;
I would recommend using flexbox on the parent element personally, as this will stop your line break from happening.
You can read more on this here:
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
.ic3a-container {
width: 100%;
color: white;
}
.ic3a-mini-box-c {
display: inline-block;
width: 500px;
}
.ic3a-mini-box {
height: 100px;
/* margin: 15px;*/
padding: 20px;
background-color:#990033
}
.ic3a-mini-box i {
display: block;
height: 100%;
line-height:100px;
font-size: 60px;
width: 100px;
float: left;
text-align: center;
border-right: 2px solid rgba(255, 255, 255, 0.5);
margin-right: 20px;
padding-right: 20px;
color: white;
}
.ic3a-mini-box .value {
font-size: 2em;
}
.ic3a-mini-box .measure {
font-size: 1.5em;
}
.ic3a-mini-box .description {
margin-top: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="ic3a-container">
<div class="ic3a-mini-box-c">
<div class="ic3a-mini-box">
<i class="ic3a-sep fa fa-cubes"></i>
<div class="value">$4 500</div>
<div class="measure">License</div>
<div class="description"><span class="diff">+23%</span>difference from previous quarter</div>
</div>
</div>
<div class="ic3a-mini-box-c">
<div class="ic3a-mini-box">
<i class="ic3a-sep">Icon</i>
<div class="value">Amount</div>
<div class="measure">AmountLabel</div>
<div class="description"><span class="diff">Amount2</span> Amount2Label</div>
</div>
</div>
</div>
I just have removed margin:15px from ic3a-mini-box class.
You can check in browser and see you get the result as expected or not?
Hope this helps.
I would like to push the text down to be centered in the green part, but I cannot seem to figure it out. I've been messing around with it for some time, but I'm still a novice. Any help would be appreciated. I've added the HTML and CSS below.
.beerimgcontainer {
width: 300px;
height: 400px;
margin-bottom: 20px;
margin-right: 20px;
display: inline-block;
position: relative;
text-align: center;
margin-right: 10px;
overflow: hidden;
max-height: 400px;
}
.beerimgcontainer a {
text-decoration: none;
}
.beerimgcontainer span {
text-decoration: none;
font-size: 23px;
font-family: champagne;
color: black;
}
.beerimgcontainer:hover {
background: #165a11;
color: white;
box-shadow: 0px 0px 0px 2px #3c8837;
box-sizing: border-box;
}
.beerimgcontainer:hover span {
color: white;
}
<div class="beerimgcontainer">
<a href="mug.html">
<img src="images/text2.png" class="positionimg" alt="Mug">
<span>Mug</span>
</a>
</div>
img and span are inline elements. They are initially next to each other. Since your image covers the whole width (that's available; 300px on parent div), it pushes the span down. Margin on the span wouldn't work.
What you should do is to set display: block on the span and then set a margin:
.beerimgcontainer span {
display: block;
margin-top: 15px;
}
JSFiddle
I have 2 divs and 2 H4 headers which need to be in a line. Tried to align with text-align and float left but it doesn't work.
From my understanding, side by side alignment can be achieved by using float for the elements but it is not happening in my case. Also unable to center them. At present trying to use margin left with a 30% which I believe is not a proper solution. The images below shows how it looks currently and how I am trying to make it look.
HTML
<div class="k-legend-title">
<div class="k-stat-title-color-box" style="background-color: #3DA1ED;"></div>
<h4 class="">Driver 1</h4>
<div class="k-stat-title-color-box" style="background-color: #652D91;"></div>
<h4 class="">Driver 2</h4>
CSS
.k-legend-title{
color: #C3CF01;
}
.k-stat-title-color-box {
width: 10px;
height: 10px;
border-radius: 25px;
background: #ccc;
float: left;
margin-top: 6px;
margin-right:5px;
margin-left: 30%;
}
Current Layout
Trying to get this layout. Center and in 1 line
Make them inline-level, don't use floats. Then you can align them horizontally through text-align on their container, and align them vertically through vertical-align on themselves.
.k-legend-title {
color: #C3CF01;
text-align: center;
}
.k-stat-title-color-box, h4 {
display: inline-block;
vertical-align: middle;
margin: 5px 0;
}
.k-stat-title-color-box {
width: 10px;
height: 10px;
border-radius: 25px;
background: #ccc;
}
<div class="k-legend-title">
<div class="k-stat-title-color-box" style="background-color: #3DA1ED;"></div>
<h4>Driver 1</h4>
<div class="k-stat-title-color-box" style="background-color: #652D91;"></div>
<h4>Driver 2</h4>
</div>
By default h1-h6 elements has display: block, you should use display: inline-block in this situation.
h4{
display: inline-block;
}
h4:first-of-type{
margin-right: 15px;
}
JSfiddle here
Try using display:inline-block with parent using text-align:center:
.k-legend-title {
text-align:center;
color: #C3CF01;
}
.k-stat-title-color-box {
width: 10px;
height: 10px;
border-radius: 25px;
background: #ccc;
display:inline-block;
margin-top: 6px;
}
h4 {
display:inline-block;
}
.k-legend-title h4:first-of-type {
margin-right: 10px;
}
Fiddle: https://jsfiddle.net/kaarccq4/
I have two divisions next to each other with attribute display: inline-block;; if I increase the height of the second division, the position of the first goes down by the amount I increased the height by, for example - if I add a slogan under my name as seen in this fiddle http://jsfiddle.net/wyorLh6s/1/ the position of the icon/logo goes down.
It's probably really obvious, but it's been a long weekend and I could use a push in the right direction - cheers guys.
.top {
background: #2980b9;
padding: 20px;
padding-left: 200px;
padding-right: 200px;
}
.top .logo {
position: relative;
}
.top .logo .icon {
font-weight: bolder;
color: white;
}
.top .logo .icon {
display: inline-block;
width: 10px;
height: 10px;
padding: 25px;
padding-top: 5px;
padding-bottom: 45px;
border: 3px solid white;
text-align: center;
}
.top .logo .name {
display: inline-block;
color: white;
text-transform: uppercase;
}
<div class="top">
<div class="logo">
<div class="icon">JH</div>
<div class="name">
<div class="title">Jack Hardcastle</div>
<div class="slogan">Slogan Goes Here</div>
</div>
</div>
</div>
My aim is to have the name inline with the JH in the logo/bordered-text, with the slogan underneath that text, http://jsfiddle.net/wyorLh6s/1/ can be seen here if the slogan div is removed.
As elements are displayed inline, .icon is affecting .name's baseline (default vertical-align), so you can do the following to change this behaviour:
.name{ vertical-align: top; }
JSFiddle
I'd like to fill all the fluid with white colored square.
As you see the picture, each fluid is filled with white, but it's not complete square.
I wrapped whole with div class WhiteZone, but it won't make them square.
How can I make it square?
LIVE DEMO
HTML
<div class="WhiteZone">
<div class="Box">
<div class="Left">
abcdefg<br />
opqrstu
</div>
</div>
<div class="Box">
<div class="Right">
hijklmn
</div>
</div>
</div>
CSS
div.WhiteZone{
color: #000;
background-color: #fff;
}
div.Box{
padding: 0px;
text-align: center;
float: left;
}
div.Left{
width: 300px;
padding-top: 5px;
padding-bottom: 15px;
text-align: center;
color: #000;
background-color: #fff;
clear: both;
}
div.Right{
width: 300px;
padding-top: 5px;
text-align: left;
color: #000;
background-color: #fff;
clear: both;
}
You can use display: table for this. Write like this:
div.WhiteZone {
color: #000;
background-color: #fff;
display: table;
}
div.Box {
padding: 0px;
text-align: center;
display: table-cell;
}
Check this demo.
div.WhiteZone{
color:#000000;
background-color:#ffffff;
overflow:hidden;
}
You can add overflow:hidden to your whitezone class so it will stretch to fit the height of inner floating divs. But with only that added you will get white background taking full width of your page. Like here
To avoid that, you can also add float:left to your whitezone class (like here) or set a width to it (like here)