[amlin]

I'm not exactly sure how to describe what it is, so I'm calling it hover-thing for now. Basically, I wanted a little hover on the banner. There's a place to hover on the right side of the banner, and then something slides in from the right over top of part of the banner. That's where all the information like the welcome, news, staff, etc. are (will) be found). Now, the whole hover thing works as wanted... Except it stretches my board. You can't tell if you don't scroll over, but it's there nonetheless, the dreaded superwide forum that shouldn't exist. The only way I can make it stop is by putting it into Fixed positioning, but I don't want it to follow when scrolled, I want it to stay positioned over the banner. Absolute and relative stretch the board.

I'm sure you'll see what I'm talking about if you look Here. The red bar on the right of the banner starts the hover. But you'll notice that you can scroll over and see the entire thing and it stretches the board.

Anyone know what's doing this? I found the code on a Tumblr page because I couldn't figure it out even though in the end the layout and coding for it is actually pretty simple... But I still can't figure out how to stop it from stretching

[THE LEVIATHAN]

in the "bannery" div, remove the 'float:left'.

[amlin]

THE LEVIATHAN Unfortunately that didn't do anything other than move the text in my banner down ;( It still stretches the board

[PHARAOH LEAP]

Set the banner image's overflow to hidden; as in, add "overflow:hidden". That should do the trick. ^^ If it doesn't, I could probably figure out the problem if you'd be willing to let me see the coding for the banner so far.

[amlin]

PHARAOH LEAP It also didn't work ;^;. I even tried adding overflow:hidden to the other css spots (#oneout) and while it stops the stretching, it stops it from hovering out as well!

I don't mind showing my code if it can help.

The css for all of it:
.bannery { background-color: #e9e6dc; height: 350px; width: 100%; overflow:hidden; }
   .headtext { font-family: 'Engagement', cursive; font-size: 105px; color: #6f1918; z-index: 999; position: absolute; margin-top: 100px; margin-left: 600px; text-shadow: 2px 2px rgba(0,0,0,0.3); overflow:hidden; }
   
/*made by sppice, tutorial at html-tutorials.tumblr.com*/
#oneout { z-index:1000; position: absolute; top: 0px; right: 1px; width: 15px; background-color: #4d1818; height: 270px; padding: 40px 0; text-align: center; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; }
#oneout_inner { top: 0px; right: -1020px; position: absolute; width: 1000px; padding: 10px; background: #ccc9be; height: 330px; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; text-align: left; border-left: 15px solid #4d1818; }
#oneout:hover { z-index:1000; right: 0px; }
#oneout:hover #oneout_inner { z-index:1000; right: 0px; }
.onetitle { display: block; writing-mode: lr-tb; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); position: absolute; right: -11px; top: 3px; font-family:Lucida Sans; font-size: 16px; font-weight: normal; text-transform: uppercase; letter-spacing: -1px; }

Then the actual html:
<div class="bannery"><img src="http://i.imgur.com/ugMwjgS.png" width="1200" height="350"></div>
       <div class="headtext">The Eternal</div>
       <!-- made by sppice, tutorial at html-tutorials.tumblr.com-->

<div id="oneout">
<span class="onetitle">

 

</span>
   <div id="oneout_inner" width="1000">
<center>

   <table width="1000"><tr><td width="250"><div style="text-align:center;font-family:'Dorsa',sans-serif;color:#6f1918;font-size:40px;text-transform:uppercase;">welcome</div><div style="padding:3px;height:100px;overflow:auto;font-family:arial;line-height:11px;letter-spacing:3px;font-size:11px;color:#efefef;text-align:justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac aliquam dui, ac pretium augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere ultrices dapibus. Praesent quam justo, pretium quis leo ac, laoreet cursus nunc. Cras vel varius eros, vel facilisis mauris. Nunc bibendum lacinia metus. Sed mollis metus vel odio ornare interdum at accumsan risus. Proin vestibulum velit quis felis cursus, a ultrices sem suscipit. Sed imperdiet scelerisque aliquet. Vivamus sed sem non tellus porttitor malesuada in auctor dui. Sed cursus porta nunc sit amet cursus. Sed sollicitudin interdum elit, ut pretium justo lobortis dictum. Sed vel magna arcu.

Duis quis metus ultricies, lobortis odio at, feugiat nulla. Morbi eget porta nulla, nec blandit nulla. Nullam vitae magna ultricies, consectetur quam id, imperdiet mi. Aenean lobortis turpis urna, vel venenatis nisl ullamcorper nec. In et erat dapibus ipsum convallis dapibus placerat vel nisl. In eget nunc lorem. Ut odio nunc, malesuada id pretium quis, tincidunt id justo. Fusce volutpat pulvinar tempus. Praesent consequat vel metus id sodales.</div>news</td><td width="250">staff/otms</td><td width="250">links</td><td width="250">census/sisters</td></tr></table>

<br></center></div></div>

[katya]

Have you tried creating another div with overflow:hidden and width:0px to put the sliding div inside? It's being caused by you placing the entire div right: -1020px, which obviously you need to do to shove it off the screen. Overflow: hidden won't hide that, because right: -1020px isn't overflow, it's the position of the div itself, not the content within it.

[amlin]

katya Ugh, it still doesn't work. I tried putting it in several places around the sliding div and it doesn't do anything. I'm starting to get really disheartened here XD I think it just really hates me

[beekeeper]

have you tried a div around the entire banner? like, putting the sliding part and the banner's image inside a div with set dimensions and overflow:hidden so that the sliding part won't show up outside of it.

[amlin]

beekeeper just tried. It only affects the banner (if I put it to 0px the banner doesn't show up for example) but the sliding part still stretches the board and shows up :/

[PHARAOH LEAP]

I think I found the solution by fiddling around with some of the coding you provided, though you'll have to do a bit of tweaking to get the board look right. Like Laika said, you need to put everything in the div, but try adding "position:absolute" to the div css. You'll have to put a margin-bottom in the css, too, so that the board doesn't overlap it, but I tested it on a test site of mine and the hover box doesn't stretch the board horizontally. c: I'd also set the div back to 100%, since it looks like you set it to a set pixel width. XD

[amlin]

PHARAOH LEAP ;^; It works! It finally stopped stretching the board! I had to use <br> instead of margin-bottom though, because it would just move everything along with it and the boards would still hover over top of the banner, but there's no more stretching! Thank you so much! And thank you everyone for putting up with this XD