I have a div floating to the left of two text input elements. When I set margin-top on the inputs, the margin of the floating div is affected as well. Why is this, and how the F can I stop it from happening?!
Relevant HTML:
<body>
<div class="manage-page">
<h2>Set Logo Order</h2>
<hr>
<div class="logo-container">
<div class="logo-draggable">
<div class="logo-image-box"></div>
<input type="text" />
<input type="text" />
</div>
</div>
</div>
</body>
Relevant CSS:
.manage-page {
margin-top: 2.5em;
margin-left: 25%;
margin-right: 25%;
min-width: 50%;
}
.logo-container {
border:1px solid #777777;
clear: left;
cursor: move;
height: 12.5%;
margin-bottom: 0.625em;
}
.logo-image-box {
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
border:1px solid #000000;
float: left;
height: 100%;
margin: 0 .875em;
width: 12.5%;
}
.logo-draggable input {
border: 1px solid #cccccc;
border-radius: 0.25em;
display: block;
font-size: 0.875em;
height: 2em;
line-height: 1.25;
margin-top: .5em;
padding: 0.375em 0.75em;
outline: none;
}
You can see it in action at the jsfiddle URL below. Just change the margin-top of .logo-draggable input and watch as the .logo-image-box gets bumped up/down as well:
http://jsfiddle.net/Uj2K6/
I think you suffer from collapsing margins (scroll down).
Vertical margins on different elements that touch each other (thus
have no content, padding, or borders separating them) will collapse,
forming a single margin that is equal to the greater of the adjoining
margins.
Related
How to make width of div depend on the width of span inside this div? fit-content doesn't work propperly.
I've got this html code:
<div class="bubble">this text is long enouuuugh<span class="inside">content to fit inside box</span></div>
<div class="bubble">this isn't<span class="inside">content to fit inside box</span></div>
<!-- how I want it to look, but not using style="width:110px" -->
<div class="bubble" style="width:110px">ok<span class="inside">content to fit inside box</span></div>
and css:
.bubble {
float: right;
clear: right;
width: fit-content;
margin: 19px auto;
border: 2px solid red;
padding: 10px;
padding-bottom: 20px;
}
.inside
{
position: absolute;
display: block;
width: fit-content;
right: 0;
margin-top: 1px;
margin-right: 12px;
font-size: 12px;
font-weight: 500;
color: blue;
background: white;
}
I want it to look like the third box, but not with width:xx px, because the length of black text and blue text varies depending of the box, it's not equal every time.
Try the following:
.bubble {
float: right;
clear: right;
width: fit-content;
margin: 19px auto;
border: 2px solid red;
padding: 10px;
padding-bottom: 20px;
}
.inside {
display: block;
width: fit-content;
right: 0;
margin-top: 1px;
margin-right: 12px;
font-size: 12px;
font-weight: 500;
color: blue;
background: white;
}
<body>
<div class="bubble">this text is long enouuuugh<span class="inside">content to fit inside box</span></div>
<div class="bubble">this isn't<span class="inside">content to fit inside box</span></div>
<!-- how I want it to look, but not using style="width:110px" -->
<div class="bubble" style="width:110px">ok<span class="inside">content to fit inside box</span></div>
</body>
Just remove the position: absolute and you will get the result you wanted. Here's some reading material for how the position property works
https://developer.mozilla.org/en-US/docs/Web/CSS/position
Designing the facebook login page for practise using only html and css.But Here I'm facing some problem.Don't know what it is.Here I want to decrease the top margin of class "loginArea" but cant do it.So the facebook logo is okey but the login area is totally different from the genuine facebook page.
body {
margin: 0;
padding: 0;
font-family: arial;
}
.logoArea {
height: 35px;
width: 100px;
background: url(media/6cVHHozUQSt.png) no-repeat;
display: inline-block;
overflow: hidden;
margin: 40px 40px 0 200px;
}
.mainArea {
max-width: 1600px;
margin: auto;
}
header.mainHeader:after {
content: "";
display: block;
clear: both;
}
header.mainHeader {
background: #3a5797;
padding: 10px 0;
color: #fff;
}
.mainHeader .logoArea {
width: 50%;
float: left;
}
.mainHeader .loginArea {
float: right;
width: 50%;
}
.loginArea .userName,
.loginArea .password {
width: 40%;
float: left;
}
.loginArea input[type="text"],
.loginArea input[type="password"] {
width: 60%;
padding: 2px;
border-width: 1px;
border-color: #29487d;
margin-bottom: 5px;
}
.loginArea .submitButton {
width: 20%;
float: left;
}
.loginArea label {
font-size: 12px;
}
label[for="keepLogin"],
.loginArea a {
font-size: 12px;
color: #9CABC6;
}
#keepLogin {
margin: 0;
}
.submitButton input {
background: #3B5998;
color: #fff;
font-weight: bold;
margin-top: 20px;
border-width: 1px;
border-color: #29487d;
padding: 5px;
}
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Facebook- Log In or Sign Up</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<header class="mainHeader">
<div class="mainArea">
<div class="logoArea">
<img id="logo" src="media/6cVHHozUQSt.png" alt="" />
</div>
<div class="loginArea">
<form action="#">
<div class="userName">
<label for="user">Email or Phone </label> <br/>
<input type="text" id="user" /><br/>
<input type="checkbox" id="keepLogin" />
<label for="keepLogin"> Keep me Logged In</label>
</div>
<div class="password">
<label for="password">Password </label><br/>
<input type="password" id="password" /><br/>
Forgotten you password?
</div>
<div class="submitButton">
<input type="submit" value="Log In" />
</div>
</form>
</div>
</div>
</header>
</body>
</html>
Remove the width or margin from .mainHeader .logoArea (or reduce it), so it does not block too much room.
Always be aware that the space an element actually uses is height/width + padding + margin + border, so in your case, the actual width the element takes is 50% plus 240px for the margins.
In .loginArea class reduce top margin to 0 like this. Hope this helps you.
margin: 0 40px 0 200px;
your problem is the margin for .logoArea so you could set box-sizing to border-box and instead of margin use padding.
The default value for box-sizing is content-box:
This is the initial and default value as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin. Note: Padding, border & margin will be outside of the box e.g. IF .box {width: 350px;} THEN you apply {border: 10px solid black;} RESULT {rendered in the browser} a box of width: 370px.
So simply the dimension of element is calculated as, width = width of the content, and height = height of the content (excluding the values of border and padding).
so two ways of solving your issue:
1. remove the margin
2. set box-sizing to border-box + exchange margin with padding
pls check the box model and box-sizing for further infos :)
https://www.w3schools.com/css/css_boxmodel.asp
https://developer.mozilla.org/en/docs/Web/CSS/box-sizing
first of all at top place,
*{
box-sizing: border-box;
}
then change the margin in .logoArea to padding.
.logoArea {
height: 35px;
width: 100px;
background: url(media/6cVHHozUQSt.png) no-repeat;
display: inline-block;
overflow: hidden;
padding: 10px 40px 0 45px;
}
Here's a JSfiddle of my problem https://jsfiddle.net/d20fo54o/
The space below the h3 tag will not go away. I've tried making padding 0, margin 0, and looking it up.
It's not the div under it either, because if you delete the other div and replace it with anything else the space is still there.
div {
background-color: #1D62F0;
border-radius: 20px;
text-align: center;
width: 600px;
margin: 0 auto;
}
div #list {
background-color: white;
width: 100%;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}
div #title {
color: white;
}
<div>
<h3 id='title'>Hello</h3>
<div id='list'>
<p>hello</p>
</div>
</div>
Adding h3, p { margin: 0 }. Working just fine, see fiddle
https://jsfiddle.net/d20fo54o/1/
add margin:0; for both p and h3
div {
background-color: #1D62F0;
border-radius: 20px;
text-align: center;
width: 600px;
margin: 0 auto;
}
div #list {
background-color: white;
width: 100%;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}
div #title {
color: white;
}
h3, p{
margin:0;
}
<div>
<h3 id='title'>Hello</h3>
<div id='list'>
<p>hello</p>
</div>
</div>
In chrome dev tools you can see how margins (the peach coloured bits) affect the overall page.
In this picture, we can see h3#title has a margin-bottom (because it's a margin at the bottom) that is going over the blue bit, so we can say.
h3#title {
margin-bottom: 0px;
}
That will remove the bit below the title Hello, but there is another margin (margin-top this time, because it's a margin on top) that looks to affect that area, this time it's p that is causing the issue so again we can do something like.
p {
margin-top: 0px;
}
Putting it all together
Now let's put these little bits of code we've worked out into your CSS.
div {
background-color: #1D62F0;
border-radius: 20px;
text-align: center;
width: 600px;
margin: 0 auto;
}
div #list {
background-color: white;
width: 100%;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}
div #title {
color: white;
}
/* our new code */
h3#title {
margin-bottom: 0px;
}
p {
margin-top: 0px;
}
<div>
<h3 id='title'>Hello</h3>
<div id='list'>
<p>hello</p>
</div>
</div>
And there we go, the pesky margins are gone and so is the extra spacing.
Hope this helps.
This is driving me crazy. I am relatively new to this stuff so trying to figure this one out for the past hour. I'll be really thankful if someone can help me with this.
I have the following code:
<div class="middle_box">
<div class="box left">
Some large text
</div>
<div class="box right">
Some large text as well
</div>
</div>
CSS:
.middle_box {
height: 260px;
margin: 0 auto;
width: 960px;
}
.box {
float: left;
font-size: 21px;
margin-right: 50px;
margin-top: 25px;
padding-top: 25px;
width: 390px;
}
As you can tell the width of the container is 960px. Now, I want to center the two .box elements within the 960px container and that's where I am lost.
What did I try?
I tried using margin: 0px auto; and I tried faking it by adding margin-left on both sides but it just didn't work. How can I achieve this?
You need to clear ".middle_box", as its children elements are floated.
.middle_box:before, .middle_box:after {
content: "";
display: table;
}
.middle_box:after { clear: both; }
should do the trick
best way to use this hack calls clearfix :
.middle_box:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
When you are using fixed widths anyway, 960px and 390px, why not set the margin as well? Easy to calculate, no need for advanced CSS "magic" here in such setup.
.middle_box {
height: 260px;
margin: 0 auto;
width: 960px;
background-color: red;
}
.box {
float: left;
font-size: 21px;
margin-left: 60px; /* <--- */
margin-top: 25px;
padding-top: 25px;
width: 390px;
background-color: yellow;
}
Here's a Fiddle
HTML
With floating - different dimensions
<div class="middle_box">
<div class="box0 left">
Some large text
</div>
<div class="box0 right">
Some large text as well
</div>
</div>
Without floating - same dimensions
<div class="middle_box">
<div class="box1">
Some large text
</div>
<div class="box1">
Some large text as well
</div>
</div>
With clear - one on the top of another
<div class="middle_box">
<div class="box2 clear">
Some large text
</div>
<div class="box2 clear">
Some large text as well
</div>
</div>
CSS
.middle_box {
margin: 0 auto 10px;
width: 960px;
height: 260px;
text-align: center;
text-transform: uppercase;
border: 1px solid #333;
}
.box0 {
font-size: 21px;
padding-top: 25px;
height: 65px;
border: 1px solid #333;
}
.left {
float: left;
width: 585px;
margin: 24px 6px 0 24px;
}
.right {
float: right;
width: 300px;
margin: 24px 24px 0 6px;
}
.box1 {
float: left;
font-size: 21px;
margin-top: 25px;
margin-left: 25px; /* margin-left | calculate 960px - boxes width - borders */
padding-top: 25px;
height: 65px;
width: 438px;
border: 1px solid #333;
}
.box2 {
font-size: 21px;
margin: 25px auto 25px;
padding-top: 25px;
width: 442px;
height: 65px;
border: 1px solid #333;
}
.clear {
clear: both;
}
Centring floats is tough, but do you need to use float? Why not use:
display: inline-block
There are advantages/disadvantages to using both float and inline-block and both have their quirks but ultimately I find inline-block much more useful and easier to develop with. Here is a fiddle for the solution to your problem using inline-block
DEMO FIDDLE
Also a heads up about its white-space quirk if you do use it (but an easy one to fix):
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
I have a problem creating a decent header in CSS. What I want is a <h1> header that aligns its content in the center of its parent <div>. Sometimes though there might be an additional logo displayed as a regular <img /> which should be aligned to the left.
This is my example code:
<div class="container">
<div class="logo">
<img src="http://www.oldfirestation.co.uk/logo_brand_example_86.jpg" />
<h1>Not center?</h1>
</div>
<div class="more">
This is the center
</div>
</div>
And my CSS:
body {
background-color: #161616;
}
div.container {
background-color: #fff;
width: 70%;
margin: auto;
}
div.logo img {
width: 200px;
float: left;
}
h1 {
text-align: center;
font-size: 1.4em;
margin: 0px auto;
padding: 0px 0px 5px 0px;
width: 50%;
}
div.more {
text-align: center;
margin-top: 50px;
clear: left;
}
The problem is that when I show an <img />, my <h1> text is NOT centered. If I remove this <img /> it is... How can I fix it??
I have made an example on JSFiddle here: http://jsfiddle.net/8B9ZF/
You do like this:
div.logo img {
width: 200px;
vertical-align:middle;
}
h1 {
text-align: center;
font-size: 1.4em;
margin: 0px auto;
padding: 0px 0px 5px 0px;
width: 50%;
display:inline-block;
}
http://jsfiddle.net/8B9ZF/8/
May be you can change your mark-up
http://jsfiddle.net/8B9ZF/24/
If you make the image absolutely positioned at 0,0 instead of floating it then it won't push the H1 out of center alingment. But you then run the danger of the image overlapping the text if the image is too wide, or the container of the heading too small. To counter this, you probably want to add some padding to the left/right of the container
http://jsfiddle.net/8B9ZF/27/
this should always work as far as i know! basically this just adds overflow hidden, which makes the h1 aware of the space taken by the floated element so it takes up the remaining area!
body {
background-color: #161616;
}
div.container {
background-color: #fff;
width: 70%;
margin: auto;
}
div.logo{
overflow:hidden
}
div.logo img {
width: 200px;
float: left;
}
h1 {
text-align: center;
font-size: 1.4em;
padding: 0px 0px 5px 0px;
}
div.more {
text-align: center;
margin-top: 50px;
clear: left;
}