CODEWITHSUNDEEP
htmlcss
José Vieiros
José Vieiros

Reputation: 75

How to place two divs next to each other?

I am trying to make a very simple .html for the purpose of learning.

I'm trying to put two divs each next to each other, but I can not accomplish that.

So far I managed to do it, but if I add the property of the "width" it goes down, if I put a float: left; It works but the other div does not fill the rest of the page. .

Style

#video{

    width: 50%;
    height: 100%;
    border-style: solid;
    float: left;
}
#chat{

    width: 50%;
    height: 100%;
    border-style: solid;
    float: left;
}

#caja{

    overflow: hidden;

}


</head>
   <body>
     <div id="caja">
       <div id="video">
       TEST
       </div>
     <div id="chat">
     TEST
     </div>
   </div>
</body>

Upvotes: 2

Views: 2892

Answers (6)

Shubham Laad
Shubham Laad

Reputation: 40

*{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Add this property also due to border on div total width of div will be 50% + width of border and this property include border in width.

Upvotes: -1

curtybear
curtybear

Reputation: 1538

I would drop floats and use flexbox.

Here is a codepen I made with a bunch of goodies.

See the Pen Simple flexbox layout by Craig Curtis (@craigocurtis) on CodePen.

HTML

 <div id="caja" class="flex-container fullheight fullwidth">
   <div id="video" class="flex-item-6 flex-container-vh-center">
     <div class="flex-item">Video</div>
   </div>
   <div id="chat" class="flex-item-6 flex-container-vh-center">
       <div class="flex-item">Chat</div>
   </div>
 </div>

CSS

/* body reset - to get rid of default margins */
body {
    margin: 0;
}

/* basic horizontal alignment */
.flex-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
/* based off of 12-column layout (like Bootstrap) */
.flex-item-6 {
   -webkit-flex: 0 1 50%;
    -ms-flex: 0 1 50%;
    flex: 0 1 50%;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}
/* perfect vertical and horizontal centering */
.flex-container-vh-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;    
}
/* simple flex item child maintaining original dimensions */
.flex-item {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}
/* full height */
.fullheight {
    /* a nice way to get the viewport height in percentage */
    min-height: 100vh;
}
.fullwidth {
    /* another good way to get the viewport width in percentage */
    width: 100vw;
}
#caja {
    /* I can relax! */
}
#video, #chat {
    /* rems are better than px since px keep getting smaller. rems are units based off of hte root font size, and don't change */
    border: 0.25rem solid black;
    color: white;
    font-size: 4rem;
    font-family: sans-serif; /* a more readable font family */
}
#video {
    /* just a fun gradient with ridiculous html colors */
    background: linear-gradient(lime,tomato);  
}
#chat {
    /* a better way of controlling colors via rgba alpha scale, good for transparent-esque overlays */
    background: linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.75));
}
  1. Drop floats, because they pull content out of the normal flow and get real buggy and require clearfixes, use flexbox instead.
  2. Use reusable classes instead of id's.
  3. This code may look daunting, but there is a super easy way to create quick layouts. Play with Flexy Box - it will solve nearly all of your layout headaches! http://the-echoplex.net/flexyboxes/

Upvotes: -1

Danail Videv
Danail Videv

Reputation: 783

You could use another approach with flexbox:

#video {
    width:50%;
    border-style: solid;
}

#chat {
    width:50%;
    border-style: solid;
}

#caja {
  display: flex;
  flex-wrap: nowrap;
}

Upvotes: 1

Vahe
Vahe

Reputation: 1841

Use display: inline with width of 50% for inner divs.

The following css would resolve the issue.

CSS

 #video{
        width: 50%;
        height: 100%;
        border-style: solid;
        display: inline;
        box-sizing: border-box;
    }
    #chat{

        width: 50%;
        height: 100%;
        border-style: solid;
        display: inline;
        box-sizing: border-box;

    }

    #caja{
       width: 100%;
    }

HTML

 <div id="caja">
       <div id="video">
       TEST
       </div>
     <div id="chat">
     TEST
     </div>
   </div>

https://jsfiddle.net/uo5qfj2t/

Upvotes: 1

hello
hello

Reputation: 9

The border is part of the equation although you haven't specified a size. Border-box would set the border inside the box. Not sure if this is different in each browser or not.

MDN box-sizing

Upvotes: 1

Psi
Psi

Reputation: 6783

Your border overflows here.

Try setting box-sizing: border-box to both divs:

#video{

    width: 50%;
    height: 100%;
    border-style: solid;
    float: left;
    box-sizing: border-box;
}
#chat{

    width: 50%;
    height: 100%;
    border-style: solid;
    float: left;
    box-sizing: border-box;
}

Upvotes: 2

Related Questions