CODEWITHSUNDEEP
htmlcss
shakira
shakira

Reputation: 125

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

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>

Upvotes: 0

Views: 184

Answers (3)

Himesh Aadeshara
Himesh Aadeshara

Reputation: 2131

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.

Upvotes: 2

M3o
M3o

Reputation: 143

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.

Upvotes: 0

Rachel Gallen
Rachel Gallen

Reputation: 28583

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>

Upvotes: 1

Related Questions