Help (Solved) Doing something with hovers, but can't get rid of an empty space bellow code!

[Necessity4Fun]

Welcome to a web-game I like to call 'What simple coding thing did Nessy mess up this time?', today's undesired guest is a huge space that won't go away even with 'nobr's in place!!

But really, though, where did this gap come from??

Sightings of the offender:

Spoiler: Preview

[div class=Ahover]Brown[/div][div class=Chover]Pale[/div][div class=Jhover]Green[/div][div class=Khover]Blue[/div]
[class=Ahover] background-color: white; height: 490px; width: 280px; opacity: 0.0; position: relative; top: -542px; left: 33px; border-top-left-radius: 13px; border-bottom-left-radius: 13px; [/class] [class name=Ahover state=hover] background-image: url(https://orig00.deviantart.net/38f9/f/2016/250/3/8/chip_it__cubes_by_necessity4fun-dagvoiq.png); background-size: no-repeat; opacity: 1; [/class] [class=Chover] background-color: white; height: 490px; width: 280px; opacity: 0.0; position: relative; top: -1032px; left: 323px; [/class] [class name=Chover state=hover] background-image: url(https://orig00.deviantart.net/38f9/f/2016/250/3/8/chip_it__cubes_by_necessity4fun-dagvoiq.png); background-size: no-repeat; opacity: 1; [/class] [class=Jhover] background-color: white; height: 490px; width: 280px; opacity: 0.0; position: relative; top: -1522px; left: 613px; [/class] [class name=Jhover state=hover] background-image: url(https://orig00.deviantart.net/38f9/f/2016/250/3/8/chip_it__cubes_by_necessity4fun-dagvoiq.png); background-size: no-repeat; opacity: 1; [/class] [class=Khover] background-color: white; height: 490px; width: 280px; opacity: 0.0; position: relative; top: -2012px; left: 903px; border-top-right-radius: 13px; border-bottom-right-radius: 13px; [/class] [class name=Khover state=hover] background-image: url(https://orig00.deviantart.net/38f9/f/2016/250/3/8/chip_it__cubes_by_necessity4fun-dagvoiq.png); background-size: no-repeat; opacity: 1; [/class]

Spoiler: The Code

[div=width: 1160px; height: 500px; background-color: #000000; margin: auto; padding-top: 10px; padding-left: 10px; border-radius: 20px;][div=width: 280px; height: 490px; background-color: #baa989; border-top-left-radius: 13px; border-bottom-left-radius: 13px;][/div][div=width: 280px; height: 490px; background-color: #eee0cb; position: relative; left: 290px; top: -490px;][/div][div=width: 280px; height: 490px; background-color: #839788; position: relative; left: 580px; top: -980px;][/div][div=width: 280px; height: 490px; background-color: #bfd7ea; position: relative; left: 870px; top: -1470px; margin-right: 0px; border-top-right-radius: 13px; border-bottom-right-radius: 13px;][/div][/div]

[div class=Ahover]Brown[/div][div class=Chover]Pale[/div][div class=Jhover]Green[/div][div class=Khover]Blue[/div]
[nobr]
[class=Ahover]
background-color: white;
height: 490px;
width: 280px;
opacity: 0.0;
position: relative;
top: -542px;
left: 45px;
border-top-left-radius: 13px;
border-bottom-left-radius: 13px;
[/class]

[class name=Ahover state=hover]
background-image: url(https://orig00.deviantart.net/38f9/f/2016/250/3/8/chip_it__cubes_by_necessity4fun-dagvoiq.png);
background-size: no-repeat;
opacity: 1;
[/class]

[class=Chover]
background-color: white;
height: 490px;
width: 280px;
opacity: 0.0;
position: relative;
top: -1032px;
left: 335px;
[/class]

[class name=Chover state=hover]
background-image: url(https://orig00.deviantart.net/38f9/f/2016/250/3/8/chip_it__cubes_by_necessity4fun-dagvoiq.png);
background-size: no-repeat;
opacity: 1;
[/class]

[class=Jhover]
background-color: white;
height: 490px;
width: 280px;
opacity: 0.0;
position: relative;
top: -1522px;
left: 625px;
[/class]

[class name=Jhover state=hover]
background-image: url(https://orig00.deviantart.net/38f9/f/2016/250/3/8/chip_it__cubes_by_necessity4fun-dagvoiq.png);
background-size: no-repeat;
opacity: 1;
[/class]

[class=Khover]
background-color: white;
height: 490px;
width: 280px;
opacity: 0.0;
position: relative;
top: -2012px;
left: 915px;
border-top-right-radius: 13px;
border-bottom-right-radius: 13px;
[/class]

[class name=Khover state=hover]
background-image: url(https://orig00.deviantart.net/38f9/f/2016/250/3/8/chip_it__cubes_by_necessity4fun-dagvoiq.png);
background-size: no-repeat;
opacity: 1;
[/class]
[/nobr]

 

[Fable]

When you use positioning, it only move the div, but the space it produced remains, resulting in that large space. Use margins. Or wrap the whole code in an overflow:hidden;

 

[Necessity4Fun]

When you use positioning, it only move the div, but the space it produced remains, resulting in that large space. Use margins. Or wrap the whole code in an overflow:hidden;

Ahhh... Thanks! I did suspect that the space had appeared after the positionings... I'm not entirely sure what you mean tho. If i put another div with the overflow then the hovers stop working and I honestly don't know how to move things around with margins instead.

Uhh, would it be too troublesome to show me how to fix it? I have absolutely no idea of what I'm doing most of the time ^^'
And examples just really really help...

 

[Fable]

Ahhh... Thanks! I did suspect that the space had appeared after the positionings... I'm not entirely sure what you mean tho. If i put another div with the overflow then the hovers stop working and I honestly don't know how to move things around with margins instead.

Uhh, would it be too troublesome to show me how to fix it? I have absolutely no idea of what I'm doing most of the time ^^'
And examples just really really help...

How exactly do you want the hovers to work, etc? Like for me, they are not actually inside of the "box" but to the left of it. Not sure if that was intentional or accidental.

 

[Necessity4Fun]

How exactly do you want the hovers to work, etc? Like for me, they are not actually inside of the "box" but to the left of it. Not sure if that was intentional or accidental.

Ahh could be my huge display at work... They're supposed to be each inside of their respective boxes, so that the image 'replaces' what was once just a plain color.
Does this help?

 

[Fable]

Ahh could be my huge display at work... They're supposed to be each inside of their respective boxes, so that the image 'replaces' what was once just a plain color.
Does this help?

Yeah, cause this is how it appears for me. X3

Honestly, the way the code is... I am going to re-do the whole thing for ya X3

 

[Necessity4Fun]

Yeah, cause this is how it appears for me. X3
View attachment 394725
Honestly, the way the code is... I am going to re-do the whole thing for ya X3

Yep, definitely my display dimensions at work here XD

I'm going to assume 'Messy' fits the description, I am not very good with practicality, I admit... Ahhh, thank you very much! And sorry for all the trouble ^^'

 

[Fable]

Yep, definitely my display dimensions at work here XD

I'm going to assume 'Messy' fits the description, I am not very good with practicality, I admit... Ahhh, thank you very much! And sorry for all the trouble ^^'

Yeah, because you used positioning entirely to get the boxes to sit next to each other, it's honestly easier to re-do it than fix. X3

 

[Necessity4Fun]

Yeah, because you used positioning entirely to get the boxes to sit next to each other, it's honestly easier to re-do it than fix. X3

Like I said, I've never thought of using margin to move things before! Ever since we had HTML in the site, it's always been positioning!!
You're the first person to tell me anything of the sort... Had this problem not happened, I might have never known! XD

 

[Lyro]

Positioning should really be used as a last resort, when you really need a precise effect. It's better to just use the browser's natural flow most of the time (more responsive for mobile devices, too).

 

[Fable]

Okay, here is the rewrite.
[class=wrapper] width:1000px; height:500px; margin:auto; background-color:#ccc; border-radius: 13px 13px 13px 13px; -moz-border-radius: 13px 13px 13px 13px; -webkit-border-radius: 13px 13px 13px 13px; border: 10px solid #000000; [/class] [class=box1] display:inline-block; vertical-align:top; width:calc(25% - 20px); height:490px; background-color:#CFDBD5; border-right:10px solid #000000; padding:5px; [/class] [class=boxhover1] position:relative; opacity:0.0; display:inline-block; vertical-align:top; width:100%; height:490px; margin:-26px -5px -5px -5px; background-color:#000; border-right:10px solid #000000; padding:5px; [/class] [class name=boxhover1 state=hover] position:relative; opacity:1.0; display:inline-block; vertical-align:top; width:100%; height:490px; margin:-26px -5px -5px -5px; background-color:#23F0C7; border-right:10px solid #000000; padding:5px; [/class] [class=box2] display:inline-block; vertical-align:top; width:calc(25% - 20px); height:490px; background-color:#E8EDDF; border-right:10px solid #000000; padding:5px; [/class] [class=boxhover2] position:relative; opacity:0.0; display:inline-block; vertical-align:top; width:100%; height:490px; margin:-26px -5px -5px -5px; background-color:#000; border-right:10px solid #000000; padding:5px; [/class] [class name=boxhover2 state=hover] position:relative; opacity:1.0; display:inline-block; vertical-align:top; width:100%; height:490px; margin:-26px -5px -5px -5px; background-color:#23F0C7; border-right:10px solid #000000; padding:5px; [/class] [class=box3] display:inline-block; vertical-align:top; width:calc(25% - 20px); height:490px; background-color:#F5CB5C; border-right:10px solid #000000; padding:5px; [/class] [class=boxhover3] position:relative; opacity:0.0; display:inline-block; vertical-align:top; width:100%; height:490px; margin:-26px -5px -5px -5px; background-color:#000; border-right:10px solid #000000; padding:5px; [/class] [class name=boxhover3 state=hover] position:relative; opacity:1.0; display:inline-block; vertical-align:top; width:100%; height:490px; margin:-26px -5px -5px -5px; background-color:#23F0C7; border-right:10px solid #000000; padding:5px; [/class] [class=box4] display:inline-block; vertical-align:top; width:calc(25% - 10px); height:490px; background-color:#C08552; padding:5px; [/class] [class=boxhover4] position:relative; opacity:0.0; display:inline-block; vertical-align:top; width:100%; height:490px; margin:-26px -5px -5px -5px; background-color:#000; border-right:10px solid #000000; padding:5px; [/class] [class name=boxhover4 state=hover] position:relative; opacity:1.0; display:inline-block; vertical-align:top; width:100%; height:490px; margin:-26px -5px -5px -5px; background-color:#23F0C7; border-right:10px solid #000000; padding:5px; [/class]

[div class=wrapper][div class=box1]asd[div class=boxhover1]dsa[/div][/div][div class=box2]asd[div class=boxhover2]dsa[/div][/div][div class=box3]asd[div class=boxhover3]dsa[/div][/div][div class=box4]asd[div class=boxhover4]dsa[/div][/div][/div]

Spoiler: code

Nec's code re-write.
[nobr]
[class=wrapper]
width:1000px;
height:500px;
margin:auto;
background-color:#ccc;
border-radius: 13px 13px 13px 13px;
-moz-border-radius: 13px 13px 13px 13px;
-webkit-border-radius: 13px 13px 13px 13px;
border: 10px solid #000000;
[/class]

[class=box1]
display:inline-block;
vertical-align:top;
width:calc(25% - 20px);
height:490px;
background-color:#CFDBD5;
border-right:10px solid #000000;
padding:5px;
[/class]

[class=boxhover1]
position:relative;
opacity:0.0;
display:inline-block;
vertical-align:top;
width:100%;
height:490px;
margin:-26px -5px -5px -5px;
background-color:#000;
border-right:10px solid #000000;
padding:5px;
[/class]

[class name=boxhover1 state=hover]
position:relative;
opacity:1.0;
display:inline-block;
vertical-align:top;
width:100%;
height:490px;
margin:-26px -5px -5px -5px;
background-color:#23F0C7;
border-right:10px solid #000000;
padding:5px;
[/class]

[class=box2]
display:inline-block;
vertical-align:top;
width:calc(25% - 20px);
height:490px;
background-color:#E8EDDF;
border-right:10px solid #000000;
padding:5px;
[/class]

[class=boxhover2]
position:relative;
opacity:0.0;
display:inline-block;
vertical-align:top;
width:100%;
height:490px;
margin:-26px -5px -5px -5px;
background-color:#000;
border-right:10px solid #000000;
padding:5px;
[/class]

[class name=boxhover2 state=hover]
position:relative;
opacity:1.0;
display:inline-block;
vertical-align:top;
width:100%;
height:490px;
margin:-26px -5px -5px -5px;
background-color:#23F0C7;
border-right:10px solid #000000;
padding:5px;
[/class]

[class=box3]
display:inline-block;
vertical-align:top;
width:calc(25% - 20px);
height:490px;
background-color:#F5CB5C;
border-right:10px solid #000000;
padding:5px;
[/class]

[class=boxhover3]
position:relative;
opacity:0.0;
display:inline-block;
vertical-align:top;
width:100%;
height:490px;
margin:-26px -5px -5px -5px;
background-color:#000;
border-right:10px solid #000000;
padding:5px;
[/class]

[class name=boxhover3 state=hover]
position:relative;
opacity:1.0;
display:inline-block;
vertical-align:top;
width:100%;
height:490px;
margin:-26px -5px -5px -5px;
background-color:#23F0C7;
border-right:10px solid #000000;
padding:5px;
[/class]

[class=box4]
display:inline-block;
vertical-align:top;
width:calc(25% - 10px);
height:490px;
background-color:#C08552;
padding:5px;
[/class]

[class=boxhover4]
position:relative;
opacity:0.0;
display:inline-block;
vertical-align:top;
width:100%;
height:490px;
margin:-26px -5px -5px -5px;
background-color:#000;
border-right:10px solid #000000;
padding:5px;
[/class]

[class name=boxhover4 state=hover]
position:relative;
opacity:1.0;
display:inline-block;
vertical-align:top;
width:100%;
height:490px;
margin:-26px -5px -5px -5px;
background-color:#23F0C7;
border-right:10px solid #000000;
padding:5px;
[/class]
[/nobr]

[div class=wrapper][div class=box1]asd[div class=boxhover1]dsa[/div][/div][div class=box2]asd[div class=boxhover2]dsa[/div][/div][div class=box3]asd[div class=boxhover3]dsa[/div][/div][div class=box4]asd[div class=boxhover4]dsa[/div][/div][/div]

Now, if you put too much text within the "boxes" it will flow out. If you want it to scroll, you need an overflow and may need to adjust things here and there. Basically, what I did was use inline-blocks to make the main divs line up. Then I placed the hover effect divs inside of those so minimal positioning was needed to get them in the right spot.

 

[Necessity4Fun]

Okay, here is the rewrite.
[class=wrapper] width:1000px; height:500px; margin:auto; background-color:#ccc; border-radius: 13px 13px 13px 13px; -moz-border-radius: 13px 13px 13px 13px; -webkit-border-radius: 13px 13px 13px 13px; border: 10px solid #000000; [/class] [class=box1] display:inline-block; vertical-align:top; width:calc(25% - 20px); height:490px; background-color:#CFDBD5; border-right:10px solid #000000; padding:5px; [/class] [class=boxhover1] position:relative; opacity:0.0; display:inline-block; vertical-align:top; width:100%; height:490px; margin:-26px -5px -5px -5px; background-color:#000; border-right:10px solid #000000; padding:5px; [/class] [class name=boxhover1 state=hover] position:relative; opacity:1.0; display:inline-block; vertical-align:top; width:100%; height:490px; margin:-26px -5px -5px -5px; background-color:#23F0C7; border-right:10px solid #000000; padding:5px; [/class] [class=box2] display:inline-block; vertical-align:top; width:calc(25% - 20px); height:490px; background-color:#E8EDDF; border-right:10px solid #000000; padding:5px; [/class] [class=boxhover2] position:relative; opacity:0.0; display:inline-block; vertical-align:top; width:100%; height:490px; margin:-26px -5px -5px -5px; background-color:#000; border-right:10px solid #000000; padding:5px; [/class] [class name=boxhover2 state=hover] position:relative; opacity:1.0; display:inline-block; vertical-align:top; width:100%; height:490px; margin:-26px -5px -5px -5px; background-color:#23F0C7; border-right:10px solid #000000; padding:5px; [/class] [class=box3] display:inline-block; vertical-align:top; width:calc(25% - 20px); height:490px; background-color:#F5CB5C; border-right:10px solid #000000; padding:5px; [/class] [class=boxhover3] position:relative; opacity:0.0; display:inline-block; vertical-align:top; width:100%; height:490px; margin:-26px -5px -5px -5px; background-color:#000; border-right:10px solid #000000; padding:5px; [/class] [class name=boxhover3 state=hover] position:relative; opacity:1.0; display:inline-block; vertical-align:top; width:100%; height:490px; margin:-26px -5px -5px -5px; background-color:#23F0C7; border-right:10px solid #000000; padding:5px; [/class] [class=box4] display:inline-block; vertical-align:top; width:calc(25% - 10px); height:490px; background-color:#C08552; padding:5px; [/class] [class=boxhover4] position:relative; opacity:0.0; display:inline-block; vertical-align:top; width:100%; height:490px; margin:-26px -5px -5px -5px; background-color:#000; border-right:10px solid #000000; padding:5px; [/class] [class name=boxhover4 state=hover] position:relative; opacity:1.0; display:inline-block; vertical-align:top; width:100%; height:490px; margin:-26px -5px -5px -5px; background-color:#23F0C7; border-right:10px solid #000000; padding:5px; [/class]

[div class=wrapper][div class=box1]asd[div class=boxhover1]dsa[/div][/div][div class=box2]asd[div class=boxhover2]dsa[/div][/div][div class=box3]asd[div class=boxhover3]dsa[/div][/div][div class=box4]asd[div class=boxhover4]dsa[/div][/div][/div]

Spoiler: code

Nec's code re-write.
[nobr]
[class=wrapper]
width:1000px;
height:500px;
margin:auto;
background-color:#ccc;
border-radius: 13px 13px 13px 13px;
-moz-border-radius: 13px 13px 13px 13px;
-webkit-border-radius: 13px 13px 13px 13px;
border: 10px solid #000000;
[/class]

[class=box1]
display:inline-block;
vertical-align:top;
width:calc(25% - 20px);
height:490px;
background-color:#CFDBD5;
border-right:10px solid #000000;
padding:5px;
[/class]

[class=boxhover1]
position:relative;
opacity:0.0;
display:inline-block;
vertical-align:top;
width:100%;
height:490px;
margin:-26px -5px -5px -5px;
background-color:#000;
border-right:10px solid #000000;
padding:5px;
[/class]

[class name=boxhover1 state=hover]
position:relative;
opacity:1.0;
display:inline-block;
vertical-align:top;
width:100%;
height:490px;
margin:-26px -5px -5px -5px;
background-color:#23F0C7;
border-right:10px solid #000000;
padding:5px;
[/class]

[class=box2]
display:inline-block;
vertical-align:top;
width:calc(25% - 20px);
height:490px;
background-color:#E8EDDF;
border-right:10px solid #000000;
padding:5px;
[/class]

[class=boxhover2]
position:relative;
opacity:0.0;
display:inline-block;
vertical-align:top;
width:100%;
height:490px;
margin:-26px -5px -5px -5px;
background-color:#000;
border-right:10px solid #000000;
padding:5px;
[/class]

[class name=boxhover2 state=hover]
position:relative;
opacity:1.0;
display:inline-block;
vertical-align:top;
width:100%;
height:490px;
margin:-26px -5px -5px -5px;
background-color:#23F0C7;
border-right:10px solid #000000;
padding:5px;
[/class]

[class=box3]
display:inline-block;
vertical-align:top;
width:calc(25% - 20px);
height:490px;
background-color:#F5CB5C;
border-right:10px solid #000000;
padding:5px;
[/class]

[class=boxhover3]
position:relative;
opacity:0.0;
display:inline-block;
vertical-align:top;
width:100%;
height:490px;
margin:-26px -5px -5px -5px;
background-color:#000;
border-right:10px solid #000000;
padding:5px;
[/class]

[class name=boxhover3 state=hover]
position:relative;
opacity:1.0;
display:inline-block;
vertical-align:top;
width:100%;
height:490px;
margin:-26px -5px -5px -5px;
background-color:#23F0C7;
border-right:10px solid #000000;
padding:5px;
[/class]

[class=box4]
display:inline-block;
vertical-align:top;
width:calc(25% - 10px);
height:490px;
background-color:#C08552;
padding:5px;
[/class]

[class=boxhover4]
position:relative;
opacity:0.0;
display:inline-block;
vertical-align:top;
width:100%;
height:490px;
margin:-26px -5px -5px -5px;
background-color:#000;
border-right:10px solid #000000;
padding:5px;
[/class]

[class name=boxhover4 state=hover]
position:relative;
opacity:1.0;
display:inline-block;
vertical-align:top;
width:100%;
height:490px;
margin:-26px -5px -5px -5px;
background-color:#23F0C7;
border-right:10px solid #000000;
padding:5px;
[/class]
[/nobr]

[div class=wrapper][div class=box1]asd[div class=boxhover1]dsa[/div][/div][div class=box2]asd[div class=boxhover2]dsa[/div][/div][div class=box3]asd[div class=boxhover3]dsa[/div][/div][div class=box4]asd[div class=boxhover4]dsa[/div][/div][/div]

Now, if you put too much text within the "boxes" it will flow out. If you want it to scroll, you need an overflow and may need to adjust things here and there. Basically, what I did was use inline-blocks to make the main divs line up. Then I placed the hover effect divs inside of those so minimal positioning was needed to get them in the right spot.

Oh wow! Now it has classes for everything as well! That is sooo cool and so practical! +O+ I would have never thought of that ^^'
Pretty sure it will make the things I was yet to do with it a thousand times simpler even~ Thank you so very much!!!!

I do plan on putting text there, but with a new div box that does indeed have overflow applied to it... So that shouldn't be a problem! >w<

Positioning should really be used as a last resort, when you really need a precise effect. It's better to just use the browser's natural flow most of the time (more responsive for mobile devices, too).

This sounds like a really good advice, but since I have no experience with web design whatsoever I don't get what a 'browser's natural flow' even means ^^'
Definitely using the 'margin not positioning' advice in the future tho, thanks for teaching me that one, you two! *bows down in respect*