SasukesRage

According to its tutorial if I change the width of #moving_tab & I'm to do the same with the width value in .item, .lava, .panel, ul. which I have but the sliding Panel loses alignment and drops everything that should appear under Recent Posts into the 1st slider window which is Popular posts. The overall goal is to get it to function like this sites: Full Ride Listing The width for the code is set to 968px which is my main content and the rest of the pages size but even with this width everything that is suppose to go under the 1st tab "Popular Posts" carries over and shows half of itself on slide tab 2. Also when it is at 968px both Panel 01 Item 1 and Panel 02 Item 1 columns appear side by side and I have tried inserting margin and teetering with the pre existing settings to try and push it over but it fails, I've included an attachment of where I am so far, the image will not come up but that is because it isn't included but any image of your own would work fine just set width to 145 and height to 115..I really would appreciate some help with this! Any idea what is the problem? I've managed to get my .ridelist floating divs to go down vertically but they overlap Panel 02 Item 1 and I can't seem to push that out to the next window so I can have the 1st slider panel display content side by side and still have room on the 2nd slider to repeat it. example.html

Thanks mod, I found out it was due to me not having margin where .ridelist was that achieved the spacing desired, now I'm having issues with getting it all to fit inside JQuery Moving Tab and Sliding content I can get the divs inside of there and when I increase the width of the content slider to 968px which is the size of the main content for the page the slider loses the two column slide and when I go to Recent Posts it's blank and all of what was suppose to be on it is on Popular Posts side and the horizontal display is lost...

Anyone have any suggestions??

Basically I am trying to replicate how the Full Ride Listing is displayed such as The Swarm and Saw - The Ride and keeping the pattern continuous just like it's displayed. I have tried inspecting the elements with firebug but considering in the HTML there is a span class hidden I think I'm missing something because I have even created a new document and copy and pasted the Fullride Html and CSS from the site and the only thing that will transfer over into Dreamweaver is the red background and the small text in light pink for the Min. Height requirements. The underline and linking of the text does not transfer but I am aware on how to achieve that I am planning to leave that last I just want to get everything positioned correctly and then go back and have the names link. I am curious on if this is floating div of usage or parent/child being used to achieve this. I have accomplished it with div but they are squished together and not spaced apart like the layout on Thorpe Park. My HTML: <div class="ridelist"> <img src="" alt="" width="110" height="83" /> <h1>Hawkeye</h1> <p class=""> <span class="rideTitle">Hawkeye</span> <span class="rideTagLine">The world's most twisted coaster.</span> </p> <p class=""><span class="rideRestrictions">Min height: 1.4m. Not recommended for under 12s</span> <span class="clearBoth"></span></p> </div></div> </div> <div class="ridelist"> <img src="" alt="" width="110" height="83" /> <h1>The Raptor</h1> <p><span class="">The Raptor The world's most terrifying coaster. </span></p> <p> <span class="">Min height: 1.4m. Not recommended for under 12s</span> <span class=""></span></p> </div> CSS: <style> .clear { display:block; clear:both; } .ridelist { width: 400px; padding: 15px; border: 1px solid #069; float: left; } .ridelist img { width:100px; float:left; margin-right:10px; } .comment.text { width:290px; float:left; min-height:100px; margin-bottom:10px; } .comment.links { list-style:none; padding:0; margin:0; } .comment.links li { display:inline; magin-left:10px; float:right; } .ridelist { border: 1px solid #069; float: left; } .ridelist img{ width:100px; float:left; margin-right:10px; } .ridelist .text .links { padding: 0; margin: 0; list-style-type: none; float: left; width: 100%; } .ridelist .text .links li{ float: right; margin-right: 80px; width: 8em; color: #000; text-decoration: none; }</style> </body> </html> I included an attachment of this code as well because although it achieves the desired effect of at least having them sitting horizontally if I continue trying to add more boxes three will go horizontally and the fourth causes misalignment sitting on the far left of the page where my footer should be and instead it makes my footer jump a space down and go out of line to the right when the entire layout should remain center. I'm confused on if I need to make a parent div for example "Ridecontent" and have .ridelist contained within Ridecontent would this achieve the desired layout?

Why is that?

Why is that?

Thank you very much, I'm going to try this as well if the first method Marcelc doesn't work out for me.

Thank you very much, I felt it was something simple I was looking over, I will get firebug and try and apply the instructions you have given me to my design in dreamweaver!

An example of what I'm talking about could be the design of this site's layout, How is the DW and FW icons overlapping the menu bar? On top of that how is it when I right click view background it takes a smaller shape but when I exit it, it fits to the page? Is a scroll with page effect on? I'm trying to design a website similar to http://www.carowinds.com/,'>http://www.carowinds.com/, notice how the roller coaster and the two children fit beside the slider but when you view the background it shrinks dramatically to where you would think the slider couldn't fit in the middle. Any idea on how to go about achieving what I've outlined? Specifics on if it is the HTML or the CSS would be helpful too. I've already designed a background with menu bar I wish to use and when I sliced it for export to dreamweaver the slider and all fits into place but it doesn't fit to the entire page like http://www.carowinds.com/