Forums

Codyman

Hello, I have

@charset "utf-8";
/* CSS Document */

html { height: 100%; }
body { height: 100%; padding: 0px; margin: 0px; background: url('BG.jpg') #101010 repeat; } 

#constrain { height: 100%; width: 760px; margin-left: auto; margin-right: auto; position: relative; }
#header { width: 100%; margin: 20px 0px 100px 67px; float: left; position: relative; clear: right; }
#navigation { width: auto;  margin-left: auto; margin-right: auto; position: relative; }
#content { width: 382px; float: left; position: relative; background: url('Content.png'); }
#footer { width: 100%; position: absolute; bottom: 0px; display: block; margin-left: auto; margin-right: auto; text-align: center; font-family: Verdana; font-size: 10px; color: #4c4c4c; }
#footer p{ color: #4c4c4c; text-align: center; }
#footer a{ color: #6a6a6a; text-decoration: none;}
#footercenter { width: 118px; margin-left: auto; margin-right: auto; }

and


<body>
	<div id="constrain">
		<div id="header"><img src="logo.png" alt="Kryptik Logo" title="Kryptik" /></div>
        	<div id="navigation">
        		<img src="radio.png" alt="Radio" title="Radio" style="width: 75px; float: left;" />
                	<div id="content"></div>
        		<img src="news.png" alt="News" title="News" style="width: 75px; float: left;" />
        		<img src="contact.png" alt="Contact" title="Contact" style="width: 76px; float: left;" />
        	</div>
			<div id="footer">
            	<p>Kryptik.co © 2011 | <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p>
        		<a href="www.facebook.com/pages/Kryptik/129428887151231"><img src="facebook.png" alt="Facebook" title="Like Us!"  /></a>
            	<a href=""><img src="flickr.png" alt="Flickr" title="Flickr"  /></a>
            	<a href=""><img src="google.png" alt="Google+" title="Google+"  /></a>
            	<a href="http://twitter.com/#!/KryptikRadio"><img src="twitter.png" alt="Twitter" title="Follow Us!"  /></a>
            	<a href=""><img src="rss.png" alt="RSS Feed" title="RSS"  /></a>
            </div>	
    </div>
</body>
</html>

I'm trying to get the radio.png to stay on the left side of the constrain, have the content image to the right of it, and have the news & contact buttons to the right of the content image. However, this code provides me with This Photobucket

and this. But I want Photobucket

this. Thanks in advance!!

bhagavan

Dont worry,

Solution is here
- replace this code,
to be

From:YUVA

bhagavan


<div id="content">&nbsp;</div> - replace this code,
to be <div id="content"></div>

virtual

What he means is a floated div with a background image collapses if it has no content.

Codyman

^ I found my solution. Just gave each individual button a div and set the content to display: none;

joshuanhibbert

This may be of use (or not): http://joshuanhibbert.com/weblog/2011/07/display-none-vs-visibility-hidden/

bhagavan

Gave each individual button a div.
Its Good and Best. Or else you can go by My Way.

treehouse : what would you like to learn today?

Forums

Image Placement