Jump to content

Divs & Aligninment


bbr
 Share

Recommended Posts

Tables i can manage, http://blogtestlayout.blogspot.com/The border pixel is a temporary solution.Divs however, completely freak me out.I've tried aligning the dives as you can see above, but without the table the bars on the right side go "under" the main header.I can't for the life of me figure out how to move the silly things to the top of the page without forcing them there with a table.I'm probably just looking at the issue wrong, but perhaps somebody here has an insight that i'm missing.Also the "left" sidebar, moves itself to the right. and the "right" sidebar keeps moving itself to the left.... go figure.These things are cute in tandem with CSS, but without tables, i just can't seem to get them to stick where they should be.

<body>  <div id='outer-wrapper'>	<table align='center' border='1' cellpadding='0' cellspacing='0'>		<tr valign='top'>			<td valign='top'>				  <div id='header-wrapper'>					<b:section class='header' id='header' maxwidgets='1'><b:widget id='Header1' locked='true' title='Experimental (Header)' type='Header'/></b:section>				  </div>							  <div id='crosscol-wrapper' style='text-align:center'>					<b:section class='crosscol' id='crosscol' showaddelement='no'/>				  </div>								  <div id='main-wrap1'>					  <div id='main-wrap2'>						<b:section class='main' id='main' showaddelement='no'><b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/></b:section>					  </div>				  </div>			</td>			<td valign='top'>				  <div id='leftsidebar-wrap'>					<div id='sidebar1-wrap'>						<div id='sidebar1-wrap2'>							<b:section class='sidebar' id='sidebartop'><b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/></b:section>						</div>					</div>									<div id='sidebarbottom1-wrap1'>						<div id='sidebarbottom1-wrap2'>							<b:section class='sidebar' id='sidebar' preferred='yes'><b:widget id='LinkList1' locked='false' title='links' type='LinkList'/></b:section>						</div>					</div>				  </div>								  <div id='rightsidebar-wrap'>					<div id='sidebar2-wrap'>						<div id='sidebar2-wrap2'>							<b:section class='sidebar' id='sidebartop2'><b:widget id='TextList1' locked='false' title='list' type='TextList'/></b:section>						</div>					</div>									<div id='sidebarbottom2-wrap1'>						<div id='sidebarbottom2-wrap2'>							<b:section class='sidebar' id='sidebar2' preferred='yes'><b:widget id='HTML3' locked='false' title='test' type='HTML'/></b:section>						</div>					</div>				  </div>			</td>		</tr>	</table>  <div id='footer-wrap1'>	  <div id='footer-wrap2'>		<b:section class='footer' id='footer'><b:widget id='HTML2' locked='false' title='test test test' type='HTML'/></b:section>	  </div>  </div></div></body>

This is what it's like now.

Link to comment
Share on other sites

Here's two examples, that (if combined) may help (if I understand correctly what u r trying 2 do, I'm not very good at table based layouts):http://www.htmldog.com/examples/pagelayout4.htmlhttp://www.htmldog.com/examples/pagelayout7.htmlNote: A nice trick to give the navigation bars a background color is by giving the content panel left and right borders with the same width as the navigation bars.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...