div table not working with float left and right

Question

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.

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

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

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

Harshit · Accepted Answer · 2021-05-28T13:36:38.350

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>

edited May 28 '21 at 13:36

answered Nov 22 '18 at 07:18

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

score 0 · Answer 2 · answered Nov 22 '18 at 07:20

0

You should use below style.

<style>
.month, .kw, .date, .tag {
    display: flex;
    flex-direction:column;
}
.wrapper {
    display: flex;
}
</style>

answered Nov 22 '18 at 07:20

AddWeb Solution Pvt Ltd

21,025
5
26
57

div table not working with float left and right

2 Answers2