Div Tags Mis-Aligning

Redgie

Redgie

Redgie

Associate
Joined
18 Nov 2008
Posts
2,430
Location
Liverpool
Okay guys, I hope you can help without much explanation because I'm not great at the explaining part!

The site is here: http://hbcomputers.com/dunk/dunk2/ (Dons, the main website is not functional, and not a competitor, don't worry!)

The central content box should align to the top of the space, just like the content box on the left, but instead it lines up to the bottom left content box.

It's like it takes the position of the last used <div> tag, and aligns to that.

The idea behind it is that it loads the left section, then the centre, but this makes it sort of difficult.

Any help would be greatly appreciated, thanks!
 
I'm not sure there's much you can do about it.

If the top left content box is always the same height, you could just apply a negative top margin to the centre content box.

Code: 
#content { margin-top: -100px }
 
I thought about that, but problem is that it will align to whatever content box is on the bottom left of the page, which presumably means I would have to update it every time I add a box on the left?

It works fine on my other site, but I only use 1 content box on the left for that one :/
 
ditch the <br />'s.
Code: 
<html><head><link rel="stylesheet" type="text/css" href="style.css" id="pageStyle" media="all">

	<title>Simple Software - Control Panel</title>
</head>
<body><div class="header">
	<div class="headerbar">
		<h1>Control Panel</h1>
	</div>
	
	<div class="leftmenu">
		<div class="menuheader">&nbsp; EPOS System</div>
		&nbsp;<a href="index.php">&gt; Use System</a><br>
		&nbsp;<a href="index.php">&gt; Change Settings</a><br>
	</div>
		
	<div class="leftmenu">
		<div class="menuheader">&nbsp; Account</div>
		&nbsp;<a href="account.php">&gt; Review Account Details</a>
	</div>
<div class="content"><div class="contentheader">&nbsp;Test Content</div>Test</div>

</div>
</body></html>

Code: 
.content {
background-color: aliceBlue;
border: 2px solid black;
color: #003F87;
float: center;
font-family: Verdana, serif;
font-size: 8pt;
font-weight: bold;
height: 15em;
margin: 1em auto;
text-decoration: none;
width: 50%;
}
.leftmenu {
background-color: aliceBlue;
border: 2px solid black;
clear: both;
color: #003F87;
float: left;
font-family: Verdana, serif;
font-size: 8pt;
font-weight: bold;
margin-bottom: 1em;
margin-left: 1em;
margin-right: auto;
margin-top: 1em;
text-decoration: none;
width: 20%;
}

Looks like this:
2lk9vv5.jpg
 
Last edited:
Thanks a lot Jestar, the code uses includes to keep it tidy so doesn't look exactly the same as what you get when you view the source, but looking at your post I'm assuming it's the margin in the CSS that makes the difference because it pushes the content boxes away from eachother and removes the need for the <br>'s?
 
Awesome mate thanks a lot I'll add it in in a minute (FTP is updating >.<). Just out of interest, what does clear:both do?
 
It means that both sides will be "clear" of other elements (of the same level/node)

It's useful when using floats. :)
 
Okay awesome thanks so much, hugely appreciated! Just had a mess around with what you said and you were spot on! What does the 1em actually mean? I'm doing this as a learning project so anything is helpful :)
 
em is merely a typeface unit. I try to avoid using px where possible, as it is an absolute value (number of pixels), whereas em and pt are dynamic. :)
 
You must log in or register to reply here.
Back
Top Bottom