CSS float vertical alignment

6 New Member

hey
I've been suffering from several float problems. I want a Title on the left to be aligned vertically with several links on the right. However with my code the Title is lower than the links. I've tried putting display: inline in every place but to no avail. Here is my code:

Expand|Select|Wrap|Line Numbers

 <style type="text/css">
 
/* =INITIAL 
 
/* Neutralize styling: 

   Elements we want to clean out entirely: */

html, form, fieldset, body {

        margin: 0;

        padding: 0;

        font: 80%/130% Verdana, Arial, Helvetica, sans-serif;

}
 
/* Neutralize styling: 

   Elements with a vertical margin: */

pre, blockquote, ul, ol, dl, address {

        margin: 1em 0;

        padding: 0;

}
 
p {

padding: 0;

margin-top: 1em;

margin-bottom: 0em;

margin-left:0;

margin-right:0;

}

/* Apply left margin:

   Only to the few elements that need it: */

dd, blockquote {

        margin-left: 1em;

}
 
/* Miscellaneous conveniences: */

form label {

        cursor: pointer;

}

fieldset {

        border: none;

}

input, select {

        font-size: 100%;
 
}

textarea {

     font-size: 100%;

        margin:2px;

        padding:2px;

}
 
#page {

background: grey;

text-align:center;

}
 
#box {

    width: 700px;

    border: 2px solid black;

    border-width: 0px 2px;

    margin: 0 auto;

    padding: 0;
 
}
 
#topbar {

width: 690px;

background: #336633;

text-align: right;

padding: 5px;
 
}
 
.toplinks {

margin: 0 0;

padding: 0px;

display: inline;

}
 
.toplinks ul {

list-style-type: none;

margin: 0;
 
}
 
.toplinks ul li {

display: inline;

list-style-type: none;

padding: 2px;
 
}
 
#header {

left:100px;

background: #FFF;

background-image: url('pattern3.jpg');

width: 700px;

padding: 0px;

margin-top:0em;

height: 100px;

clear: both;

}

</style>
 
<body id="page">

<div id="box">
 
<div id="topbar">

<div class="toplinks">
 
<ul>

<li>Link 1</li>

<li>Link 2</li>

</ul>

</div>

 <h2>Title</h2>

<div style="clear:both;"></div>

</div>

<div id="header">

Logo here with image..bg image

<div id="underlinemenu">

<ul>

<li><a href="" title="Home">Home</a></li>

<li><a href="" title="link 2">Link 2</a></li>

<li><a href="" title="link 3">Link 3</a></li>

<li><a href="" title="Link 4">Link 4</a></li>

</ul>

</div>

</div>

<div id="main">
 
</div>

</body>

ive been using the additional div with the clear:both just to make sure the parent div encompasses both..once properly aligned i wont need it..hopefully haha

Aug 29 '06 #1

Subscribe Reply

15634

cbjewelz

New Member

here is a pic:

Aug 29 '06 #2

jumpfroggy

New Member

I know this is old, and I'm sure you've found something by now, but I'd recommend setting the Title to "float:left;" and the links/list on to "float:right;". That way they'll be mostly on the same line. I think because you have the links as inline, but the title is a block element (<h1>), they wont be on the same line.

Feb 16 '07 #3

AricC

1,892

Recognized Expert Top Contributor

Try text-align: left

Feb 16 '07 #4

Similar topics

vertical alignment of image

by: abracad | last post by:

Hi Is it possible to vertically align an image in the middle of a DIV of fixed height?