How to keep the two div tag in one line vertically?

Question

I have tried every option but i am unable to keep the div in one line.Please help me out. I have attached the code

.showdetailsleft {
  margin: 1%;
  width: 60%;
  padding: 1%;
  float: left;
}

.showdetailsright {
  width: 40%;
  display: inline-block;
  padding: 1%;
  float: right;
}

<div class="showdetailsleft">
  <label>Course Information</label>
  <hr class="divider">
  <p>Course Summary</p>
  <p>je fiu ewfi u ew iub fiu ewb iu bfi weu bf iub qiu eiu biwe eu ib fiu we ube wiu fbew iuw ebfi uwe fi u e biuw weubf iwe ub fiw iwebf iuw ebiw ebfi weu b uwef biuw ebfiw weiu fei wub iu biweh git ro inna db wo nwq ivb foiqw noqj giw ejj bb</p>
  <div class="showdetailsright">
    <label>How to Enroll</label>
    <hr class="divider">
    <p>je fiu ewfi u ew iub fiu ewb iu bfi weu bf iub qiu eiu biwe eu ib fiu we ube wiu fbew iuw ebfi uwe fi u e biuw weubf iwe ub fiw iwebf iuw ebiw ebfi weu b uwef biuw ebfiw weiu fei wub iu biweh git ro inna db wo nwq ivb foiqw noqj giw ejj bb</p>
  </div>
</div>

Vertically or Horizontally ..? coz you are saying about the Div's in line so i am asking — Himesh Aadeshara, Aug 13 '15 at 11:36
Can u share your mail id so i can take the help from u??Delete it after sometime — shakira, Aug 13 '15 at 12:32

Himesh Aadeshara · Answer 1 · 2015-08-13T12:23:54.310

Hi Shakira here it's your desired solution

please check it out

.wrapper{
    display:block;   
}
.showdetailsleft{   
 margin:1%;
 width:55%;
 padding:1%;
    float:left;
}
.showdetailsright{
 width:39%; 
 padding:1%;
    float:right;
}

<div class="wrapper">
    <div class="showdetailsleft">
    <label>Course Information</label>
    <hr class="divider">
        <p>Course Summary</p>
        <p>je fiu ewfi u ew iub fiu ewb iu bfi weu bf iub qiu eiu biwe eu ib fiu we ube wiu fbew iuw ebfi uwe fi u e biuw weubf iwe ub fiw iwebf iuw ebiw ebfi weu b uwef biuw ebfiw weiu fei wub iu biweh git ro inna db wo nwq ivb foiqw noqj giw ejj bb</p>
</div>
<div class="showdetailsright">
    <label>How to Enroll</label>
    <hr class="divider">
        <p>je fiu ewfi u ew iub fiu ewb iu bfi weu bf iub qiu eiu biwe eu ib fiu we ube wiu fbew iuw ebfi uwe fi u e biuw weubf iwe ub fiw iwebf iuw ebiw ebfi weu b uwef biuw ebfiw weiu fei wub iu biweh git ro inna db wo nwq ivb foiqw noqj giw ejj bb</p>
</div>
</div>

here is the demo for this code DEMO

Here why it will not work with 60%-40% ratio to both div

@shakira it's because browser's size is 100%. now if you see that (1st div's width(60%) + 1st div's padding(1%) +1st div's margin + 2st div's width(40%) + 2st div's padding(1%) +2st div's margin ) always more than 100%. so next div will come in down that's why it will not work and you need to adjust those width.

Thank you so much it worked but when i increase my width to 60 to 40 then the second div comes below the first.. why is it so? — shakira, Aug 13 '15 at 12:07
@shakira it's because browser's size is 100% now if you see that **(1st div's width(60%) + 1st div's padding(1%) +1st div's margin + 2st div's width(40%) + 2st div's padding(1%) +2st div's margin ) always more than 100%** so next div will come in down that's why it will not work and you need to adjust those width. — Himesh Aadeshara, Aug 13 '15 at 12:22

score 1 · Accepted Answer · answered Aug 13 '15 at 11:43

1

You had one div contained within the other div which is why it could neever vertically align to the top (the right div) . I adjusted the widths to account for padding and margins.

body {
  margin: 0!important;
  padding: 0!important;
}
.showdetailsleft {
  display: inline-block;
  margin: 1%;
  width: 56%;
  padding: 1%;
  float: left;
  vertical-align: top;
  position: relative;
}
.showdetailsright {
  margin-top: 1%;
  width: 38%;
  display: inline-block;
  vertical-align: top;
  padding: 1%;
  position: relative;
}

<div class="showdetailsleft">
  <label>Course Information</label>
  <hr class="divider">
  <p>Course Summary</p>
  <p>je fiu ewfi u ew iub fiu ewb iu bfi weu bf iub qiu eiu biwe eu ib fiu we ube wiu fbew iuw ebfi uwe fi u e biuw weubf iwe ub fiw iwebf iuw ebiw ebfi weu b uwef biuw ebfiw weiu fei wub iu biweh git ro inna db wo nwq ivb foiqw noqj giw ejj bb</p>
</div>
<div class="showdetailsright">
  <label>How to Enroll</label>
  <hr class="divider">
  <p>je fiu ewfi u ew iub fiu ewb iu bfi weu bf iub qiu eiu biwe eu ib fiu we ube wiu fbew iuw ebfi uwe fi u e biuw weubf iwe ub fiw iwebf iuw ebiw ebfi weu b uwef biuw ebfiw weiu fei wub iu biweh git ro inna db wo nwq ivb foiqw noqj giw ejj bb</p>
</div>

answered Aug 13 '15 at 11:43

Rachel Gallen

27,943
21
72
81

Thank you it worked but when increase my width the second div is getting below the first..Why is so? – shakira Aug 13 '15 at 12:05
because you have margins and padding on your divs, you must take that into consideration – Rachel Gallen Aug 13 '15 at 12:06
a margin of 1% adds a margin of 1 on all sides, the same for padding, and body has natural padding id you don't remove it – Rachel Gallen Aug 13 '15 at 12:07
56+2% margin+2% padding is 60, and 38 +2% padding is 40 – Rachel Gallen Aug 13 '15 at 12:09
ok i want width of 70 and 30 so i also have to change the margin and padding? – shakira Aug 13 '15 at 12:09
you just have to change the main widths up one by 10 and minus the other by 10, you can leave the padding and margins the same – Rachel Gallen Aug 13 '15 at 12:12
yes ofcourse u vil get an upvote:) But one thing i am not getting is that in .showdetailsrights class the width should be 26% because you said margin 1% padding1% will be padding 30?? – shakira Aug 13 '15 at 12:18

score 0 · Answer 3 · edited May 23 '17 at 11:51

0

You can use the below solution and modify it for your needs. Same question have been asked here if you want more insight.

This should help you out:

Div 1 -- on the right side

.showdetailsleft 
{
  float: right;
  width: 200px;
}

Div 2 -- on the left of Div 1, covering the entire available area

.showdetailsright
{
  float: left;
  margin-right: 200px;
}

Hope this helps you out.

edited May 23 '17 at 11:51

Community

1
1

answered Aug 13 '15 at 11:48

M3o

143
1
1
12

How to keep the two div tag in one line vertically?

3 Answers3