How to put two divs side by side

Question

So I m quite new to writing code  about a few weeks  and I ve hit a wall while writing code for my website  I want to have a layout like this    But I can t figure out how to put the two boxes side by side  One box will be a video explaining my website  while the other box will be a sign up registration form  I want the boxes to be next to each other  with about an inch of separation between them   I also need help with the width of my website s header  Right now it looks like the header doesn t fit on the page  causing a horizontal scroll  Kind of like this     I want it so that the entire website is like one big box  and all the content is inside that box  Can someone please help me  Much appreciated  Thank you in advance

User · Answer

http   jsfiddle net kkobold qMQL5    x000D   x000D   header   x000D      width  100   x000D      background-color  red  x000D      height  30px  x000D    x000D   x000D   container   x000D      width  300px  x000D      background-color   ffcc33  x000D      margin  auto  x000D    x000D   first   x000D      width  100px  x000D      float  left  x000D      height  300px  x000D          background-color  blue  x000D    x000D   second   x000D      width  200px  x000D      float  left  x000D      height  300px  x000D      background-color  green  x000D    x000D   clear   x000D      clear  both  x000D    x000D   lt div id  header  gt  lt  div gt  x000D   lt div id  container  gt  x000D       lt div id  first  gt  lt  div gt  x000D       lt div id  second  gt  lt  div gt  x000D       lt div id  clear  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Based on the layout you gave you can use float left property in css   HTML    lt div id  header  gt  LOGO lt  div gt   lt div id  wrap  gt   lt div id  box1  gt  lt  div gt   lt div id  box2  gt  lt  div gt   lt div id  clear  gt  lt  div gt   lt  div gt   lt div id  footer  gt Footer lt  div gt    CSS  body  margin 0px  height  100      header    background-color  black  height  50px  color  white  font-size 25px        wrap    margin-left 200px  margin-top 300px        box1   width 200px  float  left  height  300px  background-color  black  margin-right  20px     box2  width  200px  float  left  height  300px  background-color  blue     clear   clear  both     footer   width  100   background-color  black  height  50px  margin-top 300px  color  white  font-size 25px  position  absolute

User · Answer

This will work   lt div style  width 800px   gt     lt div style  width 300px  float left   gt  lt  div gt     lt div style  width 300px  float right   gt  lt  div gt   lt  div gt   lt div style  clear  both   gt  lt  div gt

User · Answer

Have a look at CSS and HTML in depth you will figure this out  It just floating the boxes left and right and those boxes need to be inside a same div  http   www w3schools com html html layout asp might be a good resource

User · Answer

lt div style  display  inline  gt       lt div style  width 80   display  inline-block  float left  margin-right  10px   gt  lt  div gt       lt div style  width  19   display  inline-block  border  1px solid red  gt  lt  div gt   lt  div gt

User · Answer

This is just a simple not-responsive  HTML CSS translation of the wireframe you provided     HTML   lt div class  container  gt      lt header gt       lt div class  logo  gt Logo lt  div gt       lt div class  menu  gt Email Password lt  div gt     lt  header gt      lt div class  first-box  gt       lt p gt Video Explaning Site lt  p gt     lt  div gt      lt div class  second-box  gt       lt p gt Sign up Info lt  p gt     lt  div gt      lt footer gt       lt div gt Website Info lt  div gt     lt  footer gt    lt  div gt    CSS   container     width 900px     height  150px     header     width 900px     float left     background  pink     height  50px      logo     float  left    padding  15px     menu     float  right    padding  15px     first-box     width 300px     float left     background  green     height  150px    margin  50px     first-box p     color   ffffff    padding-left  80px    padding-top  50px      second-box     width 300px     height  150px     float right     background  blue    margin  50px     second-box p     color   ffffff    padding-left  110px    padding-top  50px     footer     width 900px     float left     background  black     height  50px    color   ffffff     footer div     padding  15px

User · Answer

Regarding the width of your website  you ll want to consider using a wrapper class to surround your content  this should help to constrain your element widths and prevent them from expanding too far beyond the content     lt style gt   wrapper     width  980px     lt  style gt    lt body gt     lt div class  wrapper  gt        everything else    lt  div gt   lt  body gt    As far as the content boxes go  I would suggest trying to use    lt style gt   boxes     display  inline-block    width  360px    height  360px     leftBox     float  left     rightBox     float  right     lt  style gt    I would spend some time researching the box-object model and all of the  display  properties  They will be forever helpful  Pay particularly close attention to  inline-block   I use it practically every day

User · Answer

I am just giving the code for two responsive divs side by side  x000D   x000D       margin  0    padding  0      parent     display  flex    justify-content  space-around      left     border  1px solid lightgray    background-color  red    width  40       right     border  1px solid lightgray    background-color  green    width  40     x000D   lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt       lt meta charset  UTF-8  gt       lt meta name  viewport  content  width device-width  initial-scale 1 0  gt       lt title gt Document lt  title gt   lt  head gt   lt body gt       lt div id  parent  gt           lt div id  left  gt          lorem ipsum dolor sit emet          lt  div gt           lt div id  right  gt          lorem ipsum dolor sit emet          lt  div gt       lt  div gt   lt  body gt   lt  html gt  x000D   x000D   x000D

[html] How to put two divs side by side

Examples related to html

Examples related to css