How can I align a div at the edge of a div above it when said div is using automatic positioning?


Tags: html,css

Problem :

I have a <div>:

<div id="placeHolder" class="card"><h1> A title!</h1><p>Some text!</p> </div>  

and a second <div> containing some text and a <form>:

  <div id="inputFields"><h4 class="header middle">edit</h4>
      <div id="inputs"> 
          <form id="form-inputs"><br>
              Label <input class="input" type="text"> Label <input class="input" type="text"><br>
              Label <input class="input" type="text"> Label <input class="input" type="text"><br>
              Label <input class="input" type="text"> Label <input class="input" type="text"><br>
          </form>
      </div>
  </div>

I am using CSS to automagically center the first div right where I want it on the page:

.card {
width: 850px;
height: 350px;
margin-left: auto;
margin-right: auto;
margin-top: 150px;
left: auto;
top: auto; 
background-color: lightgrey;
}

This is great because the <div> does a reasonably well job of keeping itself centered. However I now want to align the second <div> with the first one so that it is directly under it along the left edge.

That's what I can't figure out how to do. I tried setting the second <div> to:

#inputFields {
    left: auto;
    top: auto;
}

But that doesn't work. I'm not sure why, but I'm guess it is because I haven't set the height and width manually.

How can I align these two <div>s next to each other?

Example of what it looks like currently. Basically I want to position the second <div> under the first one along it's left edge.



Solution :

You need to assign the same width to the second div and also give it auto margins like so:

#inputFields {
    margin:0 auto;
    width: 850px;
}

http://jsfiddle.net/LHkhG/embedded/result/


    CSS Howto..

    How to Align CSS form

    Nth-child css property is counting html elements with display property set to none. How to change it?

    How do you vertically align the body tag of an HTML document?

    How can I use CSS styling in my GTK# application?

    How to spin css cube each after each [closed]

    How to create a table with fixed layout?

    advice about how to vertically center content in fluid element

    How can I make inputs display inline?

    How to use jQuery to detect loaded background image after inserting out CSS

    How to make a transition effect that just perform like css transition?

    How come I keep getting a Failed to load resource: Error everytime I run my applacation?

    How can I hide the backface of a block element rotated with transform: rotateX()?

    How to make a conjoined input with flexible width

    How to add a line break
    in
    in HTML

    how to add css file to node js(not express) code

    how to affect an element's width by one child element but not others using CSS

    How to check if a particular CSS value exists

    How to vertically align text inside
  • in a CSS based drop-down menu?
  • Css how to replace block after click button

    How to create a multi colored circle in html and css

    How to create one UL menu similar to another

    JavaScript- How to change “message” div to yellow

    How to include SASS files and CSS files into version repository and developement cycle

    How to get multiple rotating background cover with css / Full screen slideshow

    Writing CSS rules to different browsers, how? [duplicate]

    How to use CSS to modify an icon with the bootstrap collapse

    How to make CSS menu bar activated only after my mouse cursor is at the menu.

    How to apply icons to links using css?

    how to give space for every row (CSS issue)

    how to center horizontally div and span elements using css