-5

Okay so i have a group of four divs of different sizes and would like to display them directly below each other without this over sized gap between them. edit: changed the css so the problem is more visual when the code is run. My problem 

section.season{position:relative;top:5px;left:50%;transform:translateX(-50%);width:100%;max-width:1000px;}
section.season div{float:left;position:relative;background:rgba(217,217,209, 0.2);margin-top:15px;padding:10px;}

section.season ul{display:block;list-style:none;width:100%;}
section.season div.season ul{display:block;}
section.season div.season ul.show{display:block;}
section.season ul li{width:100%;margin-bottom:2px;}
section.season ul li a{padding-left:10px;display:block;background:rgba(217,217,209, 0.2);}
section.season ul li a:hover{background:rgba(25,25,30, 0.4);}

section.season div.season{width:40%;}
<section class='season'>
<div class='season notrans rightp'>
          <a href='javascript:void()' onclick='toggleSeason(1);'>
            <h4 class='notrans'>Div 1</h4></a>
          <ul id='season1'>
          <li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li></ul></div>        <div class='season notrans'>
          <a href='javascript:void()' onclick='toggleSeason(2);'>
            <h4 class='notrans'>Div 2</h4></a>
          <ul id='season2'>
          <li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li></ul></div>        <div class='season notrans rightp'>
          <a href='javascript:void()' onclick='toggleSeason(3);'>
            <h4 class='notrans'>Div 3</h4></a>
          <ul id='season3'>
          <li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li></ul></div>        <div class='season notrans'>
          <a href='javascript:void()' onclick='toggleSeason(4);'>
            <h4 class='notrans'>Div 4</h4></a>
          <ul id='season4'>
          <li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li></ul></div>        <div class='season notrans rightp'>
          <a href='javascript:void()' onclick='toggleSeason(5);'>
            <h4 class='notrans'>Div 5</h4></a>
          <ul id='season5'>
          <li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li></ul></div>        <div class='season notrans'>
          <a href='javascript:void()' onclick='toggleSeason(6);'>
            <h4 class='notrans'>Div 6</h4></a>
          <ul id='season6'>
          <li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li><li><a href='#'>Lines</a></li></ul></div>        <div class='season notrans rightp'>
          <a href='javascript:void()' onclick='toggleSeason(7);'>
            <h4 class='notrans'>Div 7</h4></a>
          <ul id='season7'>
          </ul></div></div>
    </section>
user3740948
  • 7
  • 3
  • 4
    Please edit your question so it contains the relevant code as a Stack Snippet. Check out how to create a [mcve] and also [ask]. – domsson Apr 16 '17 at 23:51
  • And from what I can see, it seems as if you're simply looking for `margin`? – domsson Apr 16 '17 at 23:53
  • i dont really know how to be more specific about it, its difficult to explain. But i already have margin on there which doesnt really keep it close to the sibling above – user3740948 Apr 16 '17 at 23:55
  • Format your code. **margin-top:15px** could be the problem, set it to 0 – vlk Apr 16 '17 at 23:56
  • 2
    For now it isn't about being more specific, it is about providing the relevant information in a proper way. Look at the question up there. Is that properly formatted code? Is there a Stack Snippet? No. It really shouldn't be hard to copy-paste your code and use the buttons of the Stack Overflow editor. Seeing your question history, I urge you to actually read the two links I provided in my first comment. – domsson Apr 16 '17 at 23:57
  • Thanks for the edit. Have you tried replacing `margin-top:15px` with `margin:15px 0 0 0`? – domsson Apr 17 '17 at 00:09
  • I have replaced them but sadly still no change. I added a style to the individual div thats out of place "margin-top:-100px;" which obviously only moves the individual div up but will change as soon as the div on the opposite side changes size. – user3740948 Apr 17 '17 at 00:14
  • #assumption: Your issue is likely with the structure of your divs. Your photo is actually the tell. I can tell by the structure that you have two divs on top of each other, each is the width of its parent div. In each of these you have two floated divs that hold list-items as links. The reason you are unable to place the vertical divs directly on top of each other is the bounding of the very div it resides within. See the comment I made in my initial answer to your issue. I have an example there. – dale landry Apr 17 '17 at 00:43

2 Answers2

0

Best practice: Open your log in Chrome and inspect the style section to see what is causing the CSS to place the gap. Right click your browser in Chrome and select Inspect, then check the right side section for the style attributes. Identify the issue, then adjust the code accordingly in your CSS.

Hack: Add an override in your inline styles if you can not adjust or locate the parent CSS causing the unwanted padding/margin... embedded using Not as good:<style> -> classitem {margin-top:0px !important;} or Better: inline <div style="maring-top:0px !important;"> Implications of using !important

EDIT: 5:57 PM

After further inspection, I believe your issue is likely the structure of your divs, though you have not shown this in your example code update, you have only shown us one of your divs in question and a few lines of your css. You have a bounding issue, not css. I assume you have two divs stacked on top of each other and each is the width of its parent div correct?

*You need to construct two divs and float them side by side using whatever method you want, bootstrap or pure css, js, whatever. Within each of the two horizontally placed divs, place your other two divs on top of each other. This will allow you to place each containers, side by side, divs on top of each other with no horizontal div restrictions. Check out this example using pure CSS here: Check out the code on JFiddle

Or consider revising your code showing all four divs and their containing divs code as well.

Community
  • 1
  • 1
dale landry
  • 7,831
  • 2
  • 16
  • 28
  • I just cant find what it is, if i send you the URL do you think you could maybe source a problem doing it like that? – user3740948 Apr 17 '17 at 00:12
  • @user3740948 Okay, I believe your issue is likely structure of your divs, though you have not shown this in your example update, you have only shown us one of your divs in question. You need to construct two divs and float them side by side using whatever method you want, bootstrap or pure css, js, whatever. Within each of the two div, place your other two divs on top of each other. this will allow you to place each containers, side by side, divs on top of each other with no horizontal div restrictions. Check out this example here: https://jsfiddle.net/vjj2g32u/ – dale landry Apr 17 '17 at 00:36
  • Yeah I thought about making a leftand right div, I'll then have another problem, I want the width of these divs to be 100% on mobile and with the left and right divs will change the order of them – user3740948 Apr 17 '17 at 09:14
  • @user3740948 Replace the hard coded width with 100%. I edited the old fiddle, removing the css to show the div BGs and added 100% width to make the divs flexible. Resize your browser to see the behavior. [New version](https://jsfiddle.net/vjj2g32u/26/) Honestly, you would really be well served using bootstrap for cross platform compatibility with browsers and media ports in terms of resizing; **Just add a class** SO EASY!. – dale landry Apr 18 '17 at 00:52
  • * Also, remember that the sum of the child containing divs widths can not exceed the value of the parent containers width. Width = containers declared width in % and/or px + padding + margin. As long as your two 'side by side' divs added width, within the parent div does not exceed the total width of 100%, everything will stack and float properly and your layout will stretch to any view port/browser size, just use percent. @user3740948 – dale landry Apr 18 '17 at 01:02
0

Give your sections a min-height which matches all.

section.season div.season {width: 40%;min-height: 400px;}

so it doesn't get different heights.

Aravind Prabash
  • 315
  • 2
  • 5