Sep 122011
three div blocks, I just need them to all line up. For some reason the last one keeps getting bumped down even though the code is the same for all three.
any help?
CSS
#topcontainer {
height: 305px;
width: 100%;
text-align: center;
}
#topcontainer .streamcontainer1 { height: 100%; background-color: #202020; }
#topcontainer .streamcontainer2 { height: 100%; background-color: #202020; }
#topcontainer .streamcontainer3 { height: 100%; background-color: #202020; }
.streamcontainer1 { margin: 0 auto; padding: 0px; text-align: left; width: 264px; display: inline-block; }
.streamcontainer2 { margin: 0 auto; padding: 0px; text-align: left; width: 264px; display: inline-block; }
.streamcontainer3 { margin: 0 auto; padding: 0px; text-align: left; width: 264px; display: inline-block; }
HTML
<div id="topcontainer">
<div class="streamcontainer1">
<p>shoutcast stream<br/><a href="http://www.djprinvale.com:8000/listen.pls" title="audio only stream"><img src="/images/shoutcast-icon.png" alt="shoutcast"></a></p>
</div>
<div class="streamcontainer2">
<p>stickam stream<br/><a href="http://www.stickam.com/djprinvale" title="audio + video stream"><img src="/images/video-icon.png" alt="stickam"></a></p>
</div>
<div class="streamcontainer3">
<p> • <a href="http://www.djprinvale.com:8000" title="stats" target="blank">shoutcast stats</a><br/>
• <a href="http://www.winamp.com" title="winamp" target="blank">winamp main</a><br/>
• <a href="http://itunes.apple.com/us/app/shoutcast-radio/id299647180?mt=8" title="iphone stream" target="blank">iphone stream app</a><br/>
• <a href="http://www.stickam.com" title="stickam" target="blank">stickam main</a><br/>
• <a href="http://itunes.apple.com/us/app/stickam-live-video/id331378902" title="sitckam iphone" target="blank">iphone stickam app</a><br/>
• <a href="http://www.mysqueezebox.com/appgallery/Shoutcast" title="squeezebox app" target="blank">squeezebox shoutcast</a><br/>
• <a href="http://www.streamsolutions.co.uk/" title="streamsolutions" target="blank">streamsolutions</a>
</p>
</div>
</div>
you can see it here:
note: I had it working in FF when I combined 1/2/3 into one. I tried to split the divs up into streamcontainer1/2/3 just now…
never worked in any other browser.
.streamcontainer1 { margin: 0; padding: 0px; text-align: left; width: 264px; display: block; float: left; border-right: 4px solid #000;}
.streamcontainer2 { margin: 0; padding: 0px; text-align: left; width: 264px; display: block; float: left; border-right: 4px solid #000;}
.streamcontainer3 { margin: 0; padding: 0px; text-align: left; width: 264px; display: block; float: left; }
#topcontainer {
height: 305px;
width: 800px;
margin: 0 auto;
text-align: center;
}
Quite a few cases of bad practice on that site, though. But it works.
thanks. Trying to get better at the good practice stuff slowly but surely.