alignment problems

joojoo · #1 Aug 14th, 2006, 10:00

Hi all,

I've been trying for ages now to do something I thought should be quite simple.

I Just want to get my logo aligned to the right and the links to align to the left, however I can only get it to either all align to the right or all align to the left

I've tried lists, spans, divs, I just can't do it, can anyone help?

Here's the link
http://www.toves.tv/website/test.html

here's the code as it is at the moment...

html:
<body>
<div id="wrap">

<div id="top">
<a href="home.html" class="nav">Home</a>   
<a href="about.html" class="nav">About</a>   
<a href="products.html" class="nav">Products</a>   
<a href="solutions.html" class="nav">Solutions</a>   
<a href="services.html" class="nav">Services</a>   
<a href="support/index.php" class="nav">Support</a>   
<a href="store.html" class="nav">Store</a>   
<a href="blog.html" class="nav">Blog</a>   
<a href="contact.html" class="nav">Contact</a>
<img src="images/spacer.gif" width="41" height="1">
<a href="http://www.toves.tv"><img src="images/wlogo.png" alt="toves" width="150" height="43" border="0"></a></div>



<div id="main">
<h1>Welcome</h1>
<p>Text</p>

</div>



<div id="left">
<p><b>Flash Will Go Here</b></p>
</div>



<div id="bot">
<p>text</p>
</div>


</div>

</body>

css:
#wrap {
position:relative;
margin:0 auto;
padding:0;
width:850px;
border:0;
background:#fff;
color:#333;
}

#top {
width:100%;
height:50px;
background:#fff;
text-align:right;
}

#main {
margin:0;
padding:0 15px;
width:600px;
float:right;
border:1px solid #333;
background:#fff;
color:#333;
height: 500px;
overflow: auto;
}

#left {
margin:0;
padding:0 15px;
width:150px;
float:left;
background-color:#CCCCCC;
color:inherit;
height: 500px;
border: 1px solid #333;
}

#bot {
margin:0;
padding:20px 0 0 0;
clear:both;
height:50px;
font-size: 70%;
background:#fff;
}

.divider {
padding:10px;
text-align:center;
}

Ryan Fait · #2 Aug 14th, 2006, 10:31

HTML: Select all

<style type="text/css">
    #header {
        width: 100%;
        height: 43px;
    }
    #header h1 {
        width: 150px;
        height: 43px;
        margin: 0;
        text-indent: -5000px;
        display: block;
        float: right;
    }
    #header h1 a {
        width: 150px;
        height: 43px;
        background: url("images/wlogo.png") no-repeat 0 0;
        display: block;
    }
    #header ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    #header li {
        padding: 0 10px 0 0;
        font: 14px/43px arial,sans-serif;
        display: inline;
    }
</style>
<html>
    <div id="header">
        <h1><a href="http://www.toves.tv">Toves</a></h1>
        <ul>
            <li><a href="home.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="products.html">Products</a></li>
            <li><a href="solutions.html">Solutions</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="support/index.php">Support</a></li>
            <li><a href="store.html">Store</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>
</html>

This is proper HTML and CSS.

joojoo · #3 Aug 14th, 2006, 11:03

ah, fantastic - thank you

is there any way i can get those links to align to the bottom?

(vertical-align bottom doesn't seem to work?)

Ryan Fait · #4 Aug 14th, 2006, 20:47

There is no standard way to align things to the bottom. Use a top margin or padding to push the text down and take out the line height declaration I added (14px/43px arial, sans-serif to 14px arial,sans-serif).

ukgeoff · #5 Aug 14th, 2006, 21:53

Which links do you want to align to the bottom of which area?

joojoo · #6 Aug 15th, 2006, 07:41

I wanted all of those in div id header (the navigation links) to align so that their bottom is the same as the bottom of the logo image. Not sure that makes sense

Basically at the moment height wise they are to the middle of the logo image

Ryan Fait · #7 Aug 15th, 2006, 08:40

I know what you mean. Something like this should do the trick I think:

Code: Select all

    #header ul {
        margin: 28px 0 0 0;
        padding: 0;
        list-style-type: none;
    }
    #header li {
        padding: 0 10px 0 0;
        font: 14px arial,sans-serif;
        display: inline;
    }

What I changed is beginner's CSS, you should be able to do that!

joojoo · #8 Aug 15th, 2006, 08:55

Thanks, I had tried that however that just knocks the two boxes below out so that the "flash will go here" box goes beneath the main box.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Drop down menu alignment problems. Div wont vertically align.	Itsumishi	Web Page Design	7	Mar 4th, 2008 04:57
tricky floating problems for div alignment	escaflowne11	Web Page Design	4	Dec 10th, 2006 08:03
Alignment in IE	technicolourchameleon	Web Page Design	4	Oct 11th, 2006 22:59
CSS Newbie: Firefox alignment problems	SuperGrover1981	Web Page Design	1	Aug 31st, 2006 10:28
Two problems - image alignment and new browser windows.	DrRedSkwirrell	Web Page Design	9	Oct 29th, 2005 00:51

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
alignment problems