...

View Full Version : DIV/CSS align question



dlg0351
05-05-2006, 06:57 PM
I am trying to line up the following elements on the same line using css.

Here is my HTML:



<div id="header">
<div id="logo"><a href="#"><img src="images/logo.jpg" width="165" height="72" border="0" alt="" /></a></div>

<div id="top-image"><img src="images/top.jpg" width="16" height="72" border="0" alt="" /></div>

<div id="slogan">Slogan Here</div>
<div id="top-nav">
<a href="#">About the FLC</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">FAQs</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Contact Us</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Feedback</a>
</div>

<div id="news"><a href="#"><img src="images/news.jpg" width="138" height="72" border="0" alt="" /></a></div>
</div>


Here is my CSS:



img {
display: block;
}

#header {
width: 775px;
height: 72px;
background: #FFF;
border: 0px solid black;
}

#logo {
float: left;
}

#top-image {
float: left;
}

#slogan {
width: 456px;
height: 41px;
line-height: 41px;
text-align: center;
font-size: 15px;
font-style: italic;
font-weight: bold;
float: left;
border: 0px solid black;
}

#top-nav {
width: 456px;
height: 31px;
line-height: 31px;
text-align: center;
color: #FFF;
background: #293f68;
float: left;
}

#top-nav a {
color: #FFF;
text-decoration: none;
}

#news {
???
}


If I put nothing in the news id everything lines up properly in FF, but in IE news.jpg image is moved down to the next line.

Can anyone shed some light on this for me? Any help is greatly appreciated!

jonnybinthemix
05-05-2006, 07:00 PM
display: inline;

try that....

dlg0351
05-05-2006, 07:04 PM
display: inline; in the news div does nothing in FF and IE.

jonnybinthemix
05-05-2006, 07:10 PM
sorry, dident read properly!!

Try making the header div slightly wider, by a few px.

EDIT, if i could read maybe we might get somewhere!!!!!!

Sorry, i have read it wrong 3 times now, maybe i should go back to school!!! lol

Lookin at it now, im no pro, but maybe able help...

dlg0351
05-05-2006, 07:13 PM
that did not work either

dlg0351
05-05-2006, 07:17 PM
I guess I could always position it using absolute values but I didn't want to have to do that.

jonnybinthemix
05-05-2006, 07:19 PM
you can try that, but it will not move with the browser when its resized...

jonnybinthemix
05-05-2006, 07:49 PM
have you got a live version? easier to see....

Also, try

float: left;
vertical-align: top;

jon



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum