How to split page into 4 equal parts

Question

I want to divide my page into four equal parts  each of same height and width  50-50     I don t want to use JavaScript  I want blocks   lt div gt s  to be resized automatically  and relatively  if the browser window is resized   I have not worked with CSS for a long time  I ve no idea how to handle this

User · Answer

Some good answers here but just adding an approach that won t be affected by borders and padding    lt style type  text css  gt  html  body width  100   height  100   padding  0  margin  0  div position  absolute  padding  1em  border  1px solid  000   nw background   f09  top  0  left  0  right  50   bottom  50    ne background   f90  top  0  left  50   right  0  bottom  50    sw background   009  top  50   left  0  right  50   bottom  0   se background   090  top  50   left  50   right  0  bottom  0   lt  style gt    lt div id  nw  gt test lt  div gt   lt div id  ne  gt test lt  div gt   lt div id  sw  gt test lt  div gt   lt div id  se  gt test lt  div gt

User · Answer

Similar to other posts  but with an important distinction to make this work inside a div   The simpler answers aren t very copy-paste-able because they directly modify div or draw over the entire page   The key here is that the containing div dividedbox has relative positioning  allowing it to sit nicely in your document with the other elements  while the quarters within have absolute positioning  giving you vertical horizontal control inside the containing div   As a bonus  text is responsively centered in the quarters   HTML              lt head gt     lt meta charset  utf-8  gt     lt title gt Box model lt  title gt     lt link rel  stylesheet  href  style css  gt   lt  head gt    lt body gt     lt h1 id  title  gt Title Bar lt  h1 gt     lt div id  dividedbox  gt       lt div class  quarter  id  NW  gt         lt p gt NW lt  p gt       lt  div gt       lt div class  quarter  id  NE  gt         lt p gt NE lt  p gt       lt  div gt       lt div class  quarter  id  SE  gt         lt p gt SE lt  p gt       lt  div gt        lt div class  quarter  id  SW  gt         lt p gt SW lt  p gt       lt  div gt     lt  div gt   lt  body gt    lt  html gt    CSS   html  body   height 95       Important to make sure your divs have room to grow in the document     title   background  lightgreen   dividedbox   position  relative  width 100   height 95        for div growth     quarter  position  absolute  width 50   height 50       gives quarters their size      display  flex  justify-content  center  align-items  center      centers text     NW   top 0     left 0      background orange         NE   top 0     left 50     background lightblue      SW   top 50    left 0      background green          SE   top 50    left 50     background red             http   jsfiddle net og0j2d3v

User · Answer

try this    obviously you need to set each div to 25   You then will need to add your content as needed    Hope that helps     lt html gt      lt head gt      lt title gt CSS devide window by 25  horizontally lt  title gt      lt meta http-equiv  content-type  content  text html  charset iso-8859-1    gt      lt style type  text css  media  screen  gt        body        margin 0       padding 0       height 100                top div               height 25          width 100          background-color  009900         margin auto         text-align center               mid1 div               height 25          width 100          background-color  990000         margin auto         text-align center         color  FFFFFF               mid2 div               height 25          width 100          background-color  000000         margin auto         text-align center         color  FFFFFF               bottom div               height 25          width 100          background-color  990000         margin auto         text-align center         color  FFFFFF             lt  style gt      lt  head gt      lt body gt        lt div id  top div  gt Top- height is 25  of window height lt  div gt        lt div id  mid1 div  gt Middle 1 - height is 25  of window height lt  div gt        lt div id  mid2 div  gt Middle 2 - height is 25  of window height lt  div gt        lt div id  bottom div  gt Bottom - height is 25  of window height lt  div gt      lt  body gt    lt  html gt    Tested and works fine  copy the code above into a HTML file  and open with your browser

User · Answer

If you want to have control over where they are placed separate from source code order   Demo  http   jsfiddle net NmL2W    lt div id  NW  gt  lt  div gt   lt div id  NE  gt  lt  div gt   lt div id  SE  gt  lt  div gt    lt div id  SW  gt  lt  div gt    html  body   height 100   margin 0  padding 0   div   position fixed  width 50   height 50     NW   top 0    left 0    background orange     NE   top 0    left 50   background blue       SW   top 50   left 0    background green      SE   top 50   left 50   background red              Note  if you want padding on your regions  you ll need to set the box-sizing to border-box   div                 padding 1em    box-sizing border-box    -moz-box-sizing border-box    -webkit-box-sizing border-box       hellip otherwise your  50   width and height become  50    2em   which will lead to visual overlaps

User · Answer

Demo at http   jsfiddle net CRSVU   x000D   x000D  html  body     height  100     padding  0    margin  0     div     width  50     height  50     float  left      div1     background   DDD      div2     background   AAA      div3     background   777      div4     background   444    x000D   lt div id  div1  gt  lt  div gt   lt div id  div2  gt  lt  div gt   lt div id  div3  gt  lt  div gt   lt div id  div4  gt  lt  div gt  x000D   x000D   x000D

User · Answer

I did not want to add style to  lt body gt  tag and  lt html gt  tag   x000D   x000D   quodrant      width  100       height  100vh      margin  0      padding  0      qtop   qbottom      width  100       height  50vh      quodrant1   quodrant2   quodrant3   quodrant4      display  inline      float  left      width  50       height  100       quodrant1      top  0      left  50vh      background-color  red      quodrant2      top  0      left  0      background-color  yellow      quodrant3      top  50vw      left  0      background-color  blue      quodrant4       top  50vw      left  50vh      background-color  green    x000D   lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt       lt meta charset  UTF-8  gt       lt title gt Document lt  title gt       lt link type  text css  rel  stylesheet  href  main css    gt   lt  head gt   lt body gt    lt div class  quodrant  gt       lt div class  qtop  gt           lt div class  quodrant1  gt  lt  div gt           lt div class  quodrant2  gt  lt  div gt       lt  div gt       lt div class  qbottom  gt           lt div class  quodrant3  gt  lt  div gt           lt div class  quodrant4  gt  lt  div gt       lt  div gt   lt  div gt    lt script type  text javascript  src  main js  gt  lt  script gt   lt  body gt   lt  html gt  x000D   x000D   x000D   Or making it looks nicer   x000D   x000D   quodrant      width  100       height  100vh      margin  0      padding  0      qtop   qbottom      width  96       height  46vh      quodrant1   quodrant2   quodrant3   quodrant4      display  inline      float  left      width  46       height  96       border-radius  30px      margin  2       quodrant1      background-color   948be5      quodrant2      background-color   22e235      quodrant3      background-color   086e75      quodrant4       background-color   7cf5f9    x000D   lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt       lt meta charset  UTF-8  gt       lt title gt Document lt  title gt       lt link type  text css  rel  stylesheet  href  main css    gt   lt  head gt   lt body gt    lt div class  quodrant  gt       lt div class  qtop  gt           lt div class  quodrant1  gt  lt  div gt           lt div class  quodrant2  gt  lt  div gt       lt  div gt       lt div class  qbottom  gt           lt div class  quodrant3  gt  lt  div gt           lt div class  quodrant4  gt  lt  div gt       lt  div gt   lt  div gt    lt script type  text javascript  src  main js  gt  lt  script gt   lt  body gt   lt  html gt  x000D   x000D   x000D

[html] How to split page into 4 equal parts?

Examples related to html

Examples related to css