3

can someone help rectify an issue I am facing. I am trying to set a space between two divs but doing this moves both divs together. My code is as follows:

@charset "utf-8";

/* CSS Document */

* {
  box-sizing: border box;
}
body {
  background-image: url(../images/nature_beach-1280x800.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 100%;
  margin: 0;
}
html {
  height: 100%;
}
#container {
  background-color: rgba(255, 255, 255, .50);
  height: 65%;
  width: 30%;
  box-sizing: border-box;
  transform: translate(200%, 20%);
  font-family: Myriad Pro;
  font-size: 20px;
}
#login {
  text-align: center;
  padding: 5%;
  font-weight: bold;
}
#form {
  margin-top: 5%;
  margin-left: 10%;
}
.textfield {
  height: 25px;
  width: 250px;
  background-color: rgba(109, 207, 246, .50);
  border: none;
}
.fieldname {
  float: left;
}
.textbox {
  float: right;
  margin-right: 10%
}
#container2 {
  /*What should I put here??*/
}
<div id="container">
  <div id="login">
    Login
  </div>
  <div id="form">
    <div id="container1">
      <span class="fieldname">Username</span>
      <span class="textbox"><input class="textfield" type="text" /></span>
    </div>
    <div id="container2">
      <span class="fieldname">Password</span> 
      <span class="textbox"><input class="textfield" type="text" /></span>
    </div>
  </div>
</div>

When I set margin-top:5% to container2 in css, both divs move according to the margin. What I want to do is variable space between the two divs. Padding to container2 messes up the layout.

Please help me out.

Demo LINK

Amitesh Kumar
  • 3,051
  • 1
  • 26
  • 42
user3889963
  • 477
  • 3
  • 6
  • 17
  • 1
    Unrelated, but what's the deal with that transform? Why are you using `translate()` for positioning instead of the built-in CSS rules for positioning? – Ken Bellows Apr 06 '16 at 12:29
  • Try `padding-top: 60px;` 50 and above should work – Pugazh Apr 06 '16 at 12:29
  • Yes...that worked!! Thanks pugazh. Can someone please explain why the margin top did not work?? – user3889963 Apr 06 '16 at 12:32
  • Because you are using floats and translates to position your elements. By doing this container2 has a height of 0. Please position your elements the normal way to avoid such conflicts. – Laurens Apr 06 '16 at 12:32
  • Got it. Thanks a lot for the quick answers – user3889963 Apr 06 '16 at 12:33
  • I added some more info about how to make float element count to paretn height. But i suggest using inline-block and flexbox, rather that floated elements. – IdeaMan Apr 06 '16 at 12:37

4 Answers4

5

https://jsfiddle.net/y30tosp5/ You had elements with zero height, cos floated div ones do not increase the parents height.
Read about clearfix, if you want to know more.

#container1{
    overflow: auto
}
#container2{
     margin-top: 2%;
     overflow: auto
}

What is a clearfix? here is some more info.
And as said, better start using ether inline-block or flexbox, to avoid this problem once and for all.

Community
  • 1
  • 1
IdeaMan
  • 717
  • 4
  • 13
2

First you have a syntax error here : 

*{
    box-sizing:border box;
}

It is border-box.

Then I change a little bit your structure replacing span with div right here :

<div id="form">
    <div id="container1">
        <div class="fieldname">Username</div>
        <div class="textbox"><input class="textfield" type="text" /></div>
    </div>
    <div id="container2">
        <div class="fieldname">Password</div> 
        <div class="textbox"><input class="textfield" type="text" /></div>
    </div>
</div>

And remove the tranlate property to center correctly the form container with margin:auto;.

Then I was able to add a margin-top to #container2 as you wanted :

#container2{
  margin-top : 20px;
}

See a live example

Vincent G
  • 8,547
  • 1
  • 18
  • 36
0

not sure of final result expected and really not sure of your method :)

you may use transform with different values

what is the point here ? to align right elements and some vertical alignements ? question is unclear about the purpose of translate here :)

@charset "utf-8";

/* CSS Document */

* {
  box-sizing: border box;
}
body {
  background-image: url(../images/nature_beach-1280x800.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 100%;
  margin: 0;
}
html {
  height: 100%;
}
#container, #container2 {
  background-color: rgba(255, 255, 255, .50);
  height: 65%;
  width: 30%;
  box-sizing: border-box;
  transform: translate(200%, 20%);
  font-family: Myriad Pro;
  font-size: 20px;
}
#login {
  text-align: center;
  padding: 5%;
  font-weight: bold;
}
#form {
  margin-top: 5%;
  margin-left: 10%;
}
.textfield {
  height: 25px;
  width: 250px;
  background-color: rgba(109, 207, 246, .50);
  border: none;
}
.fieldname {
  float: left;
}
.textbox {
  float: right;
  margin-right: 10%
}
#container2 {
  /*What should I put here??*/
  
  transform: translate(200%, 40%);
}
<div id="container">
  <div id="login">
    Login
  </div>
  <div id="form">
    <div id="container1">
      <span class="fieldname">Username</span>
      <span class="textbox"><input class="textfield" type="text" /></span>
    </div>
    <div id="container2">
      <span class="fieldname">Password</span> 
      <span class="textbox"><input class="textfield" type="text" /></span>
    </div>
  </div>
</div>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • Are you really suggesting to use transform to achieve a margin on an element of height 0? This is bad practise – Laurens Apr 06 '16 at 12:36
  • @Laurens i'm suggesting that the transform thing is not accurate at all in the first place and another smart method is to be used here. just looks like beginner meeting the absolute positionning .... – G-Cyrillus Apr 06 '16 at 12:38
  • So, I take it transforms in general are bad practice?? But how do I avoid the floating of divs, since I need them to be in one line?? – user3889963 Apr 06 '16 at 12:39
  • @user3889963 nop, unless you know why you use it , what is the point here ? to align right elements and some vertical alignements ? question is unclear about the purpose of translate here :) – G-Cyrillus Apr 06 '16 at 12:40
  • @user3889963 padding-top or bottom with percentage values, use width as reference to calculate distance ... so does vertical margins too – G-Cyrillus Apr 06 '16 at 12:41
0

Just Add these styles :

#container1 {
  margin-bottom: 18px;
  overflow: auto;
  width: 380px;
}
#container2 {
  overflow: auto;
  width: 380px;
}
Amin Gholibeigian
  • 1,325
  • 2
  • 9
  • 11