arranging div one below the other

Question

I have two inner divs which are nested inside a wrapper div  I want the two inner div s to get arranged one below the other  But as of now they are getting arranged on the same line     x000D   x000D   wrapper  x000D          margin-left auto  x000D          margin-right auto  x000D          height auto   x000D          width auto  x000D        x000D       inner1  x000D          float left   x000D        x000D       inner2  x000D          float left   x000D         x000D    x000D     lt div id  wrapper  gt  x000D           lt div id  inner1  gt This is inner div 1 lt  div gt  x000D           lt div id  inner2  gt This is inner div 2 lt  div gt  x000D       lt  div gt  x000D   x000D   x000D

User · Answer

Set the main div CSS to somthing like   lt style gt       wrapper          display flex          flex-direction  column         lt  style gt    lt div id  quot wrapper quot  gt           lt div id  quot inner1 quot  gt This is inner div 1 lt  div gt           lt div id  quot inner2 quot  gt This is inner div 2 lt  div gt   lt  div gt   For more flexbox CSS refer  https   css-tricks com snippets css a-guide-to-flexbox

User · Answer

Try a clear  left on  inner2   Because they are both being set to float it should cause a line return    x000D   x000D   inner1   x000D     float left   x000D    x000D   x000D   inner2  x000D     float left   x000D     clear  left  x000D    x000D   lt div id  wrapper  gt  x000D       lt div id  inner1  gt This is inner div 1 lt  div gt  x000D       lt div id  inner2  gt This is inner div 2 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The default behaviour of divs is to take the full width available in their parent container  This is the same as if you d give the inner divs a width of 100    By floating the divs  they ignore their default and size their width to fit the content  Everything behind it  in the HTML   is placed under the div  on the rendered page   This is the reason that they align theirselves next to each other        The float CSS property specifies that an element should be taken from   the normal flow and placed along the left or right side of its   container  where text and inline elements will wrap around it  A   floating element is one where the computed value of float is not none    Source  https   developer mozilla org en-US docs Web CSS float  Get rid of the float  and the divs will be aligned under each other  If this does not happen  you ll have some other css on divs or children of wrapper defining a floating behaviour or an inline display   If you want to keep the float  for whatever reason  you can use clear on the 2nd div to reset the floating properties of elements before that element  clear has 5 valid values  none   left   right   both   inherit  Clearing no floats  used to override inherited properties   left or right floats or both floats  Inherit means it ll inherit the behaviour of the parent element  Also  because of the default behaviour  you don t need to set the width and height on auto  You only need this is you want to set a hardcoded height width  E g  80    800px   500em         lt div id  wrapper  gt       lt div id  inner1  gt  lt  div gt       lt div id  inner2  gt  lt  div gt   lt  div gt    CSS is   wrapper      margin-left auto      margin-right auto      height auto     this is not needed  as parent container  this div will size automaticly     width auto     this is not needed  as parent container  this div will size automaticly       You can get rid of the inner divs in the css  unless you want to style them  If you want to style them identicly  you can use concatenation     inner1   inner2       border  1px solid black

User · Answer

If you want the two divs to be displayed one above the other  the simplest answer is to remove the float  left from the css declaration  as this causes them to collapse to the size of their contents  or the css defined size   and  well float up against each other   Alternatively  you could simply add clear both  to the divs  which will force the floated content to clear previous floats

User · Answer

You don t even need the float left   It seems the default behavior is to render one below the other  if it doesn t happen it s because they are inheriting some style from above   CSS    wrapper      margin-left auto      margin-right auto      height auto       width auto     lt  style gt    HTML     lt div id  wrapper  gt       lt div id  inner1  gt inner1 lt  div gt       lt div id  inner2  gt inner2 lt  div gt   lt  div gt

[html] arranging div one below the other

Examples related to html

Examples related to css