1 reply [Last post]
djafke
Offline
newbie
Last seen: 12 years 32 weeks ago
Joined: 2004-10-16
Posts: 1
Points: 0

as you can see at www.djafke.com, its a mess

how can i fix the footer and the menu (under header)

- i want a text left and a text right at the same hight (but i can't get it fixed)

how do you do that guys ?

obsidian
Offline
Enthusiast
South Carolina
Last seen: 13 years 14 weeks ago
South Carolina
Joined: 2004-08-15
Posts: 136
Points: 0

1 div, one text left, one text right

The easiest way I've found to align two different sets of text, one left and one right is like so:

If you have a footer (or header) defined, give yourself a div tag imbedded within the footer that will hold your text. Next, both texts need to be within a span that you can modify to your liking inside that nested div, like so:

<div id="footer">
    <div class="row">
        <span class="left">Left aligned text</span>
        <span class="right">Right aligned text</span>
    </div>
    <div class="spacer">&nbsp;</div>
</div>

The extra spacer div has to be there because of the floats. When you do your style sheet, be sure to make your font-size in your spacer div is comperable to the padding you want or you'll have some interesting issues.

Now, for the style sheet:

body {
	margin: 0;
	background-color: #EFEFEF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
}

div#footer {
	width: 100%;
	border-bottom: 2px solid #666666;
	background-color: #FFFFFF;
}

div.row {
	padding: 10px;
	clear: both;
}

div.row span.left {
	display: block;
	width: 48%;
	float: left;
	text-align: left;
}

div.row span.right {
	display: block;
	width: 48%;
	float: right;
	text-align: right;
}

div.spacer {
	font-size: 10px;
        clear: both;
}

The clear: both in the spacer div allows that nothing else is going to move up and crowd your text within the floated spans. The rest is pretty self-explanitory if you've done much with CSS. Hope this helps, and if you have any questions, let me know!

You can't win, you can't lose, you can't break even. You can't even get out of the game!