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;
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.
I'm trying to fix my website. Problem #1 I can't push the list on the header over by using margin-left or padding-left. Problem #2 the Main Header 1 and 3 are creating there own padding. My goal is to fix the padding and bring the headers closer together and get rid of this padding/margin issue.
#hlist {
top: 10px;
margin-right: 3px;
position: relative;
height: 30px;
padding-right: -12px;
}
ul#hlist {
float: right;
list-style-type: none;
margin: 0;
overflow: hidden;
}
ul#hlist li {
float: left;
}
ul#hlist li a {
font-family: 'Poppins';
color: black;
text-align: center;
text-decoration: none;
padding: 14px 16px;
}
ul#hlist li a:hover {
border-style: solid;
border-width: 1px;
border-color: gray;
color: gray;
}
.content-wrapper {
padding: 0;
}
.text-wrapper {
height: 300px;
width: 100%;
position: relative;
margin-top: -60%;
}
.text-wrapper h1 {
text-shadow: 2px 2px black;
text-align: center;
color: #ffff;
font-size: 10vw;
}
.text-wrapper h3 {
margin-top: 10%;
text-shadow: 2px 2px black;
text-align: center;
color: #ffff;
font-size: 30px;
}
<div id="header">
<ul id="hlist">
<li>WHERE TO WATCH</li>
<li>ABOUT</li>
</ul>
<div id="logo-box">
<img style="height: 32px; padding:5px;" src="https://assets.nationalgeographic.com/styleguide/stable/logos/ng-logo-2fl.svg" alt="logo">
</div>
</div>
</header>
<div class="content-wrapper">
<image id="bg" src="https://i.imgur.com/i2MSrn7.jpg">
<div class="text-wrapper">
<h3> The Giant </h3>
<h1> Panda </h1>
</div>
<image id="ply" style="height: 32px; padding:5px;" src="images.svg">
</div>
Your body has margin: 8px set. That's why there's a gap around the edges. Set margin: 0 on the body tag. Check out this codepen I created. That solves the gap around the edges of the image.
I don't fully understand the second part of your question. Your page is spread out very wide due to the size of the image. Make the image smaller and so that it doesn't overflow and your site will look much better.
If you want to position the links in an easier way look into using Flexbox and doing something like this:
display: flex;
justify-content: flex-end;
Do that on your links and they should float right if that's what you're trying to do.
Also, look into using a CSS Reset. By default HTML elements come with certain CSS styles applied automatically. A reset will get rid of default styles so they don't interfere with what you're trying to do. Lots of HTML elements have default padding/margins that you may not realize.
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/
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.
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