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 ?
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"> </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!