CODEWITHSUNDEEP
htmlcss
Saiful Islam Niloy
Saiful Islam Niloy

Reputation: 51

How to wrap outer div element according its child width?

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Card</title>
   <style>
     .container {
       display: flex;
       flex-direction: row;
       background-color: rgb(185, 133, 65);
       border: 2px solid red;
     }
     .left {
       background-color: brown;
     }
     .right {
       background-color: darkcyan;
     }
   </style>
 </head>
 <body>
   <div class="container">
     <div class="left">Name</div>
     <div class="right">Saiful</div>
   </div>
 </body>

Output: output of the code

But i don't want the extra space after the div "saiful" here. I also want to use the feature of display:flex here. How can i do that?

Upvotes: 0

Views: 108

Answers (3)

Syed
Syed

Reputation: 704

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Card</title>
   <style>
     .container {
       display: inline-block;
       flex-direction: column;
       background-color: rgb(185, 133, 65);
       border: 2px solid red;
     }
     .left {
       background-color: brown;
       display:inline-block;
       float:left;
     }
     .right {
       background-color: darkcyan;
       display:inline-block;
       float:left; 
       clear:both;
   
     }
   </style>
 </head>
 <body>
   <div class="container">
     <div class="left">Name</div>
     <div class="right">Saiful</div>
   </div>
 </body>

  1. **display:inline-block;** so it breaks the default div behaviour of spreading out on rest of space.
  2. Break default float flow on child divs by adding float:left; then on second child add additional **clear:both;** to break its flow from previous item.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Card</title>
   <style>
     .container {
       display: inline-block;
       flex-direction: column;
       background-color: rgb(185, 133, 65);
       border: 2px solid red;
     }
     .left {
       background-color: brown;
       display:inline-block;
       float:left;
     }
     .right {
       background-color: darkcyan;
       display:inline-block;
       float:left;
   
     }
   </style>
 </head>
 <body>
   <div class="container">
     <div class="left">Name</div>
     <div class="right">Saiful</div>
   </div>
 </body>

  1. In case you need them aligned next to each other simply remove clear:both; from second child.

UPDATED EXAMPLE with more than one container;

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Card</title>
   <style>
    .navwarper {
       display: inline-block;
       flex-direction: column;
       border: none;
     }
     .container {
       display: inline-block;
       flex-direction: column;
       background-color: rgb(185, 133, 65);
       border: 2px solid red;
        float:left;
     }
     .left {
       background-color: brown;
       display:inline-block;
       float:left;
     }
     .right {
       background-color: darkcyan;
       display:inline-block;
       float:left; 
      
   
     }
   </style>
 </head>
 <body>
  <div class="navwarper">
   <div class="container">
     <div class="left">Name</div>
     <div class="right">Saiful</div>
   </div>
    <div class="container">
     <div class="left">Name</div>
     <div class="right">Saiful</div>
   </div>
    <div class="container">
     <div class="left">Name</div>
     <div class="right">Saiful</div>
   </div>
    <div class="container">
     <div class="left">Name</div>
     <div class="right">Saiful</div>
   </div>
    <div class="container">
     <div class="left">Name</div>
     <div class="right">Saiful</div>
   </div>
   </div>
 </body>

You create a warper div within which container divs are added as child to which you have its own child. technically speaking warper div is grand parent to left and right divs. Again trick is to give float left rule on container div so they align next to each other rather than breaking line.

ANOTHER EXAMPLE (Just in case) have updated original answer in below example there is no grandparent just parent child relationship and you can have as many child's as you want they would align next to each other.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Card</title>
   <style>
    .navwarper {
       display: inline-block;
       flex-direction: column;
       border: none;
     }
     .container {
       display: inline-block;
       flex-direction: column;
       background-color: rgb(185, 133, 65);
       border: 2px solid red;
     
     }
     .left {
       background-color: brown;
       display:inline-block;
       float:left;
     }
     .right {
       background-color: darkcyan;
       display:inline-block;
       float:left; 
      
   
     }
   </style>
 </head>
 <body>
  
   <div class="container">
     <div class="left">Name</div>
     <div class="right">Saiful</div>

     <div class="left">Name</div>
     <div class="right">Saiful</div>

     <div class="left">Name</div>
     <div class="right">Saiful</div>
  
     <div class="left">Name</div>
     <div class="right">Saiful</div>
  
     <div class="left">Name</div>
     <div class="right">Saiful</div>

   </div>
 </body>

PS: it was weirdly breaking on mobile view because because there was typo mistake in code i.e. class container was mis spelled as continer or something like that so it was not in full effect. plus you need media query to fully adjust to view port.

Upvotes: 1

Saiful Islam Niloy
Saiful Islam Niloy

Reputation: 51

Using display: inline-flex; instead of display: flex; can solve the issue.

.container {
       display: inline-flex;
       flex-direction: column;
       background-color: rgb(185, 133, 65);
       border: 2px solid red;
}

Now output: enter image description here

Upvotes: 2

Mir entafaz Ali
Mir entafaz Ali

Reputation: 985

.container {
       display: flex;
       width: fit-content;
       flex-direction: row;
       background-color: rgb(185, 133, 65);
       border: 2px solid red;
     }

Use width: fit-content

Upvotes: 0

Related Questions