CODEWITHSUNDEEP
csslayouthtml
Justin Meltzer
Justin Meltzer

Reputation: 13548

How to get these two divs side-by-side?

I have two divs that are not nested, one below the other. They are both within one parent div, and this parent div repeats itself. So essentially:

<div id='parent_div_1'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_2'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_3'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

I want to get each pair of child_div_1 and child_div_2 next to each other. How can I do this?

Upvotes: 138

Views: 434058

Answers (10)

abbujaansboy
abbujaansboy

Reputation: 99

First set both the divs' display to inline. then set both widths to 50% make one of them float to the right and one of them float to the left.

Below is an example of the css of 2 divs under 1 parent div

#nameDiv {
display: inline;
width: 50%;
float: left;
}

#picDiv {
display: inline;
width: 50%;
float: right;
}

Upvotes: 0

KushalSeth
KushalSeth

Reputation: 4629

display: flex; is the solution.

use

.header {
    display: flex;
}

for this code:

    <div className="header">
      <div className="logo-container">
        <img
          className="logo"
          src="https://i.pinimg.com/564x/3c/b2/4f/3cb24f7d0defcb91eb51b091325d5f47.jpg"
        />
      </div>
      <div className="nav-items">
        <ul>
          <li>Home</li>
          <li>About Us</li>
          <li>Contact Us</li>
          <li>Cart</li>
        </ul>
      </div>
    </div>

logo-container and nav-items will be shown side to side.

Upvotes: 0

Sol
Sol

Reputation: 770

Using flexbox it is super simple!

#parent_div_1, #parent_div_2, #parent_div_3 {
    display: flex;
}

Fiddle example

Upvotes: 17

Sandeep Gupta
Sandeep Gupta

Reputation: 7250

Using flexbox

   #parent_div_1{
     display:flex;
     flex-wrap: wrap;
  }

Upvotes: 3

Hussein
Hussein

Reputation: 42808

#parent_div_1, #parent_div_2, #parent_div_3 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-right: 10px;
  float: left;
}
.child_div_1 {
  float: left;
  margin-right: 5px;
}

Check working example at http://jsfiddle.net/c6242/1/

Upvotes: 96

axs
axs

Reputation: 1196

I found the below code very useful, it might help anyone who comes searching here

<html>
<body>
    <div style="width: 50%; height: 50%; background-color: green; float:left;">-</div>
    <div style="width: 50%; height: 50%; background-color: blue; float:right;">-</div>
    <div style="width: 100%; height: 50%; background-color: red; clear:both">-</div>
</body>
</html>

Upvotes: 56

Robin Maben
Robin Maben

Reputation: 23044

Since div's by default are block elements - meaning they will occupy full available width, try using -

display:inline-block;

The div is now rendered inline i.e. does not disrupt flow of elements, but will still be treated as a block element.

I find this technique easier than wrestling with floats.

See this tutorial for more - http://learnlayout.com/inline-block.html. I would recommend even the previous articles that lead up to that one. (No, I did not write it)

Upvotes: 150

jiantongc
jiantongc

Reputation: 971

Best that works for me:

 .left{
   width:140px;
   float:left;
   height:100%;
 }

 .right{
   margin-left:140px;
 }


http://jsfiddle.net/jiantongc/7uVNN/

Upvotes: 5

Pranay Rana
Pranay Rana

Reputation: 176896

User float:left property in child div class

check for div structure in detail : http://www.dzone.com/links/r/div_table.html

Upvotes: 2

amit_g
amit_g

Reputation: 31250

Using the style

.child_div_1 {
    float:left
}

Upvotes: 6

Related Questions