2 replies [Last post]
avataru
Offline
newbie
Last seen: 14 years 39 weeks ago
Joined: 2005-11-13
Posts: 2
Points: 0

Hello, I am making a layout in XHTML 1.0 Transitional and CSS and I have a problem with element alignment so I was hoping you could help.

The layout should look like this:
http://applepie.avataru.net/test/Layout-4.gif

I am having trouble with the pagination div alignment. As you can see at http://applepie.avataru.net/test/ the pagination (red border) is not aligned to the top of the page title div (blue border). Also, the blue bordered div is too tall and I have no idea why.

I would really appreciate your help,

Thank you in advance.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 23 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

<div> problem

answering the second question first, the height is caused by the h1 margins. To see it shrink in height add this (temporarily):

.page_title h1 {margin: 0;}

Now, for the first question - the h1 is a block level element, which takes up all available width allowing no room for the right float. You could either:

a) make the h1 float: left and contain the floats within page_title by either adding overflow:hidden to .page_title or using Tony's clearfix code

b) put the page_pagination div before the h1 in the html source. This may seem the easier method, but probably not better for search engines.

As a side note, you appear to be developing a case of divitis...

avataru
Offline
newbie
Last seen: 14 years 39 weeks ago
Joined: 2005-11-13
Posts: 2
Points: 0

<div> problem

Thank you for the fast reply. I have no idea why I didn't realise <h1> is block-type. Anyway, Everything works now and the code looks like this:

.page_title h1 {
	margin: 0px;
	color: #9CB53B;
	font-weight: bold;
	font-size: 15px;
	display: inline;
	float: left;
}