CODEWITHSUNDEEP
htmlcss
L. Wolf
L. Wolf

Reputation: 86

Align two divs near each other

I am trying to align two divs next to each other and am having some problems with it. I looked up many questions in stack overflow relating to this but nothing seems to help me.

Anyone can see anything wrong with my code? The second div starts off lower down than the first one, and I also want a gap between the two Thanks in advance

(I tried with and without the vertical align: top)

#parent {
  width: 96%;
}

#Div1 {
  float: left;
  width: 46%;
  left: 1%;
  border: 1px solid rgba(0, 0, 0, 1);
  vertical-align: top
}

#Div2 {
  float: left;
  width: 46%;
  left: 49%;
  border: 1px solid rgba(0, 0, 0, 1);
  vertical-align: top
}
<div id="parent">
  <div id="Div1">some text</div>
  <div id="Div2">some more text</div>
  <br style="clear: both;" />
</div>

Upvotes: 0

Views: 176

Answers (5)

Dhara Bhalala
Dhara Bhalala

Reputation: 224

  1. make one common div for block1 and block 2
  2. apply css.

html:

<div class="main">
<div class="block1">---</div>
<div class="block2">---</div>
</div>

css:

.main
{
   width:suitable size(block1+block2) in pixel
   margin:0 auto;
}
.block1
{
width:block1_width;
float:left;
}
.block2
{
width:block2_width;
float:right;
}

Upvotes: 0

Gurkan İlleez
Gurkan İlleez

Reputation: 1583

#Div1 {
   box-sizing: border-box;
   float: left;
   width: 45%;
   border: 1px solid rgba(0, 0, 0, 1);
   vertical-align: top;
}

#Div2 {
    float: left;
    box-sizing: border-box;
    width: 45%;
    left: 5%;
    border: 1px solid rgba(0, 0, 0, 1);
    vertical-align: top;
    position: relative;
}

Upvotes: 0

Johannes
Johannes

Reputation: 67799

Make them both display: inline-block;s, remove the float and put a margin-right on the left one.

#parent {
  width: 96%;
}

#Div1 {
  display: inline-block;
  width: 46%;
  border: 1px solid rgba(0, 0, 0, 1);
  margin-right: 10px;
}

#Div2 {
  display: inline-block;
  width: 46%;
  border: 1px solid rgba(0, 0, 0, 1);
}
<div id="parent">
  <div id="Div1">some text</div>
  <div id="Div2">some more text</div>
</div>

Upvotes: 0

nik_m
nik_m

Reputation: 12106

You better use flexbox instead of float: left float: right. Flexbox will make your life much easier!

Now for your question:

#parent {
    display: flex;
    justify-content: space-between;
}

That's it! See how easy was with flexbox?

Upvotes: 1

Ozoid
Ozoid

Reputation: 149

Remove the left:% and the parent width%

#parent {
}

#Div1 {
  float: left;
  width: 46%;
  border: 1px solid rgba(0, 0, 0, 1);
  vertical-align: top
}

#Div2 {
  float: left;
  width: 46%;
  border: 1px solid rgba(0, 0, 0, 1);
  vertical-align: top
}

https://jsfiddle.net/pzj7nop6/

Upvotes: 0

Related Questions