Forums

smithaa99

http://www.adamanthonysmith.com/Cipher Group Website/index.html
http://www.adamanthonysmith.com/Cipher Group Website/style.css

Hi, I'm trying to get the above page wrap straight, but it won't line up correctly. There is one wrap for the whole content area, and there is one for just the header.

I want the black box to align to the right of the logo.

Thanks!
Adam

joshrives

Looks to me like your page wrap is only 960px but the logo and black box together are over 1000px

Fourize

Float the splash box to the right for it to align that way. otherwise set a left margin equal to the width of the logo.

#splash {background-color: #000; height: 297px; width:708px; margin: 0; padding: 0; float: right;}

Are you looking to have them sit side by side?

smithaa99

Yes, I need to have them sit side by side. The other div is going to be a splash image for the company.

The neon page wrap border is just so I can see where the page-wrap is ending up.

Unfortunately, this still isn't working! I don't know why, the logo/splash equal 960px...

Thanks,
Adam

Fourize

replace your css with this... (check reference below to see it working)

css:

#body {background: #FFFFFF; font-family: Tahoma, Geneva, sans-serif; font-size: 24px; color: #000000; margin: 0 auto; padding: 0;}
#page-wrap {width: 960px; height: 1500px; margin: 0 auto; padding: 0; border: #F3C solid 1px;}
#header-wrap {width:960px; height: 297px; margin: 0; padding: 0;} 
#logo {height: 297px; width: 252px; margin: 0; padding: 0; float: left;}
#splash {background-color: #000; height: 297px; width:708px; margin: 0; padding: 0; float: right;}
#menu {font: Tahoma, Geneva, sans-serif; float: left; width: 66%; text-align:left; border: #F3C solid 1px;}
#sidebar {float: left; width:34%;}
#blog-feed {background-color: #999;}

.clear {clear: both;}

html:

<body> 
 
<div id="page-wrap"> 
 
	<div id="header-wrap"> 
		<div id="logo"> 
			<img src="images/cipher-logo.jpg" height="297" width="252" /> 
		</div> 
		<div id="splash"></div> 
		<div class="clear"></div>
	</div><!--HEADER-WRAP--> 
 
</div><!--PAGE-WRAP--> 
 
</body>

for reference... http://fourize.co.uk/test/smithaa/

if you dont want the page to be centered remove 'auto' from margin 0; on the page-wrap bit.

hope this helps!

smithaa99

Thank you!

Fourize

More than welcome

treehouse : what would you like to learn today?

Forums

Another CSS Page Wrap Problem