0

I am trying to make this table only by using divs because I will use Angular Components in it and, as I know, it's not working with table tag.

enter image description here

This is my code by now, https://codepen.io/teodora-malec/pen/vQdJPr

I tried display: block for month, kv, date and tag and it worked and then I tried 

<div class="wrapper">
      <div class="left">
          <label class="month">MONTH</label>
      </div>
      <div class="right month-name">
          <label> MONTH-NAME & YEAR </label> 
      </div>
  </div>

because I tried the solution from this question: How to place two divs next to each other? and it looks like this

enter image description here

should I put the divs differently or my css code is wrong?

user2004
  • 1,783
  • 4
  • 15
  • 42
  • as per the stackvoerflow link you have mentioned, you have to add `overflow:hidden;` to the class **month-header**. you can find the edited pen here. https://codepen.io/anon/pen/VVQqLP. – Vishwasa Navada K Nov 22 '18 at 07:07
  • that is true, but that overflow propery didn't change anything... – user2004 Nov 22 '18 at 07:11
  • please go through the pen i linked above. I can see the Month, KV labels getting inside the box unlike the screenshot you provided. – Vishwasa Navada K Nov 22 '18 at 07:13

2 Answers2

0

It's a good practice to use the class "clearfix", while playing around with float. Here is the link:What is a clearfix?

Secondly, your structure needs to be slightly modified for better /efficient coding. Though I have adjusted your needs in the provided solution, but my suggestion would be to go through your structure design once again. Here is the working demo: https://jsfiddle.net/posywj78/

Html

<div class="month-header">
  <div class="wrapper clearfix">
      <div class="left">
          <label class="month">MONTH</label>
      </div>
      <div class="right month-name">
          <label> MONTH-NAME & YEAR </label> 
      </div>
  </div>
  <div class="wrapper clearfix">
      <div class="left">
          <label class="kw">KV</label>
      </div>
      <div class="right">
  
      </div>
  </div>
    <div class="wrapper clearfix">
        <div class="left">
            <label class="date">DATE</label>
         </div>
         <div class="right">

         </div>
    </div>
    <div class="wrapper clearfix">
        <div class="left">
            <label class="tag">TAG</label>
        </div>
        <div class="right">

        </div>
    </div>
</div>
Harshit
  • 278
  • 1
  • 5
  • 12
  • I will have a look for clearfix, thanks a lot! Have you changed the structure in the link from codepen? Because I don't see any difference.. – user2004 Nov 22 '18 at 07:23
  • Hi , was updating it , plz check it now and let me know . – Harshit Nov 22 '18 at 07:25
  • I have a question... how cand i make the MONTH-NAME & YEAR div to have the width as large as the space remaning. the way it is in the first photo of my post – user2004 Nov 22 '18 at 07:39
  • you need to set width of both the divs manually. For faster implementation working of these grids/width, try going trough bootstrap tutorial: https://getbootstrap.com/docs/4.0/layout/grid/ – Harshit Nov 22 '18 at 07:44
0

You should use below style.

<style>
.month, .kw, .date, .tag {
    display: flex;
    flex-direction:column;
}
.wrapper {
    display: flex;
}
</style>
AddWeb Solution Pvt Ltd
  • 21,025
  • 5
  • 26
  • 57