Here is the example which has two divs and it can be seen that no matter how much I increase the value of margin-top for punchline div it isn't having any effect: https://jsfiddle.net/5frzjnbj/
It just goes only as much farther as the logo is from the top. Why is that? When I remove logo div then div starts acting "normally".
The Code:
.logo{
float: left;
/*margin-left: 19px;*/
font-size: 27;
background-color: red;
margin-top:100px;
}
.punchLine{
background-color: green;
/*float: left;*/
margin-top:1000px;
clear: both;
/*margin-left: 300px;
font-size: 14;
color: #264B5D;
text-transform: uppercase;
font-family: Arial;*/
}
<div class="logo">
<font color="#0072BC">Logiz</font><font color="FFFFFF">solutions.com</font>
</div>
<div class="punchLine">
software and tech solutions...
</div>
Apply this, it help
.punchLine{
float: left;
}
Check out the solution here.
One needs to add clear: both after the floated divs.
Code:
HTML:
<div class="logo">
<font color="#0072BC">Logiz</font><font color="FFFFFF">solutions.com</font>
</div>
<div class="clearfix"></div>
<div class="punchLine">
software and tech solutions...
</div>
CSS:
.logo {
float: left;
/*margin-left: 19px;*/
font-size: 27;
background-color: red;
margin-top: 100px;
}
.punchLine {
background-color: green;
/*float: left;*/
margin-top: 1000px;
clear: both;
/*margin-left: 300px;
font-size: 14;
color: #264B5D;
text-transform: uppercase;
font-family: Arial;*/
}
.clearfix {
clear: both;
}
Why isn't margin-top working with this div?
Because margin properties cannot be collapsed properly when elements are floated, see the official W3 Docs on the matter: Box Model - Collapsin Margins
Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
Solutions
1: No Floats
Get rid of the floating, why do you need it in the first place if the elements are going to be under each other?
.logo {
margin-top: 100px;
font-size: 27px;
color: #FFF;
background: #000;
}
.logo span {
color: #0072BC;
}
.punchLine {
background-color: lightblue;
margin-top:100px;
}
<div class="logo">
<span>Logiz</span>solutions.com
</div>
<div class="punchLine">
software and tech solutions...
</div>
2: Margin Bottom
Add margin-bottom: 100px to the logo div if you want to keep the float for some reason.
.logo {
margin-top: 100px;
margin-bottom:100px;
font-size: 27px;
color: #FFF;
background: #000;
float:left;
}
.logo span {
color: #0072BC;
}
.punchLine {
background-color: lightblue;
clear:both;
}
<div class="logo">
<span>Logiz</span>solutions.com
</div>
<div class="punchLine">
software and tech solutions...
</div>
3: Padding-top
Alternatively you can add a top padding if there won't be an actual background.
.logo {
margin-top: 100px;
font-size: 27px;
color: #FFF;
background: #000;
float:left;
}
.logo span {
color: #0072BC;
}
.punchLine {
background-color: lightblue;
clear:both;
padding-top:100px;
}
<div class="logo">
<span>Logiz</span>solutions.com
</div>
<div class="punchLine">
software and tech solutions...
</div>
Other methods can be transparent borders or pseudo selectors but I don't think they are the best practice so I will not explain them here.
P.S Please avoid using <font> tags, they are long deprecated.
Related
This is my HTML and CSS
.register {
background-color: red;
width: 500px;
float: left;
}
.login {
background-color: blue;
width: 500px;
float: left;
}
.log {
text-decoration: none;
font-family: 'Mulish', sans-serif;
font-size: 20px;
color: #fff;
}
<div class="submissions">
<div class="register"><a class="log" href="#" style="margin-right: 100px;">Register</a></div>
<div class="login"><a class="log" href="#" style="margin-left: 100px;">Login</a></div>
</div>
And the login text aligns in fact 100px with margin-right, but the register text doesnt align 100px with the margin-right, how can i fix this? Image shown below (Used red and blue colored divs for easier visualization.)
margin-right does not guarantee the element will be a certain distance from the right side of its parent, it only determines the minimum space reserved by the element on its right side.
See for yourself: the red element here is more than 10px from the right side of its parent div.
.container {
width: 100%;
height: 50px;
background-color: blue;
}
.child {
width: 20%;
height: 50px;
margin-right: 10px;
background-color: red;
}
<div class="container">
<div class="child"></div>
</div>
If you want the element to measure from the right side instead of the left, you can use the float property.
.container {
width: 100%;
height: 50px;
background-color: blue;
}
.child {
width: 20%;
height: 50px;
float: right;
margin-right: 10px;
background-color: red;
}
<div class="container">
<div class="child"></div>
</div>
See how the red element is now on the right side of its parent container? It is now exactly 10px from the edge because it still reserves that space using its margin-right.
The use of float is less common today because there are better ways to create most layouts. For simple uses like this, however, it might be the quick fix you're looking for.
Here's your code with the float property adjusted. I've selected the "Register" link using the compound selector .register > a which matches an anchor (a) tag that is the direct child of an element with the register class attribute.
.register {
background-color: red;
width: 500px;
float: left;
}
.register > a {
float: right;
}
.login {
background-color: blue;
width: 500px;
float: left;
}
.log {
text-decoration: none;
font-family: 'Mulish', sans-serif;
font-size: 20px;
color: #fff;
}
<div class="submissions">
<div class="register"><a class="log" href="#" style="margin-right: 100px;">Register</a></div>
<div class="login"><a class="log" href="#" style="margin-left: 100px;">Login</a></div>
</div>
What I understand from your question is that you are looking to achieve something similar to this Screenshot
To achieve this, I simply put text-align: right on the .register class.
Full code:
.register {
background-color: red;
width: 500px;
float: left;
text-align: right; //The only change
}
.login {
background-color: blue;
width: 500px;
float: left;
}
.log {
text-decoration: none;
font-family: 'Mulish', sans-serif;
font-size: 20px;
color: #fff;
}
<div class="submissions">
<div class="register"><a class="log" href="#" style="margin-right: 100px;">Register</a></div>
<div class="login"><a class="log" href="#" style="margin-left: 100px;">Login</a></div>
</div>
Try 'fullpage' version.
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 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)
I have this set of html and css. What I want is to have to have the small gadgets blocks float left but to centered inside of the absolute positioned gadget-wrapper.
So, the gadget wrapper is absolute positioned to the bottom of a page. It holds x number of gadgets that floats left inside of the wrapper.
All these gadget should be centered inside the wrapper - is this possible and how ...? This is really killing me ....
HTML
<div id="gadget-wrapper">
<div class="gadget">
<h2>1</h2>
<div class="value-holder critical">not set</div>
<div class="value-holder non-critical">not set</div>
</div>
<div class="gadget">
<h2>2</h2>
<div class="value-holder critical">not set</div>
<div class="value-holder non-critical">not set</div>
</div>
<div class="gadget">
<h2>3</h2>
<div class="value-holder critical">not set</div>
<div class="value-holder non-critical">not set</div>
</div>
</div>
CSS
#gadget-wrapper {
width: 900px;
font-family: "Century Gothic";
color: #FFF;
position: absolute;
bottom: 10px;
outline: 1px solid green;
}
.gadget h2 {
margin: 0px;
font-weight: normal;
font-size: 16px;
}
.gadget {
min-width: 120px;
margin-right: 10px;
padding: 5px;
-webkit-border-radius: 10px;
background-color: #383838;
opacity: 0.75;
float: left;
border: 4px solid #000;
}
.value-holder.critical.active {
color: #FF0000;
}
.value-holder.non-critical.active {
color: #FFFF00;
}
.value-holder {
font-size: 28px;
float: left;
width: 50%;
text-align: center;
}
Have you tried making the gadget elements inline and aligning them to the center with text-align?
#gadget-wrapper {
...
text-align: center;
}
.gadget {
display: inline;
float: none;
}
This might work, I'm just not sure how the block level elements inside will behave (I'm unable to test this right now). You can also try inline-block instead of inline.
display: inline-block; works with the first answer. make sure you removed float: left;